html, body {
  height: 100%;
  /* min-height:100vh; */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  /* overflow-x: hidden; */
  width: 100%;
  margin:0;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.icons-list-h { list-style: none; display:flex; align-items:center; padding:0; }
.icons-list-h li { margin-right:5em; }
.sub-heading-red { color:rgba(216, 59, 42, 1); font-size:18px; font-weight:600; line-height:150%; }
.bg-lightgray { background-color:#fafafa;}
.profiles-detail-block .detail-banner.img-vh100 img { height:100vh; max-width:none; width:auto; }
.back-bar { font-size: 0.87rem;}
.detail-banner { border-radius:12px; overflow:hidden;}
.back-bar svg { width:8px; height:16px; }
 .site-header+.back-bar { padding-top: 2.6rem; max-width:1240px; margin:auto; }
 .site-header+.back-bar a:hover { color:#0A0A0A; }
 .site-header+.back-bar a:hover .angle-left { fill: #0a0a0a; }
 @media all and (min-width:768px) {
     .sub-container {max-width:680px; margin:auto; padding:0 24px; }
 }
 .design-video { margin-top:-16px;}

 /*--- NEW HOME LAYOUT ---*/
  .site-header.header-abs {
    padding-top:0;
    top:8.208vh;
  }

 .page-primary-bg { 
  background:#fffacc;
    /* background: rgba(255, 249, 196, 0.09);
    background:linear-gradient(182deg, rgba(255, 249, 196, 1) 29%, rgba(250, 204, 20, 1) 100%),
    url("../assets/img/body-bg.jpg") repeat-x bottom; */
  }

  .site-header .navbar {
    flex:1;
    background-color:#fff;
    border-radius:2rem;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.36);
    padding:1.25rem 2rem;
  }

  .logo img {
    filter: invert(1) brightness(0) !important;
  }

  .site-header.header-abs .hd-link {
    color:#292929;
  }
  .hd-link:hover {
    background-color:#0a0a0a;
    color:#fff;
  }

  .main-banner-block .banner-text {
    color:#0A0A0A;
    font-size:2.2rem;
    font-size:35px;
    line-height:150%;
  }
  .main-banner-block .banner-text p {
    color:#474747;
  }
  .main-banner-block .banner-text .sub-text { 
    font-size:1.66rem;
    font-size:35px;
    font-weight:500;
    line-height:140%;
    padding-top:1rem;
    margin-bottom:0;
  }

  @media (max-width:767px) {
    html, body { overflow-x:hidden; }
    .main-banner-block { width:auto; }
    .main-banner-block, .main-banner-block .banner-text-block {
      padding:0;
    }
    .main-banner-block .banner-text { 
      font-size:2.15em;
      line-height:130%;
    }
    .main-banner-block .banner-text .sub-text {
      font-size:0.58em;
      font-size:18px;
      line-height:150%;
      padding-top:1rem;
      letter-spacing:0.01em;
    }
    .main-banner-block .banner-text span {
      display:block;
    }
    
  }

  @media (min-width: 768px) and (max-width:1399px) { 
    .main-banner-block .banner-text { font-size:35px; }
    .main-banner-block { padding-top:0; }
    .main-banner-block .banner-text .sub-text { font-size:25px; }
  }

  @media (min-width: 768px) {
    .main-banner-block {
      height:calc(100vh - 107px);
      width:auto;
      padding:0;
    }
    .hd-link { font-size:18px; }

    /* .section { padding-top:150px; } */

    .scroll-container {
      padding-left: 0;
      padding-right: 0;
      /* max-width:1320px; */
      margin:auto;
    }

    .content-container, .profiles-block { max-width:1235px; margin:0 auto; padding-left:2rem; padding-right:2rem; }
  }
  
  @media (min-width:1200px) {
      .main-banner-block {
        /* justify-content: flex-start; */
        padding-top:0;
      }
  }

@media (min-width:768px) and (max-width:1199px) {
  .main-banner-block .banner-text-block { width:auto; }
  .main-banner-block .banner-text { font-size:32px; }
  .main-banner-block .banner-text .sub-text { font-size:22px; }
}



@media (min-width: 768px) { 
    .main-graph-block {
      /* width:36.767vw;
      width:400px; */
      width:692px;
    }
    .main-graph-block .graph-eye {
        right: 130px;
        top: 110px;
    }
    .main-graph-block .graph-eye.holder img {
      width:19px;
      height:19px;
    }
    
    .section-inner {
      /* height:100%;
      overflow-y:scroll;
      overflow-x:hidden; */
    }
    .main-banner-block .banner-text-block {
      padding-top:0;
    }
}

@media (min-width: 1400px) {
    .main-graph-block .graph-eye {
        width: 51px;
        height: 28px;
        padding: 4px 15px;
        right: 205px;
        top: 98px;
    }
    
    .profile-block-action .profile-media {
      width:385px;
    }
}

@media (max-width:575px) {
  .main-graph-block {
    width:382px;
  }
} 
@media (max-width:767px) {
  .main-graph-block {
    width:450px;
    max-width:100%;
    bottom:0;
  }
  .page-primary-bg.home-page {
    position:unset;
    padding-bottom:0;
    min-height:100vh;
    /* height:100%; */
  }
}

@media (min-width:1500px) {
  .main-banner-block .banner-text-block { width:65%; }
}

/* @media (max-width: 767px) and (hover: none) and (pointer: coarse) {
  .main-graph-block {
    bottom:139px;
  }
} */

@media (max-width: 767px) and (max-height:799px) { 
  .main-graph-block { width:36.767vw; width:320px; } 
  .main-banner-block .banner-text {font-size:28px; line-height:135%; font-size:clamp(22px, 6vw, 28px); }
  .main-banner-block .banner-text .sub-text { font-size:clamp(16px, 4.58vw, 18px); }
  .main-graph-block .graph-lines { right:87px; }
}

@media (min-width:360px) and (max-height:667px) {
  /* .main-graph-block { width:280px; } */
}

@media (max-width:767px) {
  .graph-eye.holder {
    display:none;
  }
   .main-graph-block .graph-lines .line-vertical {
    width:25px;
    right:0;
  }
  .main-graph-block .graph-lines .line-horizontal {
    left:50px;
  }
  .main-graph-block .graph-lines {
    top:50px;
    right:95px;
  }
}

@media (max-width: 799px) and (max-height:767px) and (orientation: landscape) {
  .main-banner-block .banner-text { width:55%; }
}

@media (max-width: 768px) and (max-height:800px) { 
  .main-graph-block { width:36.767vw; width:320px; } 
  /* .main-banner-block .banner-text {font-size:28px; line-height:135%; font-size:clamp(24px, 7.2vw, 28px); }
  .main-banner-block .banner-text .sub-text { font-size:clamp(16px, 4.58vw, 18px); } */
  /* .main-graph-block .graph-lines { right:87px; } */
}

.social-button svg {
  width:28px;
  height:28px;
  fill:#000
}

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-x:hidden;
}

 .section {
  scroll-snap-align: start;
  box-sizing: border-box;
  padding-top:107px;
  /*display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;               
  transform: translateY(40px); 
  transition: opacity 0.6s ease, transform 0.6s ease;*/
}

/*.section.visible {
  opacity: 1;
  transform: translateY(0);   
} */

.section > .container {
  /*max-width:none;*/
}

@media (max-width:767px) {
  .section {
    padding-top:6.25rem;
    padding-left:1rem;
    padding-right:1rem;
    padding-bottom:0;
  }
  .profiles-detail-block p {
    font-size:18px;
  }
}

@media (min-width:768px){
  .main-graph-block .graph-lines {
    top:98px;
    right:202px;
  }
  .profile-block-action .profile-media+.text { flex:1; }
}

@media (min-width: 768px) and (max-width:1399px) { 
  .main-graph-block { width:560px; }
  .main-graph-block .graph-lines {
      /*top:145px;
      right:160px;*/
      top:20%;
      right:27%;
    }
    .main-graph-block .graph-lines .line-vertical {
      width:50px;
      right:12px;
    }
    .main-graph-block .graph-lines .line-horizontal {
      left:20px;
    }
    .main-graph-block .graph-eye {
      /* right:165px;
      top:131px; */
      right:29.5%;
      top:16.5%;
      width:60px;
    }
}

@media (min-width: 1400px) {
    .main-graph-block {
        width: 692px;
    }
    .main-graph-block .graph-lines .line-vertical {
      width:45px;
      right:10px;
      top:15px;
    }
    .main-graph-block .graph-lines .line-horizontal {
      left:20px;
      bottom:0;
    }

    /* .main-graph-block {
  position: fixed;           
  bottom: 0;                 
  right: 0;                 
  width: auto;
  height: auto;
  z-index: 10;
  pointer-events: none;       
}
    .graph-img {
      display: block;
      max-width: 100%;
      height: auto;
      transform: translateY(0); 
    } */
}

.main-graph-block.appear-lashes .graph-eye::before {
  display:none;
}

.home-projects .section-inner {
  max-width:778px;
}
.project-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0px 3px 1px rgba(219,177,7,1);
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
}

.project-card p {
  font-size:14px;
}

.btn-more {
  background-color:#fff;
  border:1px solid #FF715B;
  border-radius:0.875rem;
  color:#FF715B;
  display:flex;
  justify-content:center;
  font-weight:600;
  width:200px;
  padding:0.5rem 1rem !important;
}

.main-graph-block {
  /*position: fixed;
  bottom: 20px;
  right: 20px;*/
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
  opacity: 1;
  transform: translateX(0);
  z-index:99;
  pointer-events: none;
}

.main-graph-block.hidden {
  opacity: 0;
  /* transform: translateY(20px); 
  pointer-events: none;
  transition-delay: 0s; */
}

.main-graph-block:not(.hidden) {
  transition-delay: 0.2s; 
}

/* Base Navbar */
.site-header {
  z-index: 1000;
  position: relative;
  /* position:fixed;
  max-width:1320px; 
  margin:auto;*/
  width:100%;
}

.hd-link-group a {
  margin-left: 1.5rem;
  font-weight: 500;
  font-size:1rem;
  color: #000;
  text-decoration: none;
}

.hd-link-group a:hover {
  text-decoration: underline;
}

/* Hamburger */
.menu-toggle {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background: #000;
}

/* Fullscreen Overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(182deg, rgba(255, 249, 196, 1) 29%, rgba(250, 204, 20, 1) 100%);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  z-index: 2000;
}

.menu-overlay.active {
  display: flex;
}

/* Close Button */
.menu-close {
  border:0;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.15), 
    inset 0px 2px 2px 0px rgba(255, 255, 255, 1), 
    inset 0px -2px 4px 0px rgba(0, 0, 0, 0.29), 
    inset 0px 2px 4px 0px rgba(0, 0, 0, 0.28),
    inset 0px 0px 5px 0px #EBD262;
    background-color: #fff;
}

/* Overlay Menu */
.overlay-menu {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items:center;
  gap: 1.5rem;
  width: 100%;
}

.overlay-link {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000;
  text-decoration: none;
}

.overlay-link:hover {
  text-decoration: underline;
}

/* Call Button */
.button.overlay-btn {
  margin-top: 2rem;
  width:200px;
  line-height:1.429rem;
  text-align: center;
  font-size:16px;
  font-weight: 600;
  /*display: flex;
  align-items: center;
  padding: 12px 20px;
  background: #FF715B;
  border: 1px solid #000;
  color: #fff;
  border-radius: 6px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
  text-decoration: none;*/
}

/* Fullscreen overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3.5rem 2rem 2rem;
  gap: 1rem;

  background: linear-gradient(
  182deg,
  rgba(255, 249, 196, 1) 29%,
  rgba(250, 204, 20, 1) 100%
  );

  /* start hidden */
  opacity: 0;
  transform: translateY(-5%);
  pointer-events: none;

  /* smooth animation */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* when active */
.menu-overlay.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.overlay-link,
.overlay-btn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* when overlay is active, fade them in */
.menu-overlay.active .overlay-link,
.menu-overlay.active .overlay-btn {
  opacity: 1;
  transform: translateY(0);
}

/* stagger effect */
.overlay-link:nth-child(1) { transition-delay: 0.2s; }
.overlay-link:nth-child(2) { transition-delay: 0.35s; }
.overlay-link:nth-child(3) { transition-delay: 0.5s; }
.overlay-link:nth-child(4) { transition-delay: 0.65s; }
.overlay-btn               { transition-delay: 0.8s; }


.site-header {
    box-shadow:none;
    background-color:#fffacc;
    padding-left:2rem;
    padding-right:2rem;
    padding-bottom:0;
    margin:auto;
}

@media (max-width:767px) {
  .site-header { padding:1rem; position:absolute; background:#fffacc; }
}

@media (min-width:768px) {
  .site-header,
  .site-header.header-abs { max-width:1235px; margin:0 auto; position:absolute; left:50%; transform:translateX(-50%); padding-top:2.5rem; top:auto; }
  .site-header.header-profile-page {
    position:unset;
    left:auto;
    transform:none;
  }
  .inner-container { padding-top:2.5rem; }
  .section { min-height:100vh; }
}
/* --- Testimonial Styles ---*/
.testimonials-section {
  /*display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100vh;
  background: #fffbe9;
  overflow: hidden;
  padding: 40px 20px;*/
}

.testimonials-title {
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: left;
  width: 100%;
  max-width: 800px;
}

/* Slider container */
.testimonial-slider, .home-projects {
  position: relative;
  width: 100%;
  max-width: 778px;
}

/* Card */
.testimonial-card {
  /* display: none; */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  padding: 2rem;
  position: relative;
  /* opacity: 0; 
  transform: translateY(20px);*/
  transition: opacity 0.5s ease, transform 0.5s ease;
  position:relative;
  
  /* overflow-y:auto; */
}

@media all and (min-width:992px) {
  .testimonial-slider,
  .home-projects .section-inner {
    /* max-width:51.455vw; */
  }
  .testimonial-card { 
    /* height:23vw;
    max-height:550px; */
  }
}

/* .testimonial-card:before {
  content:"";
  position:absolute;
  top: 0;
  left: 5px;
  height: 5px;
  width: 220px;
  background: #FF715B;
  border-radius: 10px 0 0 0;
  z-index:9;
} */

.testimonial-card.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Accent bar (top-left border line) */
/*.accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 60px;
  background: #FF715B;
  border-radius: 4px 0 0 0;
}*/

/* Text */
.testimonial-text {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 150%;
}

/* Author */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
}

.testimonial-author img {
  width: 70px;
  object-fit: contain;
}

.testimonial-author h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}

.testimonial-author span {
  font-size: 0.9rem;
  color: #555;
}

.testimonial-nav {
  display:flex;
  justify-content: space-between;
  margin-bottom:20px;
  padding-top:22px;
}
.testimonial-nav .testimonial-count {
  color:#474747;
  font-size:18px;
  line-height:1;
  padding-bottom:12px;
}

/* Navigation buttons */
.nav-btn, .swiper-button-prev,
.swiper-button-next {
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 0.875rem;
  background: #FF715B;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
  top:0;
  transition: opacity 0.3s ease;
}

/* .nav-btn:disabled {
  opacity: 0;
  pointer-events: none;
} */


.testimonial-track {
  display: flex;
  transition: transform 0.5s ease;
}

.nav-buttons .swiper-button-next:after, .nav-buttons .swiper-button-prev:after {
  content:"";
}
.swiper-button-next, .swiper-button-prev {
  background: #FF715B url(../assets/img/right-arrow.svg) no-repeat center center;
}

/* Prev button */
.swiper-button-prev {
  transform: rotate(180deg);
}

.swiper-button-prev.swiper-button-disabled {
  opacity:0;
}

@media (min-width:1200px) and (max-height:800px) {
    .main-banner-block .banner-text-block {
        /* width: calc(100% - 550px); */
    }
    .testimonial-slider { max-width:600px; }
}

@media (max-width: 1200px) {
  .testimonial-card {
    padding: 16px;
  }
  .testimonial-card p {
    font-size: 1.25rem; /* smaller text */
  }
}

/* --- Testimonial Styles End ---*/

/*-- Call to Action --*/

@media (min-width:1400px) and (max-width:1599px) and (max-height:800px) {
  .call-to-action .section-title {
    max-width:75%;
  }
}
.call-to-action .section-title {
  font-size:2.1rem;
  letter-spacing:0.015em;
  line-height:1.4;
  max-width:1260px;
}
.call-to-action .section-title u {
  color:#846100;
}

.call-to-action .title-subtext {
  color:#474747;
  font-weight:500;
}

.call-to-action .action-buttons button {
  width:100%;
  max-width:225px;
  min-width:150px;
  border-radius:0.875rem;
  padding:0 1rem;
  transition: all 0.2s ease-in-out;
  line-height:3;
  /*background-color:#FF715B;
  color:#fff;
  border:2px solid #FF715B;
  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.25);*/
}
.call-to-action .action-buttons button.btn-inverse {
  background-color:#fff;
  color:#FF715B;
}

@media (max-width: 767px) and (max-height:700px) { 
  .call-to-action .section-title { font-size:1.5em; }
}

/*-- Call to Action End --*/

@media (max-width: 767px) {
  /* #section-projects .main-graph-block,
  #section-testimonials .main-graph-block {
    display: none !important;
  } */

  .main-graph-block {
    /* width:97.201vw; */
    text-align:right;
    position:fixed;
  }

  .testimonial-nav .testimonial-count {
    font-size:20px;
  }

  .call-to-action .action-buttons button {
    line-height:3;
    font-size:16px;
  }
}

/* Global Scrollbar Styling */

/* Firefox */
 * {
  scrollbar-width: thin; 
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}
/*::-webkit-scrollbar, .scrollbar::-webkit-scrollbar, body::-webkit-scrollbar {
    width: 2px;
    height: 3px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-track { background:transparent; }

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 1px;
} */

.button {
  padding: 18px;
	border-radius: 12px;
  border:0;
  font-weight:500;
  line-height:2rem;
}
.button-primary {
	box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15),
    inset 0px 4px 4px 0px rgba(255, 255, 255, 0.46),
    inset 0px -4px 4px 0px rgba(0, 0, 0, 0.29),
    inset 0px 2px 2px 0px #ff715b;
	--minContent: 170;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: MIN;
  background-color:#ff715b;
  color:#fff;
}
.button-primary:hover {
    background-color:#ff6047;
}
.button-primary:active {
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15), 
    inset 0px 4px 4px 0px rgba(255, 255, 255, 0.19), 
    inset 0px -2px 4px 0px rgba(0, 0, 0, 0.32), 
    inset 0px 2px 2px 0px #ba4634, 
    inset 0px 0px 4px 0px rgba(0, 0, 0, 0.49);
    background-color: #ad4131;
}

.nav-btn:active:after {
  -webkit-mask: url("../assets/img/right-arrow-active.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask: url("../assets/img/right-arrow-active.svg") no-repeat center;
  mask-size: contain;
}

.button-secondary {
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15), 
    inset 0px 2px 2px 0px rgba(255, 255, 255, 1),
    inset 0px -4px 4px 0px rgba(0, 0, 0, 0.29), 
    inset 0px 4px 4px 0px rgba(0, 0, 0, 0.28),
    inset 0px 0px 5px 0px #EBD262;
  background-color:#fff;
  color:#000;
}
.button-secondary:hover, a.button-secondary:hover {
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15), 
    inset 0px 2px 2px 0px rgba(255, 255, 255, 1), 
    inset 0px -4px 4px 0px rgba(0, 0, 0, 0.29), 
    inset 0px 4px 8px 0px rgba(0, 0, 0, 0.27), 
    inset 0px 0px 8px 0px #ECD56D;
  background-color:#EBEBEB;
  color:#000;
}
.button-secondary:active {
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15), 
    inset 0px 0px 4px 0px rgba(0, 0, 0, 0.59), 
    inset 0px 2px 2px 0px #7C7C7C, 
    inset 0px -2px 4px 0px rgba(0, 0, 0, 0.32), 
    inset 0px 4px 4px 0px rgba(255, 255, 255, 0.10), 
    inset 0px 0px 2px 0px #EBD468;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 1%, #B5B5B5 100%);
  background: linear-gradient(rgba(0, 0, 0, 1%), rgba(0, 0, 0, 1%)), linear-gradient(#B5B5B5, #B5B5B5);

}
a.button-secondary:focus {
  color:#000;
}

@media (max-width:767px) {
  .button-secondary { font-size:16px; line-height:2.5;}
  .section { height: calc(var(--vh, 1vh) * 100); height:100vh; }
  .swiper-button-next, .nav-btn { width:48px; height:48px; }
}