@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/webfonts/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/webfonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/webfonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/webfonts/poppins-800.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/webfonts/open-sans.woff2') format('woff2');}
/*
Template Name: Tunis - Personal Portfolio
Author: celtano
Author URI: http://themeforest.net/user/celtano
Description: Tunis - Personal Portfolio
Version: 1.0
*/

/*------------------------------------------------------------------
[Table of contents]
	+ General
	    - Miscellaneous
		- Light Body
		- Buttons
		- Page Title
	+ Header
		- Desktop Navigation
		- Mobile Navigation
	+ Pages
		- Homepage
		+ About
		    - Personal Info List
			- Box Stats
			- Resume
			- Skills
		+ Portfolio
		    - Grid
		    + Slideshow
                - Embedded Videos
                - Carousel
                - Navigation
        + Contact
            - Left Side
            - Contact Form
		+ Blog
            - Latest Posts
            - Pagination
	- Responsive Design Styles
-------------------------------------------------------------------*/

/* [ GENERAL ] */
/*================================================== */

/*** Miscellaneous ***/

html {
  overflow-x: hidden;
  height: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: #fff;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  background-color: #111;
}

.poppins-font {
  font-family: 'Poppins', sans-serif;
}

.open-sans-font {
  font-family: 'Open Sans', sans-serif;
}

hr.separator {
  border-top: 1px solid #252525;
  margin: 70px auto 55px;
  max-width: 40%;
}

.ft-wt-600 {
  font-weight: 600;
}

.mb-30 {
  margin-bottom: 30px;
}

.no-transform {
  transform: none !important;
}

.custom-title {
  padding-bottom: 22px;
  font-size: 26px;
}

/*** Light Body ***/

body.light {
  color: #666;
  background-color: #fff;
}

body.home-page.light .home-details h1 span,
body.light .button .button-text {
  color: #666;
}

body.light .button:hover .button-text {
  color: #fff;
}

body.home-page.light .home-details h6 {
  color: #777;
}

body.light #preloader:before,
body.light #preloader:after {
	background-color: #eee;
}

body.light .title-section h2 {
  color: #666;
}

body.light .title-bg {
  color: rgba(30, 37, 48, 0.07);
}

body.light .about .box-stats {
  border: 1px solid #ddd;
}

body.light .about .c100,
body.light .about .resume-box .time {
  background-color: #eee;
}

body.light .about .resume-box .time,
body.light .about .resume-box p {
  color: #666;
}

body.light .about .resume-box .place:before {
  background-color: #666;
}

body.light .about .resume-box li:after {
  border-left: 1px solid #ddd;
}

body.light .about .c100 > span {
  color: #666;
}

body.light .about .c100:after {
  background-color: #fff;
}

body.light .portfolio .slideshow figure {
  background-color: #fff;
}

body.light .portfolio .slideshow ul > li:after {
  background: rgba(255,255,255,0.77);
}

body.light .portfolio .slideshow {
  background: rgba(0,0,0,0.7);
}

body.light .contact .contactform input[type=text],
body.light .contact .contactform input[type=email],
body.light .contact .contactform textarea {
  background-color: #fff;
  border: 1px solid #ddd;
  color: #666;
}

body.light .contact  ul.social li a {
  color: #666;
  background: #eee;
}

body.light .contact  ul.social li a:hover {
  color: #fff;
}

body.light .blog .post-content {
  background-color: #f2f2f2;
}

body.light .blog .post-content .entry-header h3 a {
  color: #666;
}

body.light .blog .page-link {
  color: #666;
  background-color: #eee;
  border: 1px solid #eee;
}

body.light.blog-post .meta {
  color: #888;
}

body.light .blog .page-item.active .page-link {
  color: #fff;
}

body.light hr.separator {
  border-top: 1px solid #ddd;
}

@media (min-width: 992px) {
  body.light .header ul.icon-menu li.icon-box {
    background-color: #eee;
  }

  body.light .header ul.icon-menu li.icon-box i {
    color: #666;
  }

  body.light .header ul.icon-menu li.icon-box.active,
  body.light .header ul.icon-menu li.icon-box:hover,
  body.light .header ul.icon-menu li.icon-box.active i,
  body.light .header ul.icon-menu li.icon-box:hover i {
    color: #fff;
  }
}

@media (max-width: 991px) {

  body.light .main-img-mobile {
    border: 4px solid #eee;
  }

  body.light #inputmobile .trigger-mobile,
  body.light #mobile-nav {
    background: #eee;
  }

  body.light #inputmobile .trigger-mobile > span {
    background: #666;
  }

  body.light #mobile-nav li a {
    color: #666;
  }

  body.light #mobile-nav li:after {
    background: #ddd;
  }

  body.light .portfolio .slideshow nav {
    background: #eee;
    border-bottom: 1px solid #ddd;
  }

  body.light .portfolio .slideshow nav span img {
    display: none;
  }

  body.light .portfolio .slideshow nav span.nav-next {
    background-image: url("../img/projects/navigation/right-arrow.png");
    background-size: cover;
  }

  body.light .portfolio .slideshow nav span.nav-prev {
    background-image: url("../img/projects/navigation/left-arrow.png");
    background-size: cover;
  }

  body.light .portfolio .slideshow nav span.nav-close {
    background-image: url("../img/projects/navigation/close-button.png");
    background-size: cover;
  }

  body.light .portfolio .slideshow nav span.nav-next,
  body.light .portfolio .slideshow nav span.nav-prev {
    top: 51px;
  }

  body.light .portfolio .slideshow {
    background: #fff;
  }
}

@media (max-width: 576px) {
  body.light .title-section {
    background: #eee;
    border-bottom: 1px solid #ddd;
  }

  body.light #inputmobile {
    border: 0;
  }

  body.light .portfolio .slideshow nav span.nav-next,
  body.light .portfolio .slideshow nav span.nav-prev {
    top: 31px;
  }
}
/*** Preloader ***/

#preloader {
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	z-index: 99999;
	display: flex;
	pointer-events: none;
}

#preloader:before,
#preloader:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: -1;
	background-color: #222;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}

#preloader:after {
	left: auto;
	right: 0;
}

#preloader .line {
	margin: auto;
	width: 3px;
	border-radius: 4px;
	height: 250px;
	position: relative;
	overflow: hidden;
	-webkit-transition: all .8s ease 0s;
	-o-transition: all .8s ease 0s;
	transition: all .8s ease 0s;
}

.line:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-animation: animateline 1000ms ease-in-out 0s forwards;
	-o-animation: animateline 1000ms ease-in-out 0s forwards;
	animation: animateline 1000ms ease-in-out 0s forwards;
}

.line:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: transparent;
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-animation: animatebgline 1200ms linear 0s infinite;
	-o-animation: animatebgline 1200ms linear 0s infinite;
	animation: animatebgline 1200ms linear 0s infinite;
	animation-delay: 2000ms;
}

@keyframes animateline {
	0% {
		height: 0;
	}

	100% {
		height: 100%;
	}
}

@keyframes animatebgline {
	0% {
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	100% {
		-webkit-transform: translateY(200%);
		-ms-transform: translateY(200%);
		-o-transform: translateY(200%);
		transform: translateY(200%);
	}
}

.preloaded .line:after {
	opacity: 0;
}

.preloaded .line {
	opacity: 0;
	height: 100% !important;
}

.preloaded:before,
.preloaded:after {
	-webkit-animation: finishanimation 500ms ease-in-out 500ms forwards;
	-o-animation: finishanimation 500ms ease-in-out 500ms forwards;
	animation: finishanimation 500ms ease-in-out 500ms forwards;
}

@keyframes finishanimation {
	0% {
		width: 50%;
	}

	100% {
		width: 0;
	}
}
/*** Buttons ***/
.button {
  overflow: hidden;
  display: inline-block;
  line-height: 1.4;
  border-radius: 35px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  transition: 250ms all ease-in-out;
  text-transform: uppercase;
  text-decoration: none !important;
  position: relative;
  z-index: 1;
  padding: 16px 70px 16px 35px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background-color: transparent;
  outline: none !important;
}

.button .button-text {
  position: relative;
  z-index: 2;
  color: #fff;
  transition: .3s ease-out all;
}

.button:before {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateX(100%);
  transition: .3s ease-out all;
}

.button:hover .button-text {
  color: #ffffff;
}

.button:hover:before {
  transform: translateX(0);
}

.button-icon {
  position: absolute;
  right: -1px;
  top: -1px;
  bottom: 0;
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  color: #ffffff;
  border-radius: 50%;
}

/*** Page Title ***/

.title-section {
  margin: 0 auto;
  width: 100%;
  position: relative;
  padding: 80px 0;
}

.title-section h2 {
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
}

.title-bg {
  font-size: 110px;
  left: 0;
  letter-spacing: 10px;
  line-height: 0.7;
  position: absolute;
  right: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 800;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.07);
  z-index: -1;
}

/* [ HEADER ] */
/*================================================== */

/*** Desktop Navigation ***/

@media (min-width: 992px) {

  /*** Navigation ***/

  .header {
    position: fixed;
    right: 30px;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    height: calc(100vh - 200px);
    top: 100px;
    opacity: 1;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
  }

  .header.hide-header {
    z-index: 0 !important;
    opacity: 0;
  }

  .header ul.icon-menu {
    margin: 0;
    padding: 0;
  }

  .header ul.icon-menu li.icon-box {
    width: 50px;
    height: 50px;
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
    transition: .3s;
    margin: 20px 0;
    border-radius: 50%;
    background: #2b2a2a;
	cursor: pointer;
  }

  .header ul.icon-menu li.icon-box i {
    color: #ddd;
    font-size: 19px;
    transition: .3s;
  }

  .header ul.icon-menu li.icon-box.active,
  .header ul.icon-menu li.icon-box:hover,
  .header ul.icon-menu li.icon-box.active i,
  .header ul.icon-menu li.icon-box:hover i {
    color: #fff;
  }

  .header .icon-box h2,
  .header .icon-box span {
    font-size: 15px;
    font-weight: 500;
  }

  .header .icon-box div {
    display: block;
    padding: 0;
    width: 50px;
    height: 50px;
  }

  .header .icon-box i.fa {
    position: absolute;
    pointer-events: none;
  }

  .header .icon-menu i {
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    text-align: center;
    font-size: 35px;
    top: 15px;
  }

  .header .icon-box h2,
  .header .icon-box span {
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    color: #fff;
    line-height: 50px;
    font-weight: 500;
    transition: all .3s;
    border-radius: 30px;
    text-transform: uppercase;
    padding: 0 25px 0 30px;
    height: 50px;
    white-space: nowrap;
    pointer-events: none;
  }

  .header .icon-box:hover h2,
  .header .icon-box:hover span,
  .header .icon-box div:hover h2,
  .header .icon-box div:hover span {
    opacity: 1;
    right: 27px;
    margin: 0;
    text-align: center;
    border-radius: 30px 0 0 30px;
  }
}

/* [ Pages ] */
/*================================================== */

/*** Homepage ***/

.home {
	height: 100vh;
}

.home .color-block {
  position: fixed;
  height: 200%;
  width: 100%;
  transform: rotate(-15deg);
  left: -83%;
  top: -50%;
}

.home-details-container > img {
  height: calc(100vh - 80px);
  z-index: 111;
  border-radius: 30px;
  left: 40px;
  top: 40px;
  box-shadow: 0 0 7px rgba(0,0,0,.9);
  object-fit: cover;
  padding: 0;
}

.home .container-home {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.home .home-details > div {
  max-width: 550px;
  margin: 0 auto;
}

.home .home-details h1 {
  font-size: 51px;
  line-height: 62px;
  font-weight: 700;
  margin: 18px 0 10px;
  position: relative;
  padding-left: 70px;
}

.home .home-details h1:before {
  content: '';
  position: absolute;
  left: 0;
  top: 29px;
  height: 4px;
  width: 40px;
  border-radius: 10px;
}

.home .home-details h1 span {
  color: #fff;
  display: block;
}

.home .home-details h6 {
  color: #eee;
  font-size: 22px;
  font-weight: 400;
  display: block;
}

.home .home-details p {
  margin: 15px 0 28px;
  font-size: 16px;
  line-height: 35px;
}

/*** About ***/

.about .main-content {
  padding-bottom: 20px;
}

/* Personal Info List */

.about .about-list li:not(:last-child) {
  padding-bottom: 20px;
}

.about .about-list .title {
  opacity: .8;
  text-transform: capitalize;
}

.about .about-list .value {
  font-weight: 600;
}

/* Box Stats */

.about .box-stats {
  padding: 20px 30px 25px 40px;
  border-radius: 5px;
  border: 1px solid #252525;
}

.about .box-stats.with-margin {
  margin-bottom: 30px;
}

.about .box-stats h3 {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: 50px;
  font-weight: 700;
}

.about .box-stats h3:after {
  content: '+';
  position: absolute;
  right: -24px;
  font-size: 33px;
  font-weight: 300;
  top: 2px;
}

.about .box-stats p {
  padding-left: 45px;
}

.about .box-stats p:before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 30px;
  height: 1px;
  background: #777;
}

/* Resume */

.about .resume-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about .resume-box li {
  position: relative;
  padding: 0 20px 0 60px;
  margin: 0 0 50px;
}

.about .resume-box li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  bottom: 0;
  border-left: 1px solid #333;
}

.about .resume-box .icon {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  line-height: 40px;
  text-align: center;
  z-index: 1;
  border-radius: 50%;
  color: #fff;
  background-color: #252525;
}

.about .resume-box .time {
  color: #fff;
  font-size: 12px;
  padding: 1px 10px;
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 20px;
  font-weight: 600;
  background-color: #252525;
  opacity: .8;
}

.about .resume-box h5 {
  font-size: 18px;
  margin: 7px 0 10px;
}

.about .resume-box p {
  margin: 0;
  color: #eee;
  font-size: 14px;
}

.about .resume-box .place {
  opacity: .8;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  padding-left: 26px;
}

.about .resume-box .place:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 2px;
  background-color: #fff;
  left: 7px;
  top: 9px;
  opacity: .8;
}

/* Skills */

.about .c100 {
  float: none !important;
  margin: 0 auto;
  background-color: #252525;
}

.about .c100 > span {
  color: #fff;
}

.about .c100:after {
  background-color: #111;
}

/*** Portfolio ***/
.portfolio .main-content {
  padding-bottom: 60px;
  margin-top: -15px;
}

/* Grid */

.portfolio .grid-gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portfolio .grid-gallery figure {
  margin: 0;
}

.portfolio .grid-gallery figure img {
  display: block;
  width: 100%;
  border-radius: 5px;
  transition: .3s;
}

.portfolio .grid-wrap {
  margin: 0 auto;
}

.portfolio .grid {
  margin: 0 auto;
}

.portfolio .grid li {
  width: 33.333333%;
  float: left;
  cursor: pointer;
  padding: 15px;
}

.portfolio .grid figure {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 5px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.portfolio .grid figure img {
  display: block;
  position: relative;
}

.portfolio .grid li a {
  overflow: hidden;
}

.portfolio .grid li figure div {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.portfolio .grid li figure div span {
  margin: 0;
  text-transform: uppercase;
  color: #fff;
  font-size: 18px;
}

/* Slideshow */

.portfolio .slideshow {
  position: fixed;
  background: rgba(0,0,0,0.85);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1111;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
  text-align: left;
}

.portfolio .slideshow-open .slideshow {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.portfolio .slideshow ul {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0,0,150px);
  transform: translate3d(0,0,150px);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.portfolio .slideshow ul.animatable > li {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.portfolio .slideshow-open .slideshow ul {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.portfolio .slideshow ul > li {
  width: 660px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -280px 0 0 -330px;
  visibility: hidden;
}

.portfolio .slideshow ul > li.show {
  visibility: visible;
}

.portfolio .slideshow ul > li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 111;
  border-radius: 10px;
}

.portfolio .slideshow ul > li.current:after {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

.portfolio .slideshow figure {
  width: 100%;
  height: 100%;
  background: #252525;
  padding: 30px;
  overflow: auto;
  border-radius: 10px;
}

.portfolio .slideshow a {
  text-decoration: underline;
}

.portfolio .slideshow figcaption {
  margin-bottom: 15px;
}

.portfolio .slideshow figcaption h3 {
  text-transform: uppercase;
  padding: 10px 0 20px;
  font-weight: 700;
  text-align: center;
  font-size: 33px;
}

/* Embedded Videos */

.portfolio .slideshow .videocontainer,
.portfolio .slideshow .responsive-video {
  max-width: 100%;
  border-radius: 4px;
  display: block;
  object-fit: cover;
}

.portfolio .slideshow .videocontainer {
  position: relative;
  padding-bottom: 56.20%;
  padding-top: 0;
  height: 0;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
  display: block;
  margin: 0;
  border-radius: 4px;
}

.portfolio .slideshow .videocontainer iframe,
.portfolio .slideshow .videocontainer object,
.portfolio .slideshow .videocontainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Carousel */

.portfolio .slideshow .carousel-indicators {
  bottom: 0;
  background: rgba(0,0,0,.4);
  padding: 10px 0;
  margin: 0;
}

.portfolio .slideshow .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 7px;
  background-color: #fff;
  opacity: 1;
}

/* Navigation */

.portfolio .slideshow nav span {
  position: fixed;
  z-index: 1000;
  text-align: center;
  cursor: pointer;
  padding: 200px 30px;
  color: #fff;
}

.portfolio .slideshow nav span.nav-prev,
.portfolio .slideshow nav span.nav-next {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 41px;
  line-height: 58px;
}

.portfolio .slideshow nav span.nav-prev {
  left: 0;
}

.portfolio .slideshow nav span.nav-next {
  right: 0;
}

.portfolio .slideshow nav span.nav-close {
  top: 30px;
  right: 30px;
  padding: 0;
}

/*** Contact ***/
.contact .main-content {
  padding-bottom: 85px;
}
/* Left Side */

.contact .custom-span-contact {
  font-weight: 600;
  padding-left: 50px;
  line-height: 21px;
  padding-top: 5px;
}

.contact .custom-span-contact i {
  left: 0;
  top: 10px;
  font-size: 33px;
}

.contact .custom-span-contact i.fa-phone-square {
  font-size: 39px;
  top: 7px;
}

.contact .custom-span-contact span {
  text-transform: uppercase;
  opacity: .8;
  font-weight: 400;
}

.contact ul.social {
  margin-left: -5px;
}

.contact ul.social li {
  display: inline-block;
}

.contact ul.social li a {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 42px;
  text-align: center;
  color: #fff;
  transition: .3s;
  font-size: 17px;
  margin: 0 6px;
  background: #2b2a2a;
  border-radius: 50%;
}
/* Form */
.contact .contactform input[type=text],
.contact .contactform input[type=email] {
  border: 1px solid #111;
  width: 100%;
  background: #252525;
  color: #fff;
  padding: 11px 26px;
  margin-bottom: 30px;
  border-radius: 30px;
  outline: none !important;
  transition: .3s;
}

.contact .contactform textarea {
  border: 1px solid #111;
  background: #252525;
  color: #fff;
  width: 100%;
  padding: 12px 26px;
  margin-bottom: 20px;
  height: 160px;
  overflow: hidden;
  border-radius: 30px;
  outline: none !important;
  transition: .3s;
}

.contact .contactform .form-message {
  margin: 24px 0;
}

.contact .contactform .output_message {
  display: block;
  color: #fff;
  height: 46px;
  line-height: 46px;
  border-radius: 30px;
}

.contact .contactform .output_message.success {
  background: #28a745;
}

.contact .contactform .output_message.success:before {
  font-family: FontAwesome;
  content: "\f14a";
  padding-right: 10px;
}

.contact .contactform .output_message.error {
  background: #dc3545;
}

.contact .contactform .output_message.error:before {
  font-family: FontAwesome;
  content: "\f071";
  padding-right: 10px;
}

/*** Blog ***/

.blog .main-content {
  padding-bottom: 85px;
}

/* Latest Posts */

.blog .post-container {
  display: block;
}

.blog .post-content {
  background-color: #252525;
  padding: 20px 25px 25px 25px;
  border-radius: 0 0 5px 5px;
}

.blog .post-content .entry-header h3 {
  line-height: 26px;
  cursor: pointer;
}

.blog .post-content .entry-header h3 a {
  text-decoration: none;
  transition: .5s;
}

.blog .post-thumb {
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}

.blog .post-thumb a {
  border-radius: 5px 5px 0 0;
}

.blog .post-container:hover img {
  transform: scale(1.2);
}

.blog .post-thumb a img {
  border-radius: 5px 5px 0 0;
  transition: .3s;
}

.blog .post-content .entry-content p {
  margin: 15px 0 5px;
}

.blog .post-content .entry-header h3 a {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

/* pagination */

.blog .pagination {
  margin-bottom: 30px;
}

.blog .page-link {
  color: #fff;
  background-color: #252525;
  border: 1px solid #252525;
  padding: 0;
  margin: 0 10px;
  border-radius: 50% !important;
  width: 43px;
  height: 43px;
  line-height: 43px;
  text-align: center;
  transition: .3s;

}

.blog .page-link:focus,
.blog .page-link:active{
  box-shadow: none !important;
}

.blog .page-link:hover {
  color: #fff !important;
}

/* Blog Post */

.blog-post article {
  max-width: 700px;
  margin: 0 auto;
}

.blog-post article h1 {
  font-weight: 600;
  margin: 13px 0 20px;
}

body.blog-post article img {
  border-radius: 5px;
  margin-bottom: 20px;
}

.blog-post .meta {
  color: #eee;
  font-size: 13px;
}

.blog-post .meta span {
  padding-right: 15px;
}

.blog-post .meta i {
  padding-right: 3px;
}

/* [ RESPONSIVE DESIGN STYLES ] */

@media (min-width: 1351px) {
  .portfolio .container-portfolio .grid {
    text-align: left;
  }
}

@media (max-width: 1350px) and (min-width: 992px) {
  .container {
    max-width: calc(100% - 195px);
  }

  .portfolio .container-portfolio {
    max-width: calc(100% - 195px);
  }
}

@media (max-width: 1200px) {
  .home .home-details h1 {
    padding-left: 0;
  }
  .home .home-details h1:before {
    display: none;
  }
}

@media (max-width: 1200px) and (min-width: 992px) {
  .home .home-details h1 {
    font-size: 42px;
    line-height: 52px;
  }
}

@media (max-width: 1100px) and (min-width: 992px) {
  .home .home-details > div {
    max-width: 450px;
  }
}

@media (min-width: 1600px) {
  .home .home-details > div {
    max-width: 600px;
  }
}

@media (min-width: 992px) {
  .home .home-details-container {
    width: 100%;
    height: 100vh;
  }

  body.home-page {
    overflow: hidden;
  }
}

/* Mobile  Navigation */

@media (max-width: 991px) {

  .home .home-details-container {
    margin: 0 auto;
  }

  .home .home-details {
    padding: 0;
  }

  .main-img-mobile {
    border-radius: 50%;
    width: 270px;
    height: 270px;
    border: 4px solid #252525;
    margin: 0 auto 25px;
    display: block;
  }

  .home .home-details h1 {
    font-size: 38px;
    line-height: 48px;
    margin: 29px 0 13px;
  }

  .home .home-details p {
    margin: 10px 0 23px;
    font-size: 15px;
    line-height: 30px;
  }

  #inputmobile .trigger-mobile {
    display: inline-block;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 11;
    user-select: none;
    padding: 19px 0 0 16px;
    width: 54px;
    height: 54px;
    border-radius: 5px;
    background: #252525;
  }
  
  #inputmobile .trigger-mobile.hide-trigger {
	  z-index: -1;
  }

  #inputmobile .trigger-mobile  span {
    display: flex;
    width: 23px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    background: #ffffff;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 5px 0;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
  }

  #inputmobile .trigger-mobile  span:first-child {
    transform-origin: 0 0;
  }

  #inputmobile .trigger-mobile  span:nth-last-child(2) {
    transform-origin: 0 100%;
  }

  #inputmobile .trigger-mobile.show-menu span {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
    background: #fff;
  }

  #inputmobile .trigger-mobile.show-menu  span:nth-last-child(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  #inputmobile .trigger-mobile.show-menu  span:nth-last-child(1) {
    transform: rotate(-45deg) translate(1px, -1px);
  }

  #mobile-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
	z-index: 1;
    padding-top: 60px;
    background-color: #252525;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0 0;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }

  #inputmobile ul.hide-list {
    transform: none;
  }

  #mobile-nav li {
    position: relative;
    padding-left: 30px;
  }

  #mobile-nav li:after {
    position: absolute;
    content: '';
    height: 1px;
    width: calc(100% - 60px);
    background: #333;
    left: 30px;
  }

  #mobile-nav li:last-child:after {
    display: none;
  }

  #mobile-nav li.active a span {
    font-weight: 600;
  }

  #mobile-nav li a {
    color: #fff;
    text-transform: uppercase;
    transition-delay: 2s;
    font-size: 26px;
    display: block;
    text-decoration: none;
    padding: 14px 0;
    position: relative;
  }

  #mobile-nav li a span {
    position: absolute;
    left: 50px;
    font-weight: 400;
  }
  
  .mobile-nav-element {
	  font-size: 26px;
	  text-transform:uppercase;
  }
  
  .mobile-nav-element > div {
	  padding: 14px 0;
	  position: relative;
  }
  
  .mobile-nav-element > div span {
	  position: absolute;
	  left: 50px;
	  font-weight: 400;
  }
  
  .mobile-nav-element.active > div span {
	  font-weight: 500;
  }

  .portfolio .grid li {
    width: 50%;
  }

  .portfolio .grid li figure div {
    display: none !important;
  }

  .portfolio .slideshow {
    background: #252525;
  }

  .portfolio .slideshow nav span {
    padding: 0;
  }

  .portfolio .slideshow ul > li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
  }

  .portfolio .slideshow ul > li:after {
    display: none;
  }

  .portfolio .slideshow figure {
    padding: 125px 30px 30px;
    border-radius: 0;
    max-width: 720px;
    margin: 0 auto;
  }

  .portfolio .slideshow nav span.nav-prev,
  .portfolio .slideshow nav span.nav-next {
    top: 35px;
    width: 32px;
    height: 32px;
  }

  .portfolio .slideshow nav span.nav-next {
    right: 30px;
  }

  .portfolio .slideshow nav span.nav-prev {
    left: 30px;
  }

  .portfolio .slideshow nav span.nav-prev img,
  .portfolio .slideshow nav span.nav-next img {
    width: 32px;
    height: 32px;
  }

  .portfolio .slideshow nav span:before {
    display: none;
  }

  .portfolio .slideshow nav span.nav-close {
    top: 35px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 32px;
    height: 32px;
    display: block;
    line-height: 0;
  }

  .portfolio .slideshow nav span.nav-close img {
    width: 32px;
    height: 32px;
  }

  .portfolio .slideshow nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 102px;
    background: #252525;
    z-index: 1;
    border-bottom: 1px solid #333;
  }

  .contact .main-content {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .home .home-details p {
    font-size: 14px;
    line-height: 28px;
  }
}

@media (max-width: 576px) {

  body {
    font-size: 14px;
  }
  
  .js .page#home {
		padding: 0 25px;
	}
	#inputmobile .trigger-mobile {
		width: 49px;
		height: 49px;
		    right: 10px;
			top: 4px;
			padding: 19px 0 0 13px;
	}
	.home-page #inputmobile .trigger-mobile {
		right: 25px;
		top: 25px;
		padding: 17px 0 0 13px;
	}

  #mobile-nav li {
    padding-left: 25px;
  }

  #mobile-nav li a {
    font-size: 18px;
  }

  #mobile-nav li:after {
    width: calc(100% - 50px);
    left: 25px;
  }

  #mobile-nav li a span {
    left: 35px;
  }
  .mobile-nav-element {
	  font-size: 18px;
  }
  
  .mobile-nav-element > div {
	  padding: 14px 0;
	  position: relative;
  }
  
  .mobile-nav-element > div span {
	  left: 35px;
  }

  .main-content {
    padding-top: 85px;
  }

  .main-content > .container {
    padding: 0 25px;
  }

  .main-img-mobile {
    width: 230px;
    height: 230px;
  }

  .home .home-details h1 {
    font-size: 29px;
    line-height: 39px;
    margin: 18px 0 13px;
  }

  .home .home-details h6 {
    font-size: 19px;
  }

  .title-section {
    padding: 16px 25px 14px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 25px;
    position: relative;
    right: auto;
    left: auto;
    z-index: 1;
    top: auto;
  }

  .title-section h2 {
    font-size: 26px;
  }

  .title-bg {
    display: none;
  }

  .custom-title {
    font-size: 21px;
  }

  .about .main-content {
    padding-bottom: 0;
  }

  .about .resume-box h5 {
    font-size: 17px;
  }

  .about .box-stats {
    padding: 15px 20px 20px 25px;
  }

  .about .c100 {
    transform: scale(.8);
  }

  .about .box-stats.with-margin {
    margin-bottom: 25px;
  }

  .about .box-stats h3 {
    font-size: 40px;
  }

  .about .box-stats p {
    padding-left: 0;
  }

  .about .box-stats p:before {
    display: none;
  }

  .portfolio .main-content {
    padding-bottom: 10px;
    margin-top: -12px;
  }

  .portfolio .grid li {
    width: 100%;
  }

  .portfolio .main-content > .container {
    padding: 0 10px;
  }

  .portfolio .slideshow figure {
    padding: 85px 25px 25px;
  }

  .portfolio .slideshow figcaption h3 {
    font-size: 25px;
  }

  .portfolio .slideshow nav span.nav-prev,
  .portfolio .slideshow nav span.nav-next {
    top: 9px;
    width: 20px;
    height: 20px;
  }

  .portfolio .slideshow nav span.nav-next {
    right: 20px;
  }

  .portfolio .slideshow nav span.nav-prev {
    left: 20px;
  }

  .portfolio .slideshow nav span.nav-prev img,
  .portfolio .slideshow nav span.nav-next img {
    width: 20px;
    height: 20px;
  }

  .portfolio .slideshow nav span.nav-close {
    top: 21px;
    width: 20px;
    height: 20px;
  }

  .portfolio .slideshow nav span.nav-close img {
    width: 20px;
    height: 20px;
  }

  .portfolio .slideshow nav {
    height: 62px;
  }

  .blog .main-content {
    padding-bottom: 55px;
  }

  .blog-post article h1 {
    font-size: 25px;
  }

  .separator.mt-1 {
    margin-top: 35px !important;
  }
}

/* =================================================================== */
/* YELLOW #ffb400
====================================================================== */

.home h1,
.about .box-stats h3,
.title-section h2 span,
.mobile-nav-element.active,
body.light #menu li.active a,
.blog .post-container:hover .post-content .entry-header h3 a,
.blog .post-content .entry-header h3 a:hover,
.contact .custom-span-contact i,
.portfolio .slideshow figcaption h3,
.portfolio .slideshow a,
.portfolio .grid figure:hover figcaption,
.blog-post .meta i{
	color: #ffb400;
}
.home .home-details h1:before,
.about .resume-box .icon,
.contact ul.social li a:hover,
body.light .contact ul.social li a:hover,
.preloader .loader,
.blog .page-link:hover,
.blog .page-item.active .page-link,
body.light .blog .page-link:hover,
body.light .blog .page-item.active .page-link,
.portfolio .grid li figure div,
.header ul.icon-menu li.icon-box.active, .header ul.icon-menu li.icon-box:hover,
body.light .header ul.icon-menu li.icon-box.active, body.light  .header ul.icon-menu li.icon-box:hover,
.btn,
.header .icon-box h2, .header .icon-box span,
.home .color-block,
.title-section hr,
.portfolio .slideshow .carousel-indicators li.active,
.line:before,
.button:before,
.button-icon{
	background-color: #ffb400;
}
.revealer > div:nth-child(2) {
	background-color: #ffb400 !important;
}
.contact .contactform input[type=text]:focus,
.contact .contactform input[type=email]:focus,
.contact .contactform textarea:focus,
body.light .contact .contactform input[type=text]:focus,
body.light .contact .contactform input[type=email]:focus,
body.light .contact .contactform textarea:focus,
.blog .page-item.active .page-link,
.blog .page-link:hover,
body.light .blog .page-item.active .page-link,
body.light .blog .page-link:hover,
.button{
	border: 1px solid #ffb400;
}
.blog .post-thumb {
	border-bottom: 5px solid #ffb400;
}
.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
	border: 0.08em solid #ffb400;
}/* ============================================
   Academic Custom Styles - nurdyansa.com
   Extracted from inline <style> for caching
   ============================================ */

.badge-academic {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 180, 0, 0.15);
  color: #ffb400;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* Publication Cards */
.pub-card {
  background: #252525;
  border-left: 3px solid #ffb400;
  padding: 18px 22px;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.pub-card:hover {
  transform: translateX(6px);
  background: #2b2b2b;
}
.pub-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
}
.pub-meta {
  color: #aaa;
  font-size: 0.85rem;
}
.pub-year {
  color: #ffb400;
  font-weight: bold;
}

/* Skill Pills */
.skill-pill {
  display: inline-block;
  padding: 8px 16px;
  background: #252525;
  border: 1px solid #333;
  border-radius: 30px;
  color: #ddd;
  font-size: 0.85rem;
  margin: 4px;
  transition: all 0.3s;
}
.skill-pill:hover {
  border-color: #ffb400;
  color: #ffb400;
  background: #1e1e1e;
}

/* Hero Image Box */
.hero-img-box {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.hero-img-box img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.hero-img-box:hover img {
  transform: scale(1.03);
}

/* Modern Academic Mobile Photo Cards (Borderless & Balanced) */
.hero-mobile-photo-wrapper {
  max-width: 240px;
  margin: 42px auto 24px;
}
.hero-mobile-photo-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #181818;
  border: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-mobile-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.85);
}
.hero-mobile-photo-card img {
  width: 100%;
  height: 295px;
  object-fit: cover;
  object-position: center 0%;
  padding-top: 14px;
  box-sizing: border-box;
  display: block;
}
.hero-mobile-photo-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(12, 12, 12, 0.95), rgba(12, 12, 12, 0.5) 75%, transparent);
  color: #ffb400;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 24px 10px 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}

/* About Photo Card */
.about-photo-card {
  max-width: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: #181818;
  border: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
  transition: transform 0.3s ease;
}
.about-photo-card:hover {
  transform: translateY(-3px);
}
.about-photo-card img {
  width: 100%;
  height: 265px;
  object-fit: cover;
  object-position: center 0%;
  padding-top: 10px;
  box-sizing: border-box;
  display: block;
}
.about-photo-caption {
  background: #151515;
  border-top: none;
  padding: 9px 12px 11px;
  text-align: center;
}
.about-photo-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  line-height: 1.3;
}
.about-photo-sub {
  display: block;
  font-size: 0.73rem;
  font-weight: 600;
  color: #ffb400;
  letter-spacing: 0.4px;
  margin-top: 3px;
  font-family: 'Open Sans', sans-serif;
}

/* Mobile responsive adjustments */
@media (max-width: 420px) {
  .hero-mobile-photo-wrapper { max-width: 215px; margin: 34px auto 20px; }
  .hero-mobile-photo-card img { height: 265px; padding-top: 10px; }
  .about-photo-card { max-width: 200px; }
  .about-photo-card img { height: 245px; padding-top: 8px; }
}

/* Blog Section Modern Styling */
.blog-card {
  background: #222222;
  border: 1px solid #333333;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.5);
  border-color: rgba(255, 180, 0, 0.45);
}
.blog-thumb-box {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #151515;
}
.blog-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blog-card:hover .blog-thumb-box img {
  transform: scale(1.08);
}
.blog-category-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(18, 18, 18, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 180, 0, 0.45);
  color: #ffb400;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  z-index: 2;
}
.blog-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-meta-info {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.82rem;
  color: #8e8e8e;
  margin-bottom: 12px;
}
.blog-meta-info i {
  color: #ffb400;
  margin-right: 4px;
}
.blog-post-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 12px;
  min-height: 3.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-post-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.25s ease;
}
.blog-post-title a:hover {
  color: #ffb400;
}
.blog-post-desc {
  color: #a0a0a0;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}
.blog-read-btn {
  margin-top: auto;
  color: #ffb400;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: gap 0.25s ease, color 0.25s ease;
}
.blog-read-btn:hover {
  color: #ffffff;
  gap: 12px;
  text-decoration: none;
}

/* ============================================
   Desktop Navigation Pill Styles
   Fix for navigation labels & hover animations
   ============================================ */
@media (min-width: 992px) {
  .header .icon-box h2,
  .header .icon-box span,
  .header .icon-box .nav-text {
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    color: #fff;
    line-height: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 30px;
    text-transform: uppercase;
    padding: 0 25px 0 30px;
    height: 50px;
    display: block;
    background-color: #ffb400;
    pointer-events: none;
    white-space: nowrap;
    margin: 0;
    font-size: 15px;
  }

  .header .icon-box:hover h2,
  .header .icon-box:hover span,
  .header .icon-box:hover .nav-text,
  .header .icon-box div:hover h2,
  .header .icon-box div:hover span,
  .header .icon-box div:hover .nav-text {
    opacity: 1 !important;
    right: 27px !important;
    margin: 0 !important;
    text-align: center;
    border-radius: 30px 0 0 30px !important;
  }
}

/* ============================================
   Continuous Smooth Scroll Architecture
   One-page continuous layout with scrollspy
   ============================================ */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh;
}

.js .pages,
.pages {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.js .page,
.page {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
  display: block !important;
  overflow: visible !important;
}

/* Disable full-screen overlay curtain */
.revealer {
  display: none !important;
}

/* Desktop Fixed Header Positioning */
@media (min-width: 992px) {
  .header {
    position: fixed !important;
    right: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    height: auto !important;
    z-index: 999 !important;
  }
  .header ul.icon-menu {
    margin: 0 !important;
  }
  .header ul.icon-menu li.icon-box {
    margin: 16px 0 !important;
  }
}

/* Home Section Continuous Layout */
#home {
  min-height: 100vh;
  position: relative;
  overflow: hidden !important;
  display: flex;
  align-items: center;
}

.home {
  height: auto !important;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden !important;
}

.home .color-block {
  position: absolute !important;
  height: 200%;
  width: 100%;
  transform: rotate(-15deg);
  left: -83%;
  top: -50%;
  z-index: 0;
  pointer-events: none;
}

.home .container-home {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-desktop-wrapper {
  padding: 40px 20px 40px 50px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-desktop-wrapper .hero-img-box {
  height: calc(100vh - 80px);
  max-height: 720px;
  width: 100%;
  max-width: 420px;
  border-radius: 30px;
  overflow: hidden;
  border: 4px solid #222;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

@media (min-width: 992px) {
  .home .home-details > div {
    max-width: 620px;
    margin-left: 20px;
  }
}

/* Section Spacing & Continuous Scroll Margins */
#about,
#portfolio,
#contact,
#blog {
  position: relative;
  padding: 70px 0 100px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  scroll-margin-top: 70px;
}
#home {
  scroll-margin-top: 70px;
}

/* Title Section Clean Reset across all viewports */
.title-section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
  padding: 25px 0 35px !important;
  margin-bottom: 25px !important;
  background: transparent !important;
}

.title-section h2 {
  font-size: 52px;
}

.title-bg {
  font-size: 96px;
}

@media (max-width: 768px) {
  #about,
  #portfolio,
  #contact,
  #blog {
    padding: 40px 0 60px;
    scroll-margin-top: 65px;
  }
  .title-section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
    padding: 15px 15px 20px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    border-bottom: none !important;
    text-align: center !important;
  }
  .title-section h2 {
    font-size: 32px !important;
    line-height: 1.25 !important;
  }
  .title-bg {
    font-size: 50px !important;
  }
}

@media (max-width: 480px) {
  .title-section h2 {
    font-size: 26px !important;
  }
  .title-bg {
    font-size: 38px !important;
  }
}

/* ============================================
   Mobile Top Bar & Navigation (Glassmorphic)
   ============================================ */
@media (max-width: 991px) {
  .mobile-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(17, 17, 17, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

  .mobile-brand {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #ffffff !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 2px;
    transition: opacity 0.25s;
  }
  .mobile-brand:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.9;
  }
  .mobile-brand span {
    color: #ffb400;
  }

  #inputmobile {
    display: flex;
    align-items: center;
  }

  #inputmobile .trigger-mobile {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 42px !important;
    height: 42px !important;
    padding: 13px 0 0 10px !important;
    border-radius: 8px !important;
    background: #222222 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 1002 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin: 0 !important;
  }

  #mobile-nav {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    padding-top: 80px !important;
    background: rgba(18, 18, 18, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 1000 !important;
  }

  /* Padding offset and natural flow for mobile Hero */
  #home {
    padding-top: 65px !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
  }
  .home {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    padding-bottom: 20px !important;
  }
  .hero-mobile-photo-wrapper {
    margin: 20px auto 20px !important;
  }
}

/* ============================================
   Academic Info Card & Grid Styling
   ============================================ */
.academic-info-card {
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  margin-top: 10px;
}

.academic-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.academic-info-item {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background 0.25s ease;
}

.academic-info-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.academic-info-item:nth-child(2n) {
  border-right: none;
}

.academic-info-item.academic-info-full {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
  background: rgba(255, 180, 0, 0.03);
}

.academic-info-item .info-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.academic-info-item .info-label i {
  color: #ffb400;
  font-size: 0.85rem;
}

.academic-info-item .info-val {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.4;
  word-break: break-word;
}

.academic-info-item .info-val a {
  color: #ffb400;
  text-decoration: none;
  transition: color 0.2s ease;
}

.academic-info-item .info-val a:hover {
  color: #ffd066;
  text-decoration: underline;
}

/* Status Active Pulsing Badge */
.status-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  display: inline-block;
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@media (max-width: 576px) {
  .academic-info-grid {
    grid-template-columns: 1fr;
  }
  .academic-info-item {
    border-right: none !important;
    padding: 12px 15px;
  }
  .academic-info-item .info-val {
    font-size: 0.88rem;
  }
}

/* Footer Styling */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #0d0d0d;
  padding: 35px 20px;
  color: #777;
  font-size: 0.88rem;
}

/* ========================================================== */
/* WIDE LAYOUT & MODERN CONTAINER SCALING (Responsive Desktop) */
/* ========================================================== */

@media (min-width: 1200px) {
  .container {
    max-width: 1320px !important;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1440px !important;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1560px !important;
  }
}

@media (min-width: 992px) {
  .container {
    padding-left: 24px;
    padding-right: 36px;
  }
}

/* ========================================================== */
/* PORTFOLIO & PRODUCT SHOWCASE (Wide, High-End Card Layout)  */
/* ========================================================== */

#portfolio .container.grid-gallery,
.portfolio .container,
.portfolio .grid-gallery {
  max-width: 1560px !important;
  width: 96% !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  padding-right: 25px !important;
}

.portfolio .grid-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.portfolio .grid {
  width: 100% !important;
  margin: 0 auto !important;
  list-style: none !important;
  padding: 0 !important;
}

.grid-sizer,
.portfolio .grid li {
  width: 33.333333% !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  float: left;
}

.portfolio .grid figure {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #161616 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
  height: 260px !important;
}

.portfolio .grid figure:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 180, 0, 0.55) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 180, 0, 0.2) !important;
}

.portfolio .grid-gallery figure img,
.portfolio .grid figure img {
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  max-height: 260px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Item 1 (ROGueX): Centered logo badge with dark gradient background */
.portfolio .grid li:first-child figure {
  background: radial-gradient(circle at center, #262626 0%, #111111 85%) !important;
}

.portfolio .grid li:first-child figure img {
  object-fit: contain !important;
  padding: 18px !important;
}

.portfolio .grid figure:hover img {
  transform: scale(1.05) !important;
}

/* Direction-aware hover overlay with refined typography */
.portfolio .grid li figure div {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100% !important;
  height: 100% !important;
  background: rgba(255, 180, 0, 0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  text-align: center !important;
  border-radius: 14px !important;
  z-index: 2;
}

@media (max-width: 991px) {
  .portfolio .grid li figure div {
    display: none !important;
  }
}

.portfolio .grid li figure div span {
  color: #111 !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* Modal Slideshow Improvements */
.portfolio .slideshow ul > li {
  width: 820px !important;
  max-width: 92vw !important;
  margin: -320px 0 0 -410px !important;
}

@media (max-width: 991px) {
  .portfolio .slideshow ul > li {
    width: 90% !important;
    left: 5% !important;
    margin: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

.portfolio .slideshow figure {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
  padding: 30px !important;
  border-radius: 16px !important;
}

.portfolio .slideshow figure img {
  width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  margin: 15px auto 0 !important;
}

/* Tablet & Mobile Breakpoints for Portfolio Grid */
@media (max-width: 991px) {
  .grid-sizer,
  .portfolio .grid li {
    width: 50% !important;
    padding: 12px !important;
  }
  .portfolio .grid figure,
  .portfolio .grid-gallery figure img,
  .portfolio .grid figure img {
    height: 220px !important;
    max-height: 220px !important;
  }
}

@media (max-width: 576px) {
  .grid-sizer,
  .portfolio .grid li {
    width: 100% !important;
    padding: 10px 0 !important;
  }
  .portfolio .grid figure,
  .portfolio .grid-gallery figure img,
  .portfolio .grid figure img {
    height: 210px !important;
    max-height: 210px !important;
  }
}
#preloader{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}