/* style.css */
html {
  scroll-behavior: smooth; /* enables smooth scroll automatically */
}
/* Variables */
:root {
  --primary-color: #1a73e8;
  --secondary-color: #ff6f61;
  --dark-color: #222;
  --light-color: #f9f9f9;
  --font-main: 'Alkatra', cursive;
}

/* Global Font */
body {
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 1.6;
  color: #333;
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}


/* Make body take full height */
html, body {
  height: 100%;
  margin: 0;
  /* display: flex;
  flex-direction: column; */
}
header {
    position: absolute;
    z-index: 1111;
    width: 100%;
}
.navbar ul a {
    color: rgba(255, 255, 255, 1);
    font-family: Alkatra;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 1.5px;
}
/* Main content should grow and push footer down */
main {
  flex: 1;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: 700;
}

/* Container */
.container {
  width: 90%;
  max-width: 1820px;
  margin: auto;
}

/* Buttons */
.btn {
    display: inline-block;
    color: rgba(0, 0, 0, 1);
    transition: 0.3s ease;
    background: linear-gradient(152.17deg, #F0CC90 6.81%, #E4B25D 45.37%);
    width: max-content;
        padding: 0 20px;
    height: 50px;
    opacity: 1;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    font-family: Poppins;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: capitalize;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
/* AOS holds fade-left / fade-right / fade-down-left elements translated up to
   100px sideways until they scroll into view. On narrow screens that pushed
   content past the viewport and gave the page a horizontal scrollbar — about
   and services scrolled ~80px wide at 390px. Sections that escaped it only did
   so by already sitting inside a clipping ancestor, e.g. .testimonials-section.

   Clipping at <main> covers every section rather than patching them one by one.

   clip, not hidden: several sections position artwork outside their box on
   purpose (.video-section-image2 is top:-60px, .video-section-playbtn is
   top:-30px). overflow:hidden crops that, and overflow-x:hidden computes
   overflow-y to auto, which turns the element into a scroll container. clip
   constrains the X axis only and leaves overflow-y visible.

   Note this hides horizontal transform overhang, not layout bugs — genuine
   too-wide content is fixed where it occurs, so nothing real gets cropped. */
main {
    overflow-x: clip;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  background-color: transparent;
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
}
.navbar .logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  font-family: var(--font-main);
  display: flex;
  /* .navbar is a flex row; without this the anchor is compressed by its
     siblings while the image keeps its height, squashing the logo. */
  flex-shrink: 0;
}
.logo img.logo {
    width: 97px;
    height: 80px;
    opacity: 1;
    display: inline-block;
}
/* Header and footer share images/logo.svg, a wide lockup (210x60).
   height:auto keeps its aspect ratio when the container is narrower
   than the declared width. Note neither carries class="logo" — that
   would pull in the 97x80 sizing above, meant for the old square PNG. */
.navbar .logo img {
    width: 227px;
    max-width: 100%;
    height: auto;
}
.footer-logo img {
    width: 210px;
    max-width: 100%;
    height: auto;
}
.navbar ul {
  display: flex;
  gap: 20px;
}

.navbar ul a:hover, .navbar ul a.active  {
  color: rgba(228, 178, 93, 1) !important;
}

/* Footer */
footer {
  background: var(--dark-color);
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  font-family: var(--font-main);
}


/***FOOTER STYLE***/
.footer-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: #e4b25d;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 200px;
    padding: 0rem 5rem;
    position: absolute;
    width: 100%;
    top: -230px;
    height: 426px;
    background-image: url(../images/footer-image-11.png);
    background-size: cover;
    background-position: top;
}

.container.footer-main {
    position: relative;
    min-height: 725px;
}
.footer-image img.footer-img {
    position: absolute;
    top: -174px;
    right: 242px;
    width: 450px;
}
.footer-content h2 {
    font-family: Alkatra;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0px;
    color: #000000;
    /* width: 695px; */
    height: 120px;
    opacity: 1;
    text-align: left;
}
@media screen and (min-width: 1023px) {
    .footer-content h2 {
      width: 695px;
  }
}
.footer-content p {
    font-family: Poppins;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 25px;
    text-align: left;
    letter-spacing: 0px;
    padding: 15px 0;
    color: #454545;
}
.footer-content a.btn {
    background: #21201E;
    color: #fff;
}
.footer-bottom-area.footer-items
 {
    padding-top: 16rem;
}
.footer-bottom-area.footer-items {
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 2rem ;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
}
.footer-bottom-area.footer-items .footer-item {
    width: 25%;
    text-align: left;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}
.footer-item.footer-one ul {
    display: flex;
       column-gap: 10px;
    align-items: center;
}
.footer-item.footer-one ul a {
    width: 35px;
    height: 35px;
    border: 1px solid #a87215;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}
.footer-bottom-area.footer-items .footer-item h2 {
    font-family: Alkatra;
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
    line-height: 45px;
    letter-spacing: 0;
    color: #E4B25D;
    padding-bottom: 3rem;
}
.footer-bottom-area.footer-items .footer-item:nth-child(1) {
    padding-right: 9rem;
}
.footer-bottom-area.footer-items .footer-item:nth-child(3) {padding-right: 8rem;}
.footer-bottom-area.footer-items .footer-item:nth-child(3) ul {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
.footer-item.footer-four.footer-newsletter input.Newsletter {
    width: 309px;
    height: 63px;
    border-radius: 50px;
    box-shadow: 0px 0px 10px 0px #0000000D;
    padding-left: 24px;
    font-size: 18px;
    border: 1px solid #F0CC90;
}
.footer-item.footer-four.footer-newsletter input.Newsletter {
    width: 309px;
    height: 63px;
    border-radius: 50px;
    box-shadow: 0px 0px 10px 0px #0000000D;
    padding-left: 24px;
    font-size: 18px;
    border: 1px solid #F0CC90;
}
ul.nav-links.footer-menu-items {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
ul.nav-links.footer-menu-items a.active {
    color: #e4b25d;
}
ul.nav-links.footer-menu-items a:hover {
    color: #e4b25d;
}
.footer-bottom-area.footer-items .footer-item:nth-child(3) ul a:hover {
    color: #e4b25d;
}
.footer-copyright {
    border-top: 1px solid #efefef63;
    margin: 0 2rem;
    text-align: left;
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.privacy-links ul.nav-links {
    flex-direction: inherit;
    column-gap: 1rem;
}
.footer-social-media h3 {
    padding-bottom: 10px;
}
/* The six social icons ship at six different intrinsic sizes (15x12,
   8x14, 13x14, ...), so they read as uneven inside identical circles.
   A common square box normalises them: each viewBox scales to fit and
   preserveAspectRatio (xMidYMid by default) centres it, so nothing is
   stretched. flex on the anchor then centres the box in the circle. */
.footer-item.footer-one ul a svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    .footer-bottom-area.footer-items .footer-item {
    width: 100%;
    }
    .navbar div#labelContainer {
    order: 1;
    }
    .navbar .logo {
        order: 2;
    }
    .navbar  a.btn {
        order: 3;
    }
    .logo img.logo {
    width: 80px;
    height: auto;}
    /* Narrower lockup so it sits beside the menu toggle and CTA button. */
    .navbar .logo img {
        width: 150px;
    }

        .footer-copyright {
        row-gap: 10px;
        justify-content: center;
    }

}
/* Tablet Portrait (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .footer-bottom-area.footer-items .footer-item:nth-child(1) {
      padding-right: 1rem;
  }
    .footer-bottom-area.footer-items .footer-item:nth-child(3) {
      padding-right: 2rem;
  }
    .footer-bottom-area.footer-items {
      padding-left: 0rem;
      padding-right: 0rem;
      padding-bottom: 0rem;
  }
}
/* Laptop (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
  
}
/* Large Desktop (1441px and above) */
@media (min-width: 1441px) {
  
}



/* Mneu Drawer css */


.invisible {
  position: fixed;
  visibility: hidden;
}

.menuState {
  z-index: 999;
  /* position: fixed; */
  right: 100px;
  /* margin: 38px 0px 0px 0px; */
  color: #e4b25d;
  transition-property: all;
  transition-duration: 0.5s;
}

#close {
  opacity: 0;
}

#labelContainer, #menuTogglerLabel, #mainMenuTogglerSystem, nav.navbar a.logo, nav.navbar a.btn {
  z-index: 999;
  cursor: pointer;
}

#mainMenuTogglerSystem {
  /* margin: 20px 20px 0px 0px; */
  right: 0;
  /* position: fixed; */
  display: grid;
  padding: 20px 20px 20px 20px;
  border-width: 1px;
  border-style: solid;
  border-radius: 100%;
  border-color: #e4b25d;
  transition-property: all;
  transition-duration: 0.5s;
}

.rowToggle {
  display: inline-flex;
}

.pixel {
  margin: 0px 3px 3px 0px;
  width: 3px;
  height: 3px;
  background-color: #e4b25d;
  transition-property: all;
  transition-duration: 0.5s;
}

#three,
#six {
  margin: 0px 0px 3px 0px;
}

#seven,
#eight {
  margin: 0px 3px 0px 0px;
}

#nine {
  margin: 0px 0px 0px 0px;
}

.navigationContainer {
  z-index: 998;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000000;
  transition-prerty: all;
  transition-duration: 1.25s;
  transition-timing-function: cubic-bezier(1, 0, 0.25, 1);
}

.bodyMain {
  position: fixed;
  width: 100%;
  height: 100vh;
  transition-prerty: all;
  transition-duration: 0.5s;
  transition-delay: 0.25s;
  transition-timing-function: cubic-bezier(1, 0, 0.3, 0.995);
}

#desc {
  padding: 0px;
  width: 100%;
  height: 30px;
  margin: 45vh 0px 45vh 0px;
  font-size: 10vh;
  text-align: center;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #one {
  opacity: 0;
  transform: translate(6px, 6px);
  margin: 3px 0px 0px 3px;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #two {
  opacity: 0;
  transform: translate(0px, 6px);
  margin: 3px 0px 0px 0px;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #three {
  opacity: 0;
  transform: translate(-6px, 6px);
  margin: 3px 3px 0px 0px;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #four {
  opacity: 0;
  transform: translate(6px, 0px);
  margin: 0px 0px 0px 3px;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #five {
  margin: 0px 0px 0px 0px;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #six {
  opacity: 0;
  transform: translate(-6px, 0px);
  margin: 0px 3px 0px 0px;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #seven {
  opacity: 0;
  transform: translate(6px, -6px);
  margin: 0px 0px 3px 3px;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #eight {
  opacity: 0;
  transform: translate(0px, -6px);
  margin: 0px 0px 3px 0px;
}

#labelContainer:hover
  > #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  #nine {
  opacity: 0;
  transform: translate(-6px, -6px);
  margin: 0px 3px 3px 0px;
}

#menuToggler:checked
  + #labelContainer
  #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  .move {
  opacity: 0;
}

#menuToggler:checked
  + #labelContainer
  #menuTogglerLabel
  #mainMenuTogglerSystem
  .rowToggle
  .cross {
  background-color: #e4b25d;
}

#menuToggler:checked
  + #labelContainer
  #menuTogglerLabel
  #mainMenuTogglerSystem {
  /* border-style: none; */
  /* background-color: #e4b25d; */
}

#menuToggler:checked ~ .navigationContainer {
  top: 0;
}

#menuToggler:checked ~ .bodyMain {
  opacity: 0;
}

#menuToggler:checked + #labelContainer #open {
  opacity: 0;
}

#menuToggler:checked + #labelContainer #close {
  opacity: 1;
}
div#labelContainer {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.menu-drawer-main li a {
    font-size: 45px;
}
.menu-drawer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 7rem;
    gap: 2rem !important;

}

#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  font-size: 22px;
  background-color: #e4b25d;
  color: #000000;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
}

#backToTop:hover {
  background-color: #333;
  transform: scale(1.1);
}