@import url("https://fonts.googleapis.com/css?family=Arvo:700|Open+Sans");

:root {
  --highlight-main: rgba(34, 209, 238, 0.3);
  --h5-shape: #3d5af1;
  --highlight-ava: #D6F3F8;
  --highlight-gm: #CAE4FF;
}

html {
  overflow-x: hidden;
}

body {
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  font-family: 'Nunito', sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  color: black;
  line-height: 25px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow-x: hidden;
}

h1 {
  font-size: 55px;
  color: #222222;
  font-weight: 500;
  font-family: 'Baloo Chettan 2', cursive;
}

h3 {
  font-family: 'Baloo Chettan 2', cursive;
  font-style: normal;
  font-weight: 500;
  font-size: 25px;
  line-height: 24px;
}

h4 {
  font-family: 'Baloo Chettan 2', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 24px;
  padding: 5px 0;
}

h2 {
  font-size: 40px;
  color: #222222;
  font-weight: 400;
  font-family: 'Baloo Chettan 2', cursive;
}

a {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

a:hover {
  text-decoration: none;
}

a a:focus {
  outline: none;
}

p {
  font-weight: 400;
  font-family: 'Nunito', sans-serif;
  margin-bottom: 1em;
  font-size: 16px;
}

small {
  font-size: 95%;
  font-weight: 300;
}

ul, ol {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

ul li, ol li {
  list-style: none;
}

a:not([href]):not([tabindex]) {
  color: #fff;
}

/*all others*/

/*siteheading*/
.site-heading {
  padding-top: 2em;
}

/*switch project title*/
.switch{
  font-size: 16px;
  padding: 10px 30px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color:#868686;
}

.switch:hover{
  color:black;
}

.switch_active{
  font-size: 16px;
  padding: 10px 30px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color:black;
}

.switch_footer{
  background-color: #F4F7F8;

}

/*video */
.video-features {
  width: 55%;
  border-radius: 16px;
  box-shadow: 2px 4px 24px rgba(0, 0, 0, 0.10);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#ava-features .video-features {
  width: 65%;
  border-radius: 36px;
}


.video-web {
  width: 85%;
  border-radius: 10px;
  box-shadow: 2px 4px 24px rgba(0, 0, 0, 0.10);
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
}

/*work page contents class*/
.demos {
  padding: 0 3em;
  margin-top: 4em;
}


.ava-demos {
  padding: 0 3em;
  margin-top: 0;
}

/*highlight*/

/*feature title*/
.feature_title {
  padding-top: 3em;
}

#cinetrip-features .feature_title {
  color: #3D38CB;
}

#ava-features .feature_title {
  color: #0051AF;
}

.caption {
  padding-top: 2em;
  font-weight: 300;
}

/* Highlight Text & Animation*/
.highlight {
  position: relative;
  background-origin: 0;
  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: background-position 0.8s ease-out;
  padding: 1px 0px;
}

.highlight.shown {
  position: relative;
  background-origin: 0;
  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: -100% 100%;
  transition: background-position 0.8s ease-out;
}


.highlight-cinetrip {
  background-image: linear-gradient(to right, transparent 50%, var(--highlight-main) 50%);
}



.highlight-ava {
  background-image: linear-gradient(to right, transparent 50%, var(--highlight-ava) 50%);
}

.highlight-gm {
  background-image: linear-gradient(to right, transparent 50%, var(--highlight-gm) 50%);
}

.highlight-main {
  background-image: linear-gradient(to right, transparent 50%, #E3E6FF 50%);
}

.highlight-levels {
  background-image: linear-gradient(to right, transparent 50%, #DBFBE3 50%);
}

.highlight-nv {
  background-image: linear-gradient(to right, transparent 50%, #E9D0D0 50%);
}



.section-nav {
  transition: opacity 0.3s ease-in-out;
}

.section-nav.hidden {
  opacity: 0;
  visibility: hidden;
}

/*work background img*/

.parallax_bg{
  min-height: 750px;  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.cinetrip-parallax {

  /* The image used */
  background-image: url("../img/cinetrip-img/cinetrip-large-cover.png");  /* Set a specific height */
}

.dtcpayOverview-parallax {
  /* The image used */
  background-image: url("../img/dtcpay-img/dtcpay_overview_landing.png");  /* Set a specific height */
}

.nvOverview-parallax {
  background-image: url("../img/nv-img/nv_overview_landing.png");
}


.dtcpay-case1-parallax{
  /* The image used */
  background-image: url("../img/dtcpay-img/dtcpay_case1_landing.png"); 
}

.nv-case1-parallax{
  /* The image used */
  background-image: url("../img/nv-img/nv_case1_landing.png"); 
}


.dtcpay-case2-parallax{
  background-image: url("../img/dtcpay-img/dtcpay_case2_landing.png"); 
}

.ava-parallax {

  /* The image used */
  background-image: url("../img/ava-img/ava-large-cover.png");  /* Set a specific height */
}

.gm-parallax {

  /* The image used */
  background-image: url("../img/gm-img/gm-large-cover.png");  /* Set a specific height */
}

.levels-parallax {

  /* The image used */
  background-image: url("../img/levels-img/levels-large-cover.png");  /* Set a specific height */
}

/*paragraoh space*/
.para_space {
  margin-top: 5px;
}

/*side nav*/

/*  Make nav sticky */
.section-nav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 80px;
  left: 15px;
  overflow-x: hidden;
  padding: 8px 0;
  font-size: 14px;
}

/* 3. ScrollSpy active styles (see JS tab for activation) */
.section-nav li.active > a {
  color: black;
  font-weight: 600;
  font-size: 15px;
}

/* Sidebar Navigation */
.section-nav {
  padding-left: 1px;
}

.section-nav a {
  text-decoration: none;
  display: block;
  padding: .125rem 0;
  font-weight: 300;
  color: #868686;
  transition: all 50ms ease-in-out; /* This small transition makes setting of the active state smooth */
}

.section-nav a:hover, .section-nav a:focus {
  color: #666;
}

/** Poor man's reset **/

/** {
  box-sizing: border-box;
}
*/

/*section padding. Larger space between section*/

/*section {
  padding-bottom: 5rem;
  }*/

  /*site-wide img*/
  .site-wide {
    width: 100%;
  }

  /*img padding*/
  .img-padding {
    padding: 2em 0 5em 0;
  }

  /*para-text-section*/
  .text-section {
    padding: 2em 0;
  }

/*
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 80px;
left: 10px;
overflow-x: hidden;
padding: 8px 0;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 14px;
color: #0e153a;
display: block;
}

.sidenav a:hover {

color:#3d5af1;
}*/

/*#sidenav .active {background:red;}*/

/*
.sidenav a.active{color:#3d5af1;}*/


.main {
  margin-left: 140px; /* Same width as the sidebar + left position in px */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

.section-header {
  margin-bottom: 30px;
}

.section-header p {
  text-align: center;
  font-weight: 400;
  line-height: 26px;
}

.section-title {
  font-size: 40px;
  color: #222222;
  display: inline-block;
  font-weight: 400;
  position: relative;
}

.shape {
  height: 3px;
  margin: 0 auto 30px;
  position: relative;
  width: 60px;
  background-color: #3d5af1;
}

.shape-nv {
  height: 3px;
  margin: 0 auto 30px;
  position: relative;
  width: 60px;
  background-color: #AB0808;
}

.shape-a {
  height: 3px;
  margin: 0 auto 30px;
  position: relative;
  width: 60px;
  background-color: #17C3EA;
}

.shape-g{
  height: 3px;
  margin: 0 auto 30px;
  position: relative;
  width: 60px;
  background-color: #29419E;
}

/*project tag*/
.project-tag{
  display: inline-block;
  font-size: 13px;
  color:#3d5af1;
  padding: 5px 10px;
  border-radius: 20px;
  background-color: #E7EAFF;
}

.project-tag2{
  display: inline-block;
  font-size: 13px;
  color:#3d5af1;
  padding: 5px 10px;
  border-radius: 20px;
  background-color: white;
}

.project_header{
  display: inline-block;
  margin-right: 1em;

}

.shape2 {
  border-left: 6px solid var(--h5-shape);
  padding-left: 28px;
}

.shape2-ava {
  border-left: 6px solid #17C3EA;
  padding-left: 28px;
}

.shape2-g {
  border-left: 6px solid #29419E;
  padding-left: 28px;
}
.shape2-nv {
  border-left: 6px solid #AB0808;
  padding-left: 28px;
}

.padding-none {
  padding: 0px;
}

.bg-gray {
  background: #f9f9f9;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(61, 96, 244, 0.3);
}

.main-button {
  transition: all 0.2s ease-out;
  font-size: 14px;
  padding: 10px 30px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  border-radius: 30px;
  color: #3d5af1;
  border: 2px solid #3d5af1;
  text-transform: uppercase;
  background: linear-gradient(to right, #3d5af1 50%, white 50%);
  background-size: 250% 100%;
  background-position: right bottom;
  margin: 40px 0 0 0 !important;
  display: block;
}



.main-button:hover, .main-button:focus{
  transition: all 0.2s ease-out;
  cursor: pointer;
  color: white;
  background-color: #3d5af1;
  transform: translateX(3px);
  border-radius: 30px;
  background-position: left bottom;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 10px 30px rgba(61, 56, 203, 0.5);
}
.main-button:active {
  box-shadow: none;
  transform: translateY(1px);
}


.btn {
  font-size: 14px;
  padding: 8px 80px;
  cursor: pointer;
  font-weight: 400;
  color: black;
  border-radius: 30px;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
  display: inline-block;
  background: #FFFFFF;
  box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.2), 0px 11px 15px rgba(0, 0, 0, 0.14), 0px 4px 20px rgba(0, 0, 0, 0.12);
}

.btn-sm {
  height: 40px;
  padding: 8px 20px;
}

.btn:hover, .btn:focus, .btn:active {
  transform: translateY(-8px);
  box-shadow: 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12);
}

.btn-common {
  background-color: #3d5af1;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 10px 30px rgba(61, 56, 203, 0.5);
  border-radius: 34px;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}

.btn-common:hover {
  transform: scale(1.06);
}

.btn-border {
  color: #3d5af1;
  background-color: transparent;
  border-radius: 4px;
  border: 2px solid #3d5af1;
  padding: 4px 12px;
  text-transform: uppercase;
}

.btn-border:hover {
  color: #fff;
  border-color: #3d5af1;
  background-color: #3d5af1;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 10px 30px rgba(61, 56, 203, 0.5);
}

.btn-border:focus {
  color: #fff;
  border-color: #3d5af1;
  background-color: #3d5af1;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 10px 30px rgba(61, 56, 203, 0.5);
}

.btn-lg {
  padding: 14px 33px;
  text-transform: uppercase;
  font-size: 16px;
}

.btn-rm {
  padding: 7px 0px;
  color: #3d5af1;
  text-transform: capitalize;
}

.btn-rm:hover {
  color: #3d5af1;
}



/* Make the button a flex container so icon + text align nicely */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;      /* space between icon and text */
  background: #03011C;
  color: #fff;
  margin-top: 2rem;
}

/* Size/tweak the icon */
.btn-with-icon .btn-icon {
  width: 1.2rem;    /* or whatever fits your design */
  height: 1.2rem;
  object-fit: contain;
}



button:focus {
  outline: none !important;
}

input{
  border-radius: 4px;
  border: 1px solid;
  padding: 4px 8px;

}
.icon-close, .icon-check {
  color: #3d5af1;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

/*close icon for pop up*/
.cd-popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}


.social-icon a {
  color: #666;
  background: #fff;
  width: 32px;
  height: 32px;
  line-height: 34px;
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  font-size: 20px;
  margin: 15px 6px 12px 4px;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.social-icon a:hover {
  color: #fff !important;
}


.social-icon .twitter:hover {
  background: #4A9CEC;
}

.social-icon .github:hover {
  background: #860AA5;
}


.social-icon .linkedin:hover {
  background: #1260A2;
}


/* ScrollToTop */
a.back-to-top {
  display: none;
  position: fixed;
  bottom: 18px;
  right: 15px;
  text-decoration: none;
}

a.back-to-top i {
  display: block;
  font-size: 22px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background: #3d5af1;
  border-radius: 30px;
  text-align: center;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

a.back-to-top:hover, a.back-to-top:focus {
  text-decoration: none;
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 9999999;
}

.loader {
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}

#loader-1:before, #loader-1:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 7px solid transparent;
  border-top-color: #3d5af1;
}

#loader-1:before {
  z-index: 100;
  animation: spin 1s infinite;
}

#loader-1:after {
  border: 7px solid #f2f2f2;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

.section-padding {
  padding: 60px 0;
}

hr {
  border-top: 1px dotted #ddd;
}


.row-padding {
  margin-bottom: 5em;
}

#features {
  background-color: white;
}

/*icons*/
#features .icon {
  display: inline-block;
  width: 30px;
  height: 38px;
  border-radius: 4px;
  text-align: center;
  position: relative;
  padding-bottom: 10px;
  z-index: 1;
  font-size: 30px
}

#features .content-left span {
  float: right;
}

#features .content-left .text {
  text-align: right;
}

#features .content-right span {
  float: left;
}

#features .box-item {
  box-shadow: 0 0 12px #F4F4F4;
  padding: 15px;
  line-height: 22px;
  margin-top: 30px;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: all .3s ease-in-out;
  -mox-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  position: relative;
  top: 0;
}

#features .box-item .icon {
  text-align: center;
  margin: 12px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#features .box-item .icon i {
  color: #3d5af1;
  font-size: 30px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#features .box-item .text h4 {
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#features .box-item .text p {
  font-size: 14px;
  line-height: 26px;
}

#features .text p {
  font-size: 14px;
  line-height: 26px;
  font-weight: 300;
}

#features .box-item:hover {
  box-shadow: 0 10px 22px 10px rgba(27, 38, 49, 0.1);
}

#features .box-item:hover h4 {
  color: #3d5af1;
}

#features .show-box {
  margin-top: 50px;
}

#features .show-box img {
  width: 100%;
}

/*work page style*/

.work-container {
  width: 100%;
  padding-right: 150px;
  padding-left: 150px;
  margin-right: auto;
  margin-left: auto;
}

/* Services Item */
.services-item {
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  margin: 15px 0;
  box-shadow: 0 0 12px #F4F4F4;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.services-item .icon {
  border: 1px solid #f1f1f1;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.services-item .icon i {
  font-size: 30px;
  color: #3d5af1;
  line-height: 70px;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.services-item .services-content h3 {
  margin-top: 10px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.services-item .services-content h3 a {
  font-size: 16px;
  color: #585b60;
}

.services-item .services-content h3 a:hover {
  color: #3d5af1;
}

.services-item:hover {
  box-shadow: 0 10px 22px 10px rgba(27, 38, 49, 0.1);
}

.services-item:hover .icon {
  background: #3d5af1;
}

.services-item:hover .icon i {
  color: #fff;
}

#service {
  position: relative;
}

.about-area .about-wrapper {
  height: 100%;
  width: 100%;
  display: table;
}

.about-area .about-wrapper > div {
  vertical-align: middle;
  display: table-cell;
  padding-bottom: 5em;
}

.about-area img {
  border-radius: 4px;
}

.about-area .content {
  margin-top: 15px;
}

#cta {
  padding: 30px 0;
}

.navbar-brand {
  position: relative;
  width: 7%;
}

.top-nav-collapse {
  background: #fff;
  z-index: 999999;  /*padding: 10px !important;*/
  top: 0px !important;
  box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
  background: #fff !important;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.top-nav-collapse .navbar-brand {
  top: 0px;
}

.top-nav-collapse .navbar-brand img {
  width: 60%;
}

.top-nav-collapse .navbar-nav .nav-link {
  color: #585b60 !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.top-nav-collapse .navbar-nav .nav-link:hover {
  cursor: pointer;
  color: #3d5af1 !important;
  border-color: #3d5af1 !important;
}

.top-nav-collapse .navbar-nav .nav-link:hover {
  color: #3d5af1 !important;
}

.navbar-expand-md .navbar-toggler {
  background: transparent;
  color: #3d5af1;
  border-radius: 4px;
  cursor: pointer;
}

.navbar-brand img {
  width: 60%;
}

.top-nav-collapse .navbar-nav li.active a.nav-link {
  color: #3d5af1 !important;
  border-color: #3d5af1;
}

.indigo {
  background: transparent;
}

.menu-bg {
  background: transparent;
}

.navbar-expand-md .navbar-nav .nav-link i {
  font-size: 14px;
  margin-left: 5px;
  vertical-align: middle;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar-expand-md .navbar-nav .nav-item {
  padding-left: 25px;
}

.navbar-expand-md .navbar-nav .nav-link {
  color: #333;
  font-weight: 400;
  padding: 7px 0;
  cursor: pointer;
  position: relative;
  background: transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar-expand-md .navbar-nav .nav-link:before {
  background-color: #3d5af1;
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  margin: 0 auto;
  width: 0;
  top: 35px;
  left: 0;
  right: 0;
  bottom: 0;
  transition: width 1s;
  -ms-transition: width 1s;
  -webkit-transition: width 1s;
}

.navbar-expand-md .navbar-nav li a:hover, .navbar-expand-md .navbar-nav li .active > a, .navbar-expand-md .navbar-nav li a:focus {
  color: #fff;
  outline: none;
}

.navbar-expand-md .navbar-nav .active > .nav-link, .navbar-expand-md .navbar-nav .nav-link.active, .navbar-expand-md .navbar-nav .nav-link.open, .navbar-expand-md .navbar-nav .open > .nav-link {
  color: #3d5af1 !important;
  width: 100%;
}

.navbar-expand-md .navbar-nav .nav-link:hover, .navbar-expand-md .navbar-nav .nav-link:hover::before, .navbar-expand-md .navbar-nav .nav-link:focus {
  color: #3d5af1;
  width: 100%;
  transition: width 0.2s;
  -webkit-transition: width 0.2s;
  -ms-transition: width 0.2s;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar li.active a.nav-link {
  color: #3d5af1;
}

.dropdown-toggle::after {
  display: none;
}

.dropdown-menu {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  z-index: 99;
  min-width: 210px;
  background-color: #fff;
  white-space: nowrap;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  animation: fadeIn 0.4s;
  -webkit-animation: fadeIn 0.4s;
  -moz-animation: fadeIn 0.4s;
  -o-animation: fadeIn 0.4s;
  -ms-animation: fadeIn 0.4s;
}

.dropdown-menu:before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 100%;
  left: 20%;
  margin-left: -5px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #fff;
}

.dropdown:hover .dropdown-menu {
  display: block;
  position: absolute;
  text-align: left;
  top: 100%;
  border: none;
  animation: fadeIn 0.4s;
  -webkit-animation: fadeIn 0.4s;
  -moz-animation: fadeIn 0.4s;
  -o-animation: fadeIn 0.4s;
  -ms-animation: fadeIn 0.4s;
}

.dropdown .dropdown-menu .dropdown-item {
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f1f1f1;
  text-decoration: none;
  display: inline-block;
  float: left;
  clear: both;
  position: relative;
  outline: 0;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

.dropdown .dropdown-menu .dropdown-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dropdown .dropdown-menu .dropdown-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.dropdown .dropdown-item:focus, .dropdown .dropdown-item:hover, .dropdown .dropdown-item.active {
  color: #3d5af1;
  background: #f7f7f7;
}

.dropdown-item.active, .dropdown-item:active {
  background: transparent;
}

.fadeInUpMenu {
  -webkit-animation-name: fadeInUpMenu;
  animation-name: fadeInUpMenu;
}

/* ==========================================================================
3. Hero Area
========================================================================== */
#hero-area {

  /*  background-image: url(../img/landing-bg.svg);*/
  background-color: #f9f9f9;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  position: relative;
  overflow: hidden;
  padding: 80px 0 0;
}

#hero-area .contents .head-title {
  font-family: 'Baloo Chettan 2', cursive;
  color: #222222;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  margin-bottom: 2rem;
}

.header-button {
  margin-top: 20px;
  color: #222222;/*    transition: all 0.3s ease-out;
  &:hover, &:focus, &:active {
    cursor: pointer;
    transform: translateX(6px);
    }*/
  }

  #hero-area .contents .header-button {
    margin-top: 20px;
    color: #222222;
  }

  #hero-area .contents .header-button .btn {
    margin-right: 10px;
  }

  .sloder-img {
    background: #34363a;
  }

  /* Team Item */
  .team-item:hover {
    box-shadow: 0 10px 22px 10px rgba(27, 38, 49, 0.1);
  }

  .team-item {
    margin: 15px 0;
    border-radius: 0px;
    box-shadow: 0px 2px 18px 0px rgba(198, 198, 198, 0.3);
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    background: #fff;
  }

  .team-item .team-img {
    float: left;
    width: 200px;
    margin-right: 30px;
  }

  .team-item .contetn {
    padding: 15px 50px;
    height: 200px;
  }

  .team-item .social-icons {
    padding-top: 11px;
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
  }

  .team-item .social-icons li {
    display: inline-block;
    margin-right: 10px;
  }

  .team-item .social-icons li a {
    letter-spacing: 0px;
    outline: 0 !important;
  }

  .team-item .social-icons li a i {
    font-size: 18px;
    display: block;
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
  }

  .team-item .social-icons li .lni-facebook-filled {
    color: #3b5998;
  }

  .team-item .social-icons li .lni-twitter-filled {
    color: #00aced;
  }

  .team-item .social-icons li .lni-instagram-filled {
    color: #fb3958;
  }

  .team-item .info-text {
    margin-bottom: 10px;
  }

  .team-item .info-text h3 {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 5px;
  }

  .team-item .info-text h3 a {
    color: #333;
  }

  .team-item .info-text h3 a:hover {
    color: #3d5af1;
  }

  .team-item .info-text p {
    margin: 0;
    color: #888;
  }

  .team-item:hover .team-overlay {
    opacity: 1;
  }

  .form-group {
    margin-top: 4rem;
  }

/* ==========================================================================
 Pricing Table Style
 ========================================================================== */
 #pricing {
  text-align: center;
}

#pricing .title {
  padding-top: 20px;
}

#pricing .title h3 {
  text-transform: uppercase;
  color: #333;
  font-size: 18px;
}

#pricing .title .month-plan {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

#pricing .table {
  margin-top: 15px;
  padding: 30px;
  border-radius: 4px;
  border: none !important;
  box-shadow: 0px 2px 18px 0px rgba(198, 198, 198, 0.3);
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

#pricing .table .icon-box {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background-color: #EBEDEF;
  margin-bottom: 20px;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

#pricing .table .icon-box i {
  color: #3d5af1;
  line-height: 80px;
  font-size: 30px;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

#pricing .table .pricing-header {
  position: relative;
  text-align: center;
}

#pricing .table .pricing-header .price-value {
  font-size: 24px;
  color: #3d5af1;
  position: relative;
  text-align: center;
  font-weight: 700;
}

#pricing .table .pricing-header .price-value sup {
  font-size: 16px;
  font-weight: 500;
  top: -18px;
}

#pricing .table .pricing-header .price-value span {
  font-size: 15px;
  color: #abacae;
  font-weight: 400;
}

#pricing .table .description {
  text-align: center;
  padding: 0px 50px;
  margin-bottom: 20px;
}

#pricing .table .description li {
  font-size: 14px;
  font-weight: 400;
  color: #abacae;
  padding: 4px 0;
}

#pricing .table .description li:last-child {
  border-bottom: none;
}

#pricing .table:hover {
  background: #ffffff;
  box-shadow: 0 10px 22px 10px rgba(27, 38, 49, 0.1);
}

#pricing .table:hover .icon-box {
  background: #3d5af1;
}

#pricing .table:hover .icon-box i {
  color: #fff;
}

#pricing #active-tb {
  background: #ffffff;
  box-shadow: 0 10px 22px 10px rgba(27, 38, 49, 0.1);
}

#pricing #active-tb .icon-box {
  background: #3d5af1;
}

#pricing #active-tb .icon-box i {
  color: #fff;
}

#pricing .active {
  z-index: 99999;
}

.testimonial {
  position: relative;
  background-color: #3d5af1;
}

.testimonial-item {
  background: #fff;
  border-radius: 4px;
  text-align: center;
  padding: 30px 20px;
}

.testimonial-item .img-thumb {
  position: relative;
  margin: 15px 15px 15px 0;
}

.testimonial-item .img-thumb img {
  border-radius: 50%;
  display: inline-block;
  width: inherit;
  padding: 7px;
}

.testimonial-item .content {
  overflow: hidden;
}

.testimonial-item .content .description {
  width: 100%;
  color: #333;
}

.testimonial-item .content .star-icon i {
  color: #3d5af1;
}

.testimonial-item .info h2 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 30px;
  margin: 0;
}

.testimonial-item .info h2 a {
  color: #333;
}

.testimonial-item .info h3 {
  margin: 0;
  clear: both;
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  margin-bottom: 10px;
}

.testimonial-item .info h3 a {
  color: #333;
}

.testimonial-item .info .indicator {
  font-size: 26px;
  font-weight: 700;
  color: #3d5af1;
}

.testimonial-item .icon-social {
  margin-top: 30px;
}

.testimonial-item .icon-social a {
  color: #666;
  background: #fff;
  width: 32px;
  height: 32px;
  line-height: 34px;
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  font-size: 15px;
  margin: 15px 6px 12px 4px;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.testimonial-item .icon-social a:hover {
  color: #fff;
}

.testimonial-item .icon-social .facebook:hover {
  background: #3b5999;
}

.testimonial-item .icon-social .twitter:hover {
  background: #4A9CEC;
}

.testimonial-item .icon-social .instagram:hover {
  background: #860AA5;
}

.testimonial-item .icon-social .linkedin:hover {
  background: #1260A2;
}

.testimonial-item .icon-social .google:hover {
  background: #CE332A;
}

.owl-pagination {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -40px;
}

.owl-carousel .owl-dots {
  text-align: center;
  margin-top: 20px;
}

.owl-carousel button.owl-dot {
  display: inline-block;
  zoom: 1;
  display: inline;
  text-align: center;
}

.owl-carousel button.owl-dot span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 2px 4px;
  filter: alpha(opacity=50);
  opacity: 1;
  border-radius: 30px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}

.owl-carousel button.owl-dot.active span, .owl-carousel button.owl-dot.clickable, .owl-carousel button.owl-dot:hover span {
  background: #3d5af1;
}

.slick-slider {
  padding: 80px 0;
}

.slider-center img {
  opacity: 0.7;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  padding: 63px 63px;
  position: relative;
  text-align: center;
}

.slider-center .slick-center img {
  -moz-transform: scale(1.9);
  -ms-transform: scale(1.9);
  -o-transform: scale(1.9);
  -webkit-transform: scale(1.9);
  opacity: 1;
  transform: scale(1.9);
}

.form-control {
  width: 100%;
  margin: 1em 0;
  font-size: 14px;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  padding: 10px;
  border: 1px solid #f1f1f1;
}

.form-control:focus {
  border-color: #3d5af1;
  box-shadow: none;
  outline: none;
}

textarea {
  border-radius: 4px !important;
}

.form-control:focus {
  box-shadow: none;
  outline: none;
}

.btn.disabled, .btn:disabled {
  opacity: 1;
}

#signup .header-button {
  padding-top: 20px;
}

.contact-form-area h2 {
  font-size: 18px;
  text-transform: uppercase;
}

.contact-right-area {
  margin-left: 50px;
}

.contact-right-area .contact-title {
  margin-bottom: 20px;
}

.contact-right-area .contact-title h1 {
  font-size: 22px;
}

.contact-right {
  padding: 4px;
}

.contact-right .single-contact {
  margin: 30px 0px;
  padding: 3px 55px;
  position: relative;
  color: #abacae;
}

.contact-right .single-contact p {
  margin-bottom: 0px;
}

.contact-right .single-contact p a {
  color: #abacae;
}

.contact-right .contact-icon {
  background: #3d5af1;
  color: #fff;
  border-radius: 4px;
  font-size: 20px;
  height: 40px;
  left: 0;
  padding-top: 8px;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 40px;
}

.h3 {
  float: right;
  font-size: 16px;
}

/*cta
*/
#cta {
  background: transparent;
}

/* Footer Area Start */
.footer-area {
  position: relative;
  padding: 0px;
  background: #fff;
}

/*footer social media*/
i.fas, i.fab {
  border: 1px solid red;
}

.fa-facebook {
  color: rgb(59, 91, 152);
}

.footer-area .footer-titel {
  font-size: 18px;
  color: #333333;
  font-weight: 500;
  padding-bottom: 20px;
  letter-spacing: 0.5px;
}

.footer-area .footer-titel span {
  color: #ccc;
  font-weight: 400;
}

.footer-area .textwidget p {
  color: #333;
}

.footer-area .footer-link li {
  margin-bottom: 10px;
}

.footer-area .footer-link li a {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}

.footer-area .footer-link li a:hover {
  color: #3d5af1;
}

.footer-area .address li {
  margin-bottom: 20px;
}

.footer-area .address li a {
  color: #666666;
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
}

.footer-area .address li a i {
  font-size: 22px;
  width: 32px;
  vertical-align: middle;
  height: 36px;
  text-align: center;
  display: inline-block;
  float: left;
  margin-right: 5px;
  line-height: 32px;
}

.footer-area #subscribe-form {
  margin-top: 10px;
}

.footer-area #subscribe-form .form-group {
  position: relative;
}

.footer-area #subscribe-form .form-group .btn-common {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 15px;
  height: 52px;
  border-radius: 0;
  background: transparent;
  color: #3d5af1;
}

#copyright .copyright-content {
  border-top: 1px solid #d5d4e9;
  padding: 15px 0;
}

#copyright p {
  line-height: 42px;
  color: #333;
  text-align: center;
  margin: 0;
}

#copyright p a {
  color: #3d5af1;
}

.social-icon a {
  color: #272727;
  background: #fff;
}

/* Burger explosion scroll animation */
#burger-explosion {
  background: url("../img/home/burger/kitchen_background.png") center center/cover no-repeat;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 4rem 0 4rem;
  margin-top: 0;
  box-sizing: border-box;
}

#burger-explosion .section-header {
  max-width: 760px;
  margin: 0 auto 2rem;
}

#burger-explosion .burger-caption {
  color: #666;
  font-size: 1rem;
  margin-top: 0.75rem;
}

#burger-explosion .burger-explosion-wrapper {
  display: flex;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
}

#burgerStack {
  width: 30vw;
  max-width: 320px;
  min-width: 180px;
  margin: 1rem auto;
}

.burger-layer {
  display: block;
  transition: margin 0.5s ease, transform 0.5s ease;
  position: relative;
}

.burger-layer[data-layer="1"] { z-index: 5; }
.burger-layer[data-layer="2"] { z-index: 4; }
.burger-layer[data-layer="3"] { z-index: 3; }
.burger-layer[data-layer="4"] { z-index: 2; }
.burger-layer[data-layer="5"] { z-index: 1; }

.burger-layer img {
  width: 100%;
  display: block;
}

.burger-layer:nth-child(1) {
  margin-bottom: var(--space-1-2);
}

.burger-layer:nth-child(2) {
  margin-bottom: var(--space-2-3);
}

.burger-layer:nth-child(3) {
  margin-bottom: var(--space-3-4);
}

.burger-layer:nth-child(4) {
  margin-bottom: var(--space-4-5);
}

.burger-layer:last-child {
  margin-bottom: 0;
}

.burger-label {
  --label-line-width: 50px;
  --label-line-gap: 0px;
  --label-circle-size: 0.3rem;
  --label-circle-offset: 5px;
  position: absolute;
  top: 50%;
  left: 90%;
  transform: translateY(-50%);
  justify-content: flex-start;
  display: flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  background: #fff;
  border: 0;
  font-family: 'Baloo Chettan 2', cursive;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  color: #000;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.burger-label::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + var(--label-line-gap));
  width: var(--label-line-width);
  height: 1px;
  background: #000;
  transform: translateY(-50%);
}

.burger-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + var(--label-line-gap) + var(--label-line-width) - var(--label-circle-offset));
  width: var(--label-circle-size);
  height: var(--label-circle-size);
  border-radius: 50%;
  background: #000;
  transform: translateY(-50%);
}

.burger-label-dot {
  display: none;
}

.burger-label.visible {
  opacity: 1;
}

#cheeseLabel {
  top: 35%;
}

@media screen and (max-width: 991px) {
  .burger-label {
    margin-left: 12px;
  }

  #burgerStack {
    padding: 0 20px;
    box-sizing: border-box;
  }
}
  line-height: 34px;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  font-size: 20px;
  margin: 15px 6px 12px 4px;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.social-icon a:hover {
  color: #fff !important;
}

.social-icon .facebook:hover {
  background: #3b5999;
}

.social-icon .twitter:hover {
  background: #4A9CEC;
}

.social-icon .instagram:hover {
  background: #860AA5;
}

.social-icon .airbnb:hover {
  background: #F45757;
}

.social-icon .linkedin:hover {
  background: #1260A2;
}

.social-icon .google:hover {
  background: #CE332A;
}

/*signup confirmation pop-up container*/

/* -------------------------------- 

xpopup 

-------------------------------- */
.cd-popup {
  position: fixed;
  z-index: 9999;        /* ensure the dark backdrop covers all */
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;


}

.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  position: relative;
  z-index: 10000;     /* ensure the white modal box sits above the backdrop */
  padding: 2em;
  width: 90%;
  max-width: 400px;
  margin: 4em auto;
  background: #FFF;
  border-radius: .25em .25em .4em .4em;
  text-align: center;

  box-shadow: 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12);

  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.cd-popup-container h4{
  padding-top: 1em;
}


.cd-popup-container p {
  padding: 1em 1em;
}


.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}


.clickable-image {
  cursor: pointer;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  transform-origin: center;
}

.clickable-image:hover {
  transform: scale(1.015);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.clickable-image:active {
  /* Optional: give a quick “pressed” feel on click */
  transform: scale(0.98);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}



#protected-content { opacity: 1; transition: opacity 0.2s; }


/* container for input+toggle + submit button */
.password-actions {
  display: flex;
  flex-wrap: wrap;       /* allow stacking on narrow viewports */
  align-items: center;  
  justify-content: center; /* vertically align if side-by-side */
  gap: 1rem;             /* 1rem (≈16px) space between items */
}

/* ensure the input grows to fill space, but button stays auto */
.password-actions .password-field {
  flex: 0 0 auto;   /* don’t grow or shrink beyond its contents */
  width: auto; /* ensure it only wraps its children */
}

/* submit button keeps its size */
.password-actions #password-submit {
  flex: 0 0 auto;
}


/*password view on& off*/
.password-field {
  position: relative;
  display: inline-block;

  
}

.password-field input {
  /* make room for the icon on the right */
  padding-right: 1.5rem;

}

.password-field input,
.password-field button {
  margin: 0;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.toggle-password img {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  filter: brightness(0) saturate(100%);
}

/*end - password view on& off*/



/* ——————————————————————————————————————————————————————————— */
/* 1) Make the modal backdrop cover the entire viewport, above all */
/* ——————————————————————————————————————————————————————————— */
#password-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* above navbars, sidebars, etc. */
}

/* Ensure the inner container sits above the backdrop */
#password-modal .cd-popup-container {
  position: relative;
  z-index: 10000;
}

/* ——————————————————————————————————————————————————————————— */
/* 2) Hide the protected content when the modal is visible */
/* ——————————————————————————————————————————————————————————— */
#password-modal.is-visible ~ #protected-content {
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s ease-out;
}



@media only screen and (min-width:1170px) {
  .cd-popup-container {
    margin: 8em auto;
  }

}


.highlight-index {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.highlight-index::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 15px; /* <- exact height you want */
  bottom: 0;
  left: 0;
  background-color: #CBD8FB;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  /* Animation is applied only when .animate is present to avoid double-run */
}

.highlight-index.animate::before {
  animation: highlightGrow 0.7s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes highlightGrow {
  from {
    transform: scaleX(0);
    opacity: 0.3;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Mobile: make highlight hug text only, not the whole line */
@media (max-width: 576px) {
  /* On mobile, avoid animations to prevent flicker; keep a static underline */
  .highlight.highlight-index {
    display: inline;
    background: linear-gradient(transparent 60%, #CBD8FB 0) no-repeat;
    background-size: 0% 100%;
    background-position: left bottom;
    /* No animation by default to prevent double-run on font swap */
    animation: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 0.02em;
    transition: none !important;
  }
  .highlight.highlight-index.shown {
    background-position: left bottom;
  }
  .highlight.highlight-index::before {
    content: none;
  }
  /* Trigger animation only when .animate is present */
  .highlight.highlight-index.animate {
    animation: highlightFill 0.7s ease-out forwards;
    animation-delay: var(--delay, 0s);
  }
  .burger-label {
    font-size: 14px;}
}

@keyframes highlightFill {
  from {
    background-size: 0% 100%;
    opacity: 0.3;
  }
  to {
    background-size: 100% 100%;
    opacity: 1;
  }
}