* {
    box-sizing: border-box;
}

/* @font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins/Poppins-Thin.ttf') format('truetype');
  font-weight: 100; 
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100; 
  font-style: italic;
} */

/* @font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200; 
  font-style: normal;
} */

/* @font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 100; 
  font-style: italic;
} */
/* 
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300; 
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400; 
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500; 
  font-style: italic;
} */



body {
  background-color: #0E0E0E;
  /* color: linear-gradient(to right,rgb(155, 105, 50), rgb(226, 187, 144)); */
  color: #e2bb90;
  font-family: 'Poppins', sans-serif;
  /* font-weight: 200; */
  font-style: normal;
  overflow-x: hidden;
}

nav {
    position: relative;
  }

a {
	text-decoration: none;
	color: black;
}

#menuBtn {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 10px;
    background-color: rgb(255, 255, 255, 0);
    border: none;
    cursor: pointer;
	  z-index: 4;
  }
  
   /* #menuList {
    display: none;
    position:absolute;
    background: linear-gradient(270deg, #E2BB90 20%, #9B6932 68%, #0E0E0E 50%);
    list-style: none;
    padding: 10% 65% 50% 65%;
    
  } */

  #menuList {
    position: absolute;
    top: 0;
    left: 0; /* Start off-screen to the right */
    height: 100vh;
    width: 70vw;
    background: linear-gradient(270deg, #E2BB90 20%, #9B6932 68%, #0E0E0E 50%);
    /* background-color: #e2bb90; */
    list-style: none;
    padding: 10% 65% 50% 65%;
    transform: translateX(-120%);
    transition: transform 1s ease-in-out; /* Smooth slide effect */
    z-index: 3;
    display: grid; /* Ensure proper alignment */
    justify-content: center;
    margin: 0 auto;
  }
  
  #menuList li {
    /* padding: 10px; */
    color: #000;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 200;
    text-align: left;
    /* line-height: normal; */
    display: flex;
    align-items: center;
    /* gap: 20px; */
    justify-content: space-between;
  }
  
  #menuList a {
    color: #0E0E0E;
    /* text-align: left; */
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; /* 24px */
    letter-spacing: 0.96px;
    text-transform: uppercase;
	/* background-color: white; */
  }

  #menuList p {
    color: #0E0E0E;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; /* 24px */
    letter-spacing: 0.96px;
    text-transform: none;
    width: 255px;
  }
  
  /* Show menu on button click */
  /* #menuList.active {
    display: block;
    display: grid;
    justify-content: center;
    margin: 0 auto;
	  z-index: 3;
	 
  } */
  #menuList.active {
    transform: translateX(0); /* Bring it into view */
}
  .menuOpen-line {
    width: 170px;
    height: 2px;
    background: #9B6932;
  }

  #closeBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 40px;
    color: #0E0E0E;
    cursor: pointer;
    z-index: 5;
    display: none; /* Initially hidden */
}

#menuList.active #closeBtn {
    display: block; /* Show when the menu is active */
}

  .logo {
    width: 308.231px;
    height: 83.311px;
    flex-shrink: 0;
  }

  header {
    position:sticky;
    top: 0;
    display: grid;
    grid-template-columns: repeat(3, 40%);
    align-content:flex-start;
    align-self: self-start;
    margin: 0;
    padding: 20px;
    background-color: #0E0E0E;
    z-index: 9;
  }

























































  .sphere-container {
    position:relative;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 600px;
  }
  
  .sphere {
      /* position: relative; */
      width: 20%;
      height: 200px;
      transform-style: preserve-3d;
  }
  
  .text {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 1.3vw;
    background-color:#0E0E0E;
    border: solid #9B6932 1px;
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  
  .sphere .text:nth-child(1) { transform: rotateY(-45deg) translateZ(300px) translateY(150px) translateX(0px); }  /* HTML */
  .sphere .text:nth-child(2) { transform: rotateY(-90deg) translateZ(250px) translateY(300px) translateX(0px); } /* CSS */
  .sphere .text:nth-child(3) { transform: rotateY(-135deg) translateZ(200px) translateY(450px) translateX(0px); } /* JavaScript */
  .sphere .text:nth-child(4) { transform: rotateY(-180deg) translateZ(250px) translateY(600px) translateX(0px); } /* Design */
  .sphere .text:nth-child(5) { transform: rotateY(-225deg) translateZ(300px) translateY(700px) translateX(0px); } /* 3D */
  .sphere .text:nth-child(6) { transform: rotateY(-270deg) translateZ(350px) translateY(800px) translateX(0px); } /* UI */
  .sphere .text:nth-child(7) { transform: rotateY(-360deg) translateZ(350px) translateY(0px) translateX(0px); }
   /* UX */
  .sphere .text:nth-child(8) { transform: rotateY(-315deg) translateZ(350px) translateY(900px) translateX(0px); } 
  /* Animation */





















  .line-container {
    width: 20%; 
  }
  
  .line {
    width: 400px; 
    height: 2px; 
    rotate: 95deg;
    background-color: #9B6932; 
    transform: scaleX(0); 
    transform-origin: left; 
    transition: transform 2s ease; 
  }
  
  .second-home:hover .line {
    transform: scaleX(1); 
  }
  



















































  h1 {
    font-family: "Poppins", serif;
    font-weight: 100;
    font-style: normal;
    font-size: 10vw;
    line-height: 150%;
    letter-spacing: 7.68px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #9B6932 0%, #AB7B47 58%, #E2BB90 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0;
    margin: 0;
  }

  h2 {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 5vw;
    font-style: italic;
    font-weight: 200;
    line-height: 100%;
    letter-spacing: 7px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #9B6932 0%, #A87944 50%, #E2BB90 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    margin-top: 10%;
  }

  .first-about h1 {
    text-align: center;
  }

  .first-services h1 {
    text-align: center;
  }

  h3 {
    /* width: 692px;
    height: 116px; */
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; 
    letter-spacing: 1.44px;
    background: linear-gradient(180deg, #E2BB90 0%, #D0A678 38%, #9B6932 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0;
    margin: 0;
  }

  .index-h3 {
    width: 80%;
  }

  .second-about h3 {
    width: 70vw;
    color: #9B6932;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    font-size: 24px;
    font-style: italic;
    line-height: 150%; /* 36px */
    letter-spacing: 1.44px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
  }

  .third-about h3 {
    width: 70vw;
    color: #9B6932;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 200;
    line-height: 150%; /* 36px */
    letter-spacing: 1.44px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
  }

h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-size: 20px;
  font-style: normal;
  /* font-weight: 200; */
  line-height: 150%; /* 30px */
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #9B6932 0%, #A06F39 68%, #E2BB90 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.index-h4 {
  text-align: center;
  text-transform: none;
  margin: 0%;
}

h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
  line-height: 150%; 
  letter-spacing: 1.2px;
  text-align: center;
  background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.7;
}

h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-size: 10px;
  font-style: normal;
  font-weight: 200;
  /* line-height: 150%;  */
  letter-spacing: 1.2px;
  text-align: center;
  background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  margin-top: 50px;
}












































  p {
    /* flex-shrink: 0; */
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 200;
    /* line-height: 150%;  */
    /* letter-spacing: -0.22px; */
    color: #9B6932;
  }

  #menuBtn p {
    background: linear-gradient(90deg, #9B6932 0%, #E2BB90 100%);
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; /* 28.5px */
    letter-spacing: -0.209px;
    text-transform: uppercase;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .top-contact p {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; 
    letter-spacing: -0.209px;
    background: linear-gradient(90deg, #9B6932 0%, #E2BB90 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  #first-p-1, #first-p-2 {
    width: 350px; /* Fixed width */
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; /* 24px */
    letter-spacing: 0.96px;
    /* text-transform: uppercase; */
    background: linear-gradient(180deg, #E2BB90 0%, #D0A678 48%, #9B6932 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
    white-space: normal; /* Allow text to wrap */
  }

  #first-p-2 {
    text-align: end;
  }

  .third-p {
    width: 60%;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; /* 30px */
    letter-spacing: 1.2px;
    background: linear-gradient(180deg, #E2BB90 0%, #D0A678 48%, #9B6932 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .second-home p {
    width: 45%;
  }

  .second-about p {
    width: 80vw;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%;
    letter-spacing: 0.96px;
    background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    padding: 0;
  }

  .third-about p {
    width: 80vw;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; /* 24px */
    letter-spacing: 0.96px;
    background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    padding: 0;
  }

  .first-services p {
    width: 70%;
    /* height: 90px; */
    /* text-align: center; */
    flex-shrink: 0;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 200;
    line-height: 150%; /* 30px */
    letter-spacing: 1.2px;
    background: linear-gradient(180deg, #E2BB90 0%, #C59A6A 26%, #9B6932 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 150px;
  }

  .third-about p, .third-about h3 {
    margin: 0; /* Removes default browser margins */
    padding: 0;
}
.second-about p, .second-about h3 {
    margin: 0; /* Removes default browser margins */
    padding: 0;
}























































  /* Container styles */
.about-line {
  display: flex;
  justify-content: center;
  height: 300px;
  width: 100%;
  background-color: #0E0E0E;
}

.about-line-2 {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  height: 300px; 
  width: 100%;
  background-color: #0E0E0E; 
}

.services-line {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  height: 300px; 
  width: 100%;
  background-color: #0E0E0E; 
}

/* Line styles */
.line-about {
  width: 1px;
  height: 0; 
  background: linear-gradient(90deg, #E2BB90 0%, #A77742 41%, #9B6932 100%);
  transform-origin: top; 
  opacity: 1; 
}

.line-about-2 {
  width: 1px;
  height: 0;
  background: linear-gradient(90deg, #E2BB90 0%, #A77742 41%, #9B6932 100%);
  transform-origin: top;
  opacity: 1;
}

.line-services {
  width: 1px;
  height: 0;
  background: linear-gradient(90deg, #E2BB90 0%, #A77742 41%, #9B6932 100%);
  transform-origin: top;
  opacity: 1;
}

























































  .first-home {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }

  .second-home {
    /* margin: 150px 60px 200px 60px ; */
    margin: 10% 6% 20% 6%;
    display: flex;
    justify-content: space-between;
  }

  .third-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .third-home img {
    width: 60vw;
  }

  .second-about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .third-about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .first-services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    /* width: 90%; */
  }

  .services-h3 {
    display: flex;
    align-items: center; /* Vertically centers the items */
    justify-content: center; /* Horizontally centers the items */
    text-align: center; /* Ensures text is centered */
    gap: 40px; /* Space between the lines and text */
    margin: 20px auto; /* Centers the element within its parent */
    width: fit-content; /* Ensures it only takes as much space as needed */
  }

  .services-h3 h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 24px; /* Adjust as needed */
    font-weight: 500; /* Adjust for emphasis */
  }

  .service-list-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: #e2bb90 solid 1px; */
    height: 100vh; /* Adjust as needed to match the height */
  }

  /* .service-list {
    display: flex;
    width: 100vw;
    flex-direction: column;
    align-items: left;
    margin-top: 600px;
    margin-bottom: 900px;
  } */

  .service-list p {
    align-self: stretch;
    text-align:left;
    font-family: Poppins;
    font-weight: 200;
    font-size: 14px;
    font-style: normal;
    font-weight: 275;
    line-height: 150%; 
    letter-spacing: -0.22px;
    background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 55vw;
    /* border: #e2bb90 solid 2px; */
    padding: 10px;
    margin: 0;
    transition: margin ease 1s ;
  }

  .list-icon {
    display: flex;
    align-items: center;
    justify-content: left;
  }
  
  .list-icon-drawer {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    align-content: center;
    justify-items: center;
    justify-content: left;
    gap: 20px;
  }

  .list-icon p {
    font-size: 16px;
  }

  .hor-line {
    width: 650px;
    height: 1px;
    background: linear-gradient(90deg, #E2BB90 0%, #9B6932 100%);
  }

  .hor-line-short {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, #E2BB90 0%, #9B6932 100%);
    transform: scaleX(0.5); 
    transition: transform 0.5s ease;
  }

  .services-h3:hover .hor-line-short{
    transform: scaleX(2); 
  }

  .circle {
    width: 10px;
    height: 10px;
    background: linear-gradient(90deg, #E2BB90 0%, #9B6932 100%);
    border-radius: 100%;
  }














































footer {
  margin-top: 200px;
  margin-bottom: 20px;
}

#footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 40px 40px 0px 40px;
}


.footer-line {
  /* width: 1376.564px; */
  /* width: 130%; */
  height: 2px;
  rotate: 3deg;
  background: linear-gradient(90deg, #E2BB90 0%, #A77742 41%, #9B6932 100%);
  margin: 0px auto;
  
}


































#contact {
  /* width: 100vw; */
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  line-height: 150%; /* 24px */
  letter-spacing: 0.96px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #9B6932 0%, #A06F39 34.5%, #E2BB90 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0px 40px 0px 40px;
}

#icon {
  rotate: -90deg;
  object-fit:contain;
  width: min-content;
  height: min-content;
}

.menu-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #E2BB90 35%, #9C6A34 100%);
  margin: 10px;
}

.menu-line-2 {
  width: 103px;
  height: 2px;
  background: linear-gradient(90deg, #EDE1D4 0%, #E2BB90 35%, #9C6A34 100%);
  margin: 10px;
  transform: scaleX(0.3); 
  transform-origin: left;
  transition: transform 0.5s ease;
}

.menu-line-container {
  width: 100px;
  height: 50px;
}

.menu-line-container:hover .menu-line-2 {
  transform: scaleX(1);
}

#menuBtn:hover .menu-line-2 {
  transform: scaleX(1);
}

.contact-iconCircle {
  height: 20px;
  width: 20px;
  border: solid 2px;
  border-radius: 100px;
}

.contact-iconLine {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #E2BB90 35%, #9C6A34 100%);
  /* margin: 10px; */
  transform: scaleX(0.5); 
  transform-origin: right;
  transition: transform 0.5s ease;
}

.contact-iconLine-2 {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #E2BB90 35%, #9C6A34 100%);
  /* margin: 10px; */
  transform: scaleX(0.5); 
  transform-origin: right;
  transition: transform 0.5s ease;
}

.contact-icon {
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  /* object-fit: contain; */
  gap: 0px;
}

.contact-icon-2 {
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  /* object-fit: contain; */
  gap: 0px;
  margin: 20px;
}

.contact-icon:hover .contact-iconLine {
  transform: scaleX(1.3);
}

.contact-icon-2:hover .contact-iconLine-2 {
  transform: scaleX(1.3);
}

#toggleButton:hover .contact-iconLine-2 {
  transform: scaleX(1.3);
}


.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
}

.contact:hover .contact-iconLine {
  transform: scaleX(1.3);
}

.top-contact {
  display: flex;
  gap: 40px;
  align-items: center;
}

.top-contact:hover .contact-iconLine{
  transform: scaleX(1.3);
}




.services-icons {
  width: 30px;
  /* height: 50px;
  object-fit:cover; */
}

.services-icons-1 {
  width: 30px;
  margin-right: 20px;
  /* height: 50px;
  object-fit:cover; */
}
















/* .container {
  position: relative;
  font-family: 'Poppins', sans-serif;
  background-color: #0E0E0E;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.toggleButton {
  width: 65%;
  background-color: rgb(0, 123, 255, 0);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: Poppins;
  font-weight: 200;
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  letter-spacing: -0.22px;
  background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  margin-left: 20px;
}

.drawer {
  overflow: hidden;
  max-height: 0;
  background-color: rgb(241, 241, 241, 0);
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 20px;
}

.drawer.open {
  max-height: 600px; 
  padding: 10px 20px;
} */

/* Ensure container grows to fit the drawer */
.container {
  position: relative;
  font-family: 'Poppins', sans-serif;
  background-color: #0E0E0E;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px; /* Prevent overlap with sections below */
}

.toggleButton {
  width: 65%;
  background-color: rgb(0, 123, 255, 0);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: Poppins;
  font-weight: 200;
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  letter-spacing: -0.22px;
  background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  margin-left: 20px;
}

/* Drawer remains in the document flow and pushes content down */
.drawer {
  overflow: hidden;
  max-height: 0; /* Collapsed height */
  background-color: rgb(241, 241, 241, 0); /* Match your design */
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 20px; /* Adjust for collapsed state */
}

/* Expanded drawer */
.drawer.open {
  max-height: 600px; /* Adjust as needed */
  padding: 10px 20px; /* Ensure padding expands with content */
}

/* Ensure parent section does not overlap with others */
.service-list {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 100%;
  margin-top: 100px; /* Adjust spacing as required */
  margin-bottom: 700px; /* Prevent overlap */
}
























































@media screen and (max-width: 480px) {

  body {
    /* max-width: 480px; */
    overflow-x: hidden;
  }

  header {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
    margin: 0%;
    padding: 0;
  }

  .menu-line {
    height: 1px;
  }

  .menu-line-2 {
    height: 1px;
    transform: scaleX(0.3); 
    transform-origin: left;
    transition: transform 0.5s ease;
  }
  
  #menuBtn:hover .menu-line-2 {
    transform: scaleX(1);
  }

  .logo {
    height: 40px;
    margin: 10px;
    /* align-items: end; */
  }

  .top-contact {
    display: none;
  }

  #menuList {
    position: absolute;
    top: 0;
    left: 0; /* Start off-screen to the right */
    height: 100vh;
    width: 95vw;
    background: linear-gradient(270deg, #E2BB90 50%, #9B6932 50%,);
    /* background-color: #e2bb90; */
    list-style: none;
    padding: 10% 65% 50% 100%;
    transform: translateX(-120%);
    transition: transform 1s ease-in-out; /* Smooth slide effect */
    z-index: 3;
    display: grid; /* Ensure proper alignment */
    justify-content: left;
    margin: 0 auto;
  }

  .menuOpen-line {
    position: relative;
    top: -27px;
    width: 65%;
    margin: 0px;
    padding: 0px;
    padding-left: 50px;
  }

  #menuList li {
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-left: 50px;
    margin: 0px 0px 0px 0px;
  }
  
  #menuList a {
    color: #0E0E0E;
    margin: 0px;
    padding: 0px;
    text-align: left;
  }

  #menuList p {
    margin: 0px;
    text-align: left;
  }


  a {
    margin: 0px;
    padding: 0px;
    gap: 0px;
  }

























  .first-home {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .first-p-1 {
    display: none;
  }
  .first-p-2 {
    display: none;
  }
  .type-text {
    display: none;
  }

  .second-home {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* width: 10px; */
    /* margin: 20px; */
    gap: 0px;
    margin-top: 100px;
  }

  .index-h3 {
    font-size: 18px;
    width: 80vw;
    margin-bottom: 40px;
  }

  .second-home p {
    width: 80vw;
    margin: 0px;
    
  }

  .line-container {
    display: none;
  }

  .third-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin-top: 100px;
  }

  .third-p {
    font-size: 16px;
    width: 80vw;
    margin: 20px;
  }

  .third-home img {
    width: 80vw;
  }
















  .first-services {
    padding: 40% 0% 0% 0%;
  }

  .first-services p {
    font-size: 16px;
    width: 80vw;
    margin-bottom: 100px;
  }

  .first-services h3 {
    font-size: 18px;
    margin-bottom: 200px;
  }

  .text {
    font-size: 10px;
    width: 170px;
  }














  .first-about {
    padding-top: 40%;
  }

  .second-about h3 {
    font-size: 24px;
  }

  .second-about p {
    font-size: 16px;
  }

  .third-about h3 {
    font-size: 24px;
  }

  .third-about p {
    font-size: 16px;
  }
















  h1 {
    font-size: 72px;
    text-align: center;
  }

  h2 {
    font-size: 32px;
  }

  p {
    font-size: 14px;
    margin: 0px;
  }

  #first-p-1 {
    font-size: 12px;
  }

  #first-p-2 {
    font-size: 12px;
  }


}






@media screen and (max-width: 850px) and (min-width: 481px) {
  
  /* body {
    max-width: 480px;
  } */

  header {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
    margin: 0%;
    padding: 0;
  }

  .menu-line {
    height: 1px;
  }

  .menu-line-2 {
    height: 1px;
    transform: scaleX(0.3); 
    transform-origin: left;
    transition: transform 0.5s ease;
  }
  
  #menuBtn:hover .menu-line-2 {
    transform: scaleX(1);
  }

  .logo {
    height: 40px;
    margin: 10px;
    /* align-items: end; */
  }

  .top-contact {
    display: none;
  }

  #menuList {
    position: absolute;
    top: 0;
    left: 0; /* Start off-screen to the right */
    height: 100vh;
    width: 95vw;
    background: linear-gradient(270deg, #E2BB90 50%, #9B6932 50%,);
    /* background-color: #e2bb90; */
    list-style: none;
    padding: 10% 65% 50% 100%;
    transform: translateX(-120%);
    transition: transform 1s ease-in-out; /* Smooth slide effect */
    z-index: 3;
    display: grid; /* Ensure proper alignment */
    justify-content: left;
    margin: 0 auto;
  }

  .menuOpen-line {
    position: relative;
    top: -27px;
    width: 65%;
    margin: 0px;
    padding: 0px;
    /* padding-left: 50px; */
  }

  #menuList li {
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-left: 70%;
    margin: 0px 0px 0px 0px;
  }
  
  #menuList a {
    color: #0E0E0E;
    margin: 0px;
    padding: 0px;
    text-align: left;
  }

  #menuList p {
    margin: 0px;
    text-align: left;
  }


  a {
    margin: 0px;
    padding: 0px;
    gap: 0px;
  }













  .first-home {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .first-p-1 {
    display: none;
  }
  .first-p-2 {
    display: none;
  }
  .type-text {
    display: none;
  }

  .second-home {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0px;
    margin-top: 100px;
  }

  .index-h3 {
    font-size: 18px;
    width: 80vw;
    margin-bottom: 40px;
  }

  .second-home p {
    width: 80vw;
    margin: 0px;
    
  }

  .line-container {
    display: none;
  }

  .third-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin-top: 100px;
  }

  .third-p {
    font-size: 16px;
    width: 80vw;
    margin: 20px;
  }

  .third-home img {
    width: 80vw;
  }










  .first-services {
    padding: 20% 0% 0% 0%;
  }

  .first-services p {
    font-size: 16px;
    width: 80vw;
    /* margin: 0; */
    margin-bottom: 100px;
  }

  .first-services h3 {
    font-size: 18px;
    margin-bottom: 200px;
  }

  .text {
    font-size: 10px;
    width: 170px;
  }







  .first-about {
    padding-top: 20%;
  }

  .second-about h3 {
    font-size: 24px;
  }

  .second-about p {
    font-size: 16px;
  }

  .third-about h3 {
    font-size: 24px;
  }

  .third-about p {
    font-size: 16px;
  }




































  h1 {
    font-size: 72px;
    text-align: center;
  }

  h2 {
    font-size: 32px;
  }

  p {
    font-size: 14px;
    margin: 0px;
  }

  #first-p-1 {
    font-size: 12px;
  }

  #first-p-2 {
    font-size: 12px;
  }

}




/* 
.first-services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
}

.services-h3 {
  width: 70vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 40px;
  margin: 20px;
}

.service-list {
  display: flex;
  width: 100vw;
  flex-direction: column;
  align-items: left;
  margin-top: 0;
  margin-bottom: 200px;
}

.service-list p {
  align-self: stretch;
  text-align:left;
  font-family: Poppins;
  font-weight: 200;
  font-size: 14px;
  font-style: normal;
  font-weight: 275;
  line-height: 150%; 
  letter-spacing: -0.22px;
  background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 55vw;
  padding: 10px;
  margin: 0;
  transition: margin ease 1s ;
}





.list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-icon-drawer {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: center;
  align-content: center;
  justify-items: center;
  justify-content: center;
  gap: 20px;
}

.list-icon p {
  font-size: 16px;
}




.hor-line {
  width: 650px;
  height: 1px;
  background: linear-gradient(90deg, #E2BB90 0%, #9B6932 100%);
}

.hor-line-short {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, #E2BB90 0%, #9B6932 100%);
  transform: scaleX(0.5); 
  transition: transform 0.5s ease;
}

.services-h3:hover .hor-line-short{
  transform: scaleX(2); 
}

.circle {
  width: 10px;
  height: 10px;
  background: linear-gradient(90deg, #E2BB90 0%, #9B6932 100%);
  border-radius: 100%;
}




.services-icons {
  width: 30px;
}

.services-icons-1 {
  width: 30px;
  margin-right: 20px;
}




.container {
  font-family: 'Poppins', sans-serif;
  background-color: #0E0E0E;
}

.toggleButton {
  width: 65%;
  background-color: rgb(0, 123, 255, 0);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: Poppins;
  font-weight: 200;
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  letter-spacing: -0.22px;
  background: linear-gradient(180deg, #9B6932 0%, #E2BB90 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  margin-left: 20px;
}

.drawer {
  overflow: hidden;
  max-height: 0;
  background-color: rgb(241, 241, 241, 0);
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 20px;
}

.drawer.open {
  max-height: 600px; 
  padding: 10px 20px;
} */