/* ---------------------------------- */
/*       FONT IMPORTS + BASE STYLES   */
/* ---------------------------------- */

@font-face {
  font-family: neu;
  src: url(./NeueHaasDisplayMediu.ttf);
}

@font-face {
  font-family: neu;
  font-weight: 100;
  src: url(./NeueHaasDisplayLight.ttf);
}

@font-face {
  font-family: neu;
  font-weight: 200;
  src: url(./NeueHaasDisplayRoman.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: neu;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #e4e4e4;
}

/* ---------------------------------- */
/*         TYPOGRAPHY & COLORS        */
/* ---------------------------------- */

.poppins {
  font-family: "poppins";
}

.yellow-txt {
  color: #FFD700;
}

.bg-black {
  background-color: #000;
}

/* ---------------------------------- */
/*            ANIMATIONS              */
/* ---------------------------------- */

@keyframes amoeba {
  0% {
    border-radius: 50% 45% 55% 50%;
    transform: translate(-50%, -60%) scale(1);
  }

  50% {
    border-radius: 40% 50% 60% 45%;
    transform: translate(-50%, -50%) scale(1.3);
  }

  100% {
    border-radius: 50% 55% 45% 50%;
    transform: translate(-50%, -40%) scale(1);
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }

  80% {
    transform: translateX(15px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  80% {
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

/* ---------------------------------- */
/*        STRUCTURE & COMPONENTS      */
/* ---------------------------------- */

header {
  background-color: white;
}

nav {
  background-color: transparent;
  transition: background-color 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.navbar {
  width: 100%;
  max-width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px;
  flex-wrap: wrap;
  z-index: 1000;
}

.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

nav.scrolled {
  background-color: #000000;
}

nav.scrolled .nav-links a {
  color: #fff;
  text-decoration: none;
}

nav.scrolled .logo {
  opacity: 1;
  visibility: visible;
}

.nav-links {
  display: flex;
  gap: 40px;
}

.nav-links a {
  color: #000;
  transition: color 0.3s ease;
  text-decoration: none;
}

.nav-links a:hover {
  color: #FFD700;
}

.active {
  font-weight: bold;
}

.custom-btn {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.custom-btn h4 {
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.459);
  border-radius: 50px;
  font-weight: 500;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.479);
  position: relative;
  overflow: hidden;
}

.custom-btn h4::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  left: 0;
  bottom: -100%;
  border-radius: 50%;
  transition: all ease 0.3s;
}

.custom-btn h4:hover::after {
  bottom: 0;
  border-radius: 0;
}

.custom-btn h4 a {
  color: #FFD700;
  text-decoration: none;
  position: relative;
  z-index: 9;
}

.custom-btn h4:hover a {
  color: white;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.menu-toggle span {
  height: 3px;
  width: 25px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 0 20px;
  overflow: hidden;
  background-color: #fff;
  transition: max-height 0.4s ease;
}

.mobile-menu a {
  padding: 12px 20px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #eee;
  transition-duration: 0.4s;
}

.mobile-menu a:hover {
  background-color: #FFD700;
  color: black;
}

.cursor-shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 255, 255, 0.2));
  filter: blur(45px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: screen;
  animation: amoeba 4s ease-in-out infinite alternate;
}

/* ---------------------------------- */
/*             MAIN TEXT              */
/* ---------------------------------- */

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 40vh; /* enough room for center on mobile */
  padding: 20px;
}


.main-heading {
  color: #777;
  text-transform: uppercase;
  line-height: 85px;
}

.main-heading-primary {
  display: block;
  font-size: 128px;
  font-weight: bold;
  color: #000000;
  letter-spacing: 15px;
  animation: moveInLeft 1s ease-out;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.main-heading-secondary {
  display: block;
  font-size: 44px;
  font-weight: 300;
  text-align: center;
  letter-spacing: 46px;
  color: #FFD700;
  animation: moveInRight 1s ease-out;
  position: relative;
  left: 20px;
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.7),
    0 0 10px rgba(255, 215, 0, 0.5);
}

.center-heading .heading {
  width: 100%;
  text-align: center;
  padding: clamp(60px, 15vh, 200px) 20px clamp(30px, 8vh, 60px);
  box-sizing: border-box;
  padding-top: 300px 20px;
}

.center-heading .heading h1 {
  text-transform: capitalize;
  font-weight: 600;
  font-size: clamp(10px, 2vw, 16px);
  color: #303030;
  letter-spacing: 1px;
  margin: 0;
}


/* ---------------------------------- */
/*         DESKTOP ( > 1025px )       */
/* ---------------------------------- */

@media (min-width: 1025px) {
  .center-heading {
    padding: 150px;
    height: 100vh;
    text-align: center;
  }
}

/* ---------------------------------- */
/*        TABLET (768px–1024px)       */
/* ---------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .menu-toggle {
    display: flex;
  }

  .nav-links,
  .custom-btn {
    display: none;
  }

  .mobile-menu {
    display: flex;
    max-height: 0;
  }

  .mobile-menu.active {
    max-height: 500px;
  }

  .center-heading {
    padding: 100px;
    height: auto;
    text-align: center;
  }

  .center-heading .heading {
    padding: 120px 40px;
  }

  .main-heading-primary {
    font-size: 10vw;
    letter-spacing: 10px;
  }

  .main-heading-secondary {
    font-size: 5vw;
    letter-spacing: 20px;
    left: 0;
  }
}

/* ---------------------------------- */
/*          MOBILE ( < 768px )        */
/* ---------------------------------- */

@media (max-width: 767px) {
  .menu-toggle {
    display: flex;
  }

  .nav-links,
  .custom-btn,
  .logo img {
    display: none;
  }

  .mobile-menu {
    display: flex;
    max-height: 0;
  }

  .mobile-menu.active {
    max-height: 500px;
  }

  .navbar {
    background-color: black;
  }

  .main {
    top: 35%;
    padding: 0 15px;
  }

  .main-heading-primary {
    font-size: 12vw;
    letter-spacing: 2px;
  }

  .main-heading-secondary {
    font-size: 6vw;
    letter-spacing: 2px;
    left: 0;
  }

  .center-heading {
    padding: 50px 20px;
    padding-top: 0;
    height: auto;
  }

  .center-heading .heading {
    padding: 60px 20px;
  }

  .center-heading .heading h1 {
    font-size: clamp(16px, 4vw, 22px);
    text-align: center;
  }
}

/* for extra large laptops */
@media (min-width: 1025px) and (max-width: 1366px) {
  .center-heading .heading {
    padding: 70px 80px;
  }

  .main {
    min-height: 30vh;
  }
}



/* section 2 styling */
/* Container styles */
.section2 {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200px;
  gap: 400px;
}

#container1 {
  color: #ffffff;

  font-size: 99px;
  font-weight: bold;
  position: relative;
  top: -100px;
  line-height: 100px;
}

/* A + flip line styling */
.flip-line {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Static A */
.static-a {
  color: hsl(0, 0%, 100%);
  text-transform: lowercase;
}

/* Flip container */
#flip {
  height: 130px;
  overflow: hidden;
  display: inline-block;
  font-weight: 100;

}

/* Words container */
.flip-items {
  animation: slide 6s ease-in-out infinite;
}

/* Animated items */
.flip-items>div {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: hsl(51, 100%, 50%);
  padding-left: 10px;
}

/* Animation keyframes */
@keyframes slide {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-130px);
  }

  45% {
    transform: translateY(-130px);
  }

  50% {
    transform: translateY(-260px);
  }

  70% {
    transform: translateY(-260px);
  }

  75% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

/* video section2 */



.videobox video {
  height: 224px;
  object-fit: cover;
  /* This ensures the video covers the area without stretching */
}

.videobox {
  position: relative;
  top: 100px;
}

.videobox p {
  color: white;
  padding-top: 50px;
  font-size: 24px;
  width: 400px;
}

/* Media Queries for Responsiveness */

/* For small devices like mobile (max-width: 600px) */
@media (max-width: 600px) {
  .section2 {
    padding: 60px 10px;
    /* Reduced padding for small screens */
    flex-direction: column;
    gap: 20px;
  }

  #container1 {
    font-size: 24px;
    line-height: 1.3;

    text-align: center;
  }

  .videobox {
    position: relative;
    top: -40px;
    width: 150px;
  }

  .videobox p {
    font-size: 16px;
    width: 100%;
  }

  .flip-items {
    font-size: 42px;
  }
}

/* For medium devices like tablets (max-width: 900px) */
@media (max-width: 900px) {
  .section2 {
    padding: 100px 20px;
    flex-direction: column;
    gap: 30px;
  }

  #container1 {
    font-size: 50px;
    line-height: 1.3;
    top: -50px;
  }

  .videobox {
    position: relative;
    top: -40px;
    width: 350px;
  }

  .videobox p {
    font-size: 18px;
    width: 80%;
  }
}

/* Devices between 901px and 999px */
@media (min-width: 901px) and (max-width: 999px) {
  .section2 {
    flex-direction: column;
    padding: 120px 20px;
    gap: 30px;
  }

  #container1 {
    font-size: 50px;
    line-height: 1.4;
    top: 0;
    text-align: center;
  }

  .videobox video {
    width: 100%;
    height: auto;
  }

  .videobox p {
    font-size: 18px;
    width: 90%;
    text-align: center;
    padding-top: 20px;
  }
}

/* Devices between 1000px and 1199px */
@media (min-width: 1000px) and (max-width: 1199px) {
  .section2 {
    padding: 120px 40px;
    flex-direction: column;
    gap: 60px;
    align-items: center;
    text-align: center;
  }

  #container1 {
    font-size: 60px;
    line-height: 1.3;
    top: 0;
    text-align: center;
  }

  .videobox {
    width: 80%;
    max-width: 500px;
  }

  .videobox video {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .videobox p {
    font-size: 18px;
    width: 100%;
    text-align: center;
    padding-top: 10px;
  }

  .flip-items {
    font-size: 16px;
  }
}

@media (min-width: 1001px) and (max-width: 1199px) {
  .section2 {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 120px 60px;
    gap: 80px;
  }

  #container1 {
    font-size: 60px;
    line-height: 1.3;
    top: 0;
    text-align: left;
  }

  #flip {
    height: 90px;
  }

  .flip-items>div {
    height: 90px;
    font-size: 30px;
  }

  .videobox {
    max-width: 350px;
    position: static;
  }

  .videobox video {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .videobox p {
    font-size: 18px;
    text-align: left;
    padding-top: 20px;
    line-height: 1.4;
  }
}


/* For large devices (min-width: 1000px) */
@media (min-width: 1000px) {
  .section2 {
    flex-direction: row;
    /* Keep side by side layout */
    align-items: center;
    justify-content: center;
    padding: 150px 50px;
    gap: 100px;
    /* Balanced gap */
  }

  #container1 {
    font-size: 70px;
    line-height: 1.3;
    top: -50px;
    text-align: left;
  }

  .videobox video {
    width: 400px;
    height: auto;
  }

  .videobox p {
    font-size: 20px;
    width: 100%;
    text-align: left;
    padding-top: 20px;
  }
}


/* For extra large screens (min-width: 1200px) */
@media (min-width: 1200px) {
  .section2 {
    padding: 200px;
    gap: 350px;
  }

  #container1 {
    font-size: 99px;
    line-height: 100px;
    top: -100px;
  }

  .videobox p {
    font-size: 24px;
    width: 400px;
  }
}

/* section 3 */

/* section 3 horizontal scroll */
.section3 {
  color: black;
  
  overflow-x: hidden;
  font-family: "poppins";
  height: 100%;
  /* Ensure body takes full height */
}

.section3 .wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.section3 .painel {
  min-width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  background-color: #000000;
}
.section3 .painel img{
  width: 590px;
  height: 490px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.section3 .painel h2{
font-size: 64px;
color:#f1c40f ;
}
.section3 .painel p{
width: 650px;
padding-top: 50px;
font-weight: 300;
word-spacing: 3px;
color: white;
}


/* Tablets (768px to 1024px) */
@media (max-width: 1024px) {
  .section3 .painel {
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
    text-align: center;
  }

  .section3 .painel h2 {
    font-size: 48px;
  }

  .section3 .painel p {
    max-width: 90%;
    padding: 20px;
  }

  .section3 .painel img {
    width: 300px;
    height: 350px;
  }
}

/* Mobile Devices (max-width: 767px) */
@media (max-width: 767px) {
  .section3  {
    display: none;
  }

  
}



/* section4 */
/* .section4{
  width: 100%;
  height: 103vh;
  padding: 0;
  margin: 0;
  padding-top: 50px;
}
#moving-text{
    white-space: nowrap;
    overflow-x: auto;
}
#moving-text::-webkit-scrollbar{
    display: none;
}
#moving-text h1{
    font-size: 9vw;
    display: inline-block;
}
.con{
    white-space: nowrap;
    display: inline-block;
    animation-name: move;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
#gola{
    height: 70px;
    width: 70px;
    display: inline-block;
    background-color: #FFD700;
    border-radius: 50%;
    margin: 1vw 2vw;
}
@keyframes move {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
} */


#page2 {
  min-height: 100vh;
  width: 100%;
  color: black;
  padding: 8vw 0;
  position: relative;
  background-color: white;
}

#moving-text {
  white-space: nowrap;
  overflow-x: auto;
}

#moving-text::-webkit-scrollbar {
  display: none;
}

#moving-text h1 {
  font-size: 9vw;
  display: inline-block;
}

.con {
  white-space: nowrap;
  display: inline-block;
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#gola {
  height: 70px;
  width: 70px;
  display: inline-block;
  background-color: #FFD700;
  border-radius: 50%;
  margin: 1vw 2vw;
}

@keyframes move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

#page2-bottom {
  height: 80vh;
  width: 100%;
  /* background-color: aliceblue; */
  padding: 4.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#page2-bottom h1 {
  font-size: 4vw;
  width: 55%;
  line-height: 4vw;
  z-index: 9;
}

#bottom-part-2 {
  width: 20%;
  /* background-color: aqua; */
}

#bottom-part-2 img {
  width: 100%;
  border-radius: 15px;
}

#bottom-part-2 p {
  font-weight: 200;
  margin-top: 2vw;
  font-size: 1vw;
}

#page2 #gooey {
  height: 30vw;
  width: 30vw;
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(to top right, #FFD700, #998100);
  top: 58%;
  left: 25%;
  filter: blur(20px);
  animation-name: gooey;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gooey {
  from {
    filter: blur(20px);
    transform: translate(10%, -10%) skew(0);
  }

  to {
    filter: blur(30px);
    transform: translate(-10%, 10%) skew(-12deg);
  }
}

#page3 {
  height: 20vh;
  width: 100%;
  background-color: #FFFFFF;
}

/* RESPONSIVE DESIGN */

/* iPad (portrait and landscape) */
@media (max-width: 1024px) {
  #page2-bottom {
    flex-direction: column;
    height: auto;
    gap: 5vw;
    z-index: 3;
  }

  #page2-bottom h1 {
    font-size: 6vw;
    width: 100%;
    line-height: 6vw;
    text-align: center;z-index: 3;
  }

  #bottom-part-2 {
    width: 80%;
    text-align: center;
    z-index: 3;
  }

  #bottom-part-2 p {
    font-size: 2vw;
    margin-top: 4vw;
    z-index: 3;
  }

  #page2 #gooey {
    height: 50vw;
    width: 50vw;
    top: 60%;
    left: 20%;
    z-index: 0;
  }
  #page3{
    display: none;
  }
}

/* Mobile Devices */
@media (max-width: 768px) {
  #page2 {
    padding: 12vw 0;
    position: relative;
    z-index: 0;
  }

  #moving-text h1 {
    font-size: 12vw;
  }

  #gola {
    height: 40px;
    width: 40px;
    margin: 2vw;
  }

  #page2-bottom {
    flex-direction: column;
    padding: 6vw;
    gap: 6vw;
    position: relative;
    z-index: 2;
  }

  #page2-bottom h1 {
    font-size: 7vw;
    width: 100%;
    line-height: 8vw;
    text-align: center;
    position: relative;
    z-index: 3;
  }

  #bottom-part-2 {
    width: 90%;
    text-align: center;
    position: relative;
    z-index: 3;
  }

  #bottom-part-2 p {
    font-size: 3.5vw;
    margin-top: 4vw;
    z-index: 3;
    position: relative;
  }

  #bottom-part-2 img {
    border-radius: 10px;
    position: relative;
    z-index: 3;
  }

  #page2 #gooey {
    height: 60vw;
    width: 60vw;
    top: 65%;
    left: 10%;
    z-index: 0;
    position: absolute;
  }

  #page3 {
    height: 15vh;
  }
}





/* section 5 */
.section5 {
  text-align: center;
  padding: 200px 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.section5 h1 {
  font-size: 128px;
  color: white;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

.section5 a {
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}

.section5 span {
  font-size: 18px;
  background-color: #FFD700;
  color: black;
  padding: 12px 18px;
  border-radius: 50px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -10px;
}

.section5 span:hover {
  background-color: #f5db49;
  cursor: pointer;
}

/* Responsive tweaks */

@media (max-width: 1024px) {
  .section5 h1 {
    font-size: 96px;
  }

  .section5 span {
    font-size: 16px;
    padding: 6px 16px;
    top: -8px;
  }
}

@media (max-width: 768px) {
  .section5 h1 {
    font-size: 64px;
    line-height: 1.2;
  }
  .section5{
    padding: 50px 0px;
  }
  .section5 span {
    display: none;
  }
}

@media (max-width: 480px) {
  .section5 h1 {
    font-size: 48px;
  }
  .section5{
    padding: 80px 0px;
  }

  .section5 span {
    display: none;
  }
}


/* section 6 */

/* For modern browsers */
.carousel-wrapper-service {
  overflow-x: scroll; /* or auto if you want it to show only when needed */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.carousel-wrapper-service::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.section6 {
  position: relative;
  overflow: hidden;
  padding-bottom: 60px;
}

/* Heading */
.headingTitle {
  position: relative;
  text-align: center;
  padding-top: 80px;
  z-index: 2;
}

.headingTitle .what {
  color: #FFD700;
  font-style: italic;
  transform: rotate(-25deg);
  display: inline-block;
  font-weight: bold;
  font-size: 3.8rem;
  margin-left: 18px;
}

.headingTitle .rest {
  color: white;
  font-size: 3.5rem;
  font-weight: bold;
  display: inline-block;
}

/* Background "Services" heading */
.section-heading-services {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
}

/* Carousel */
.carousel-wrapper-service {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 60px 0;
  position: relative;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.carousel-inner {
  display: flex;
  width: fit-content;
}

.carousel-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: scrollCarousel 20s linear infinite;
}

@keyframes scrollCarousel {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Card Style */
.card-services {
  background: linear-gradient(to bottom, #fff, #d3d3d3);
  border-radius: 20px;
  color: #000;
  padding: 40px 25px;
  min-width: 250px;
  max-width: 250px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  position: relative;
}

.carousel-track .card-services:nth-child(odd) {
  margin-top: 5%;
}

.carousel-track .card-services:nth-child(even) {
  margin-bottom: 5%;
}

.card-services h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.card-services p {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 25px;
}

.cta {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #000;
  text-decoration: none;
}

.cta .services-arrow {
  display: inline-block;
  background: #FFD700;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* ---------- RESPONSIVE STYLES ---------- */

/* Tablets */
@media (max-width: 1024px) {
  .headingTitle .what {
    font-size: 3rem;
  }

  .headingTitle .rest {
    font-size: 2.8rem;
  }

  .section-heading-services {
    font-size: 12rem;
    top: 70%;
  }

  .card-services {
    min-width: 220px;
    max-width: 220px;
    padding: 30px 20px;
  }

  .carousel-track {
    gap: 30px;
    animation-duration: 30s;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .headingTitle .what,
  .headingTitle .rest {
    font-size: 2rem;
  }

  .section-heading-services {
    font-size: 6rem;
    top: 75%;
  }

  .card-services {
    min-width: 200px;
    max-width: 200px;
    padding: 24px 18px;
  }

  .carousel-track {
    gap: 20px;
    animation-duration: 40s;
  }

  .card-services h3 {
    font-size: 1rem;
  }

  .card-services p {
    font-size: 0.85rem;
  }

  .cta .services-arrow {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .headingTitle .what,
  .headingTitle .rest {
    font-size: 1.5rem;
  }

  .section-heading-services {
    font-size: 4rem;
    top: 80%;
  }

  .card-services {
    min-width: 180px;
    max-width: 180px;
    padding: 20px 16px;
  }

  .carousel-track {
    gap: 16px;
    animation-duration: 45s;
  }

  .card-services h3 {
    font-size: 0.95rem;
  }

  .card-services p {
    font-size: 0.8rem;
  }

  .cta {
    font-size: 0.85rem;
  }

  .cta .services-arrow {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
  }
}


/* section7 */

.section7 {
  background: #000000;
  text-align: center;
  color: white;
  line-height: 100px;
  padding: 100px 5vw;
  /* responsive side padding */
}

.section7 h1 {
  font-weight: bold;
  font-size: 18px;
}

.section7 ul {
  text-align: center;
  position: relative;
  top: -40px;

}

.section7 li {
  font-weight: bold;
  font-size: 4.8vw;
  /* responsive font size */

}

.section7 li.active {
  color: #FFD700;
  font-weight: 100;
  opacity: 1;
}


/* Responsive styles */

/* For screens from 1024px and below (tablets, etc.) */
@media (max-width: 1024px) {
  .section7 {
    padding: 80px 4vw;
    line-height: 90px;  /* Adjust line-height for smaller screens */
  }

  .section7 h1 {
    font-size: 16px;
  }

  .section7 li {
    font-size: 5vw;  /* Scale font size a bit larger */
  }
}

/* For mobile screens (max-width: 768px) */
@media (max-width: 768px) {
  .section7 {
    padding: 60px 4vw;
    line-height: 80px;  /* Adjust line-height further for smaller screens */
  }

  .section7 h1 {
    font-size: 14px;
  }

  .section7 li {
    font-size: 6vw;  /* Larger font size to fill the space */
  }
}

/* For very small screens (max-width: 480px) */
@media (max-width: 480px) {
  .section7 {
    padding: 40px 4vw;
    line-height: 70px;  /* Further adjust line-height */
  }

  .section7 h1 {
    font-size: 12px;
  }

  .section7 li {
    font-size: 7vw;  /* Increase font size to make it more readable */
  }
}


/* Button Base Styles */
.section7 button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
}

.section7 #container {
  position: relative;
  top: -30px;
}

/* Learn More Button */
.section7 button.learn-more {
  width: 12rem;
  height: auto;
}

/* Circle */
.section7 button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #FFD700;
  border-radius: 1.625rem;
}

/* Icon */
.section7 button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #000000;
}

/* Arrow */
.section7 button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
  position: absolute;
}

.section7 button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: '';
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #000000;
  border-right: 0.125rem solid #000000;
  transform: rotate(45deg);
}

/* Button Text */
.section7 button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

/* Hover Effects */
.section7 button.learn-more:hover .circle {
  width: 100%;
}

.section7 button.learn-more:hover .circle .icon.arrow {
  background: #000000;
  transform: translate(1rem, 0);
}

.section7 button.learn-more:hover .button-text {
  color: #000000;
}

/* Footer base styles */
footer {
  padding: 40px 20px 0 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.footer-parallax {
  position: relative;
  z-index: 50;
  background: url('./imgs/footerBg.png') no-repeat center center / cover;
}

.foot-content {
  font-size: larger;
  font-weight: 900;
}

.f-email-input input {
  border: none;
  border-bottom: 1px solid #000;
  background-color: transparent;
  color: #999;
  outline: none;
}

/* Text sections */
.section7 .primary-heading,
.section7 .secondary-heading {
  font-size: 18px;
  word-spacing: 3px;
  letter-spacing: 1px;
  padding-bottom: 30px;
}

.footer-top-row-sec-col {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
}

/* Heading style */
footer .big-heading {
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  border-bottom: 1px solid gray;
  color: white;
  width: 100%;
  margin: 0 auto;
  overflow-wrap: break-word;
}

/* Footer list styles */
footer .list ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  color: white;
  overflow: hidden;
  /* gap: 20px; */
}

footer .list ul a:hover {
  color: #000;
}

footer .list ul li {
  font-size: 12px;
  padding: 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

footer .list ul li i {
  font-size: 12px;
}

/* Hide scrollbars in all browsers */
footer .list ul::-webkit-scrollbar {
  display: none;
}
footer .list ul {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Large screens */
@media (min-width: 1025px) {
  footer .big-heading {
    font-size: 145px;
  }

  footer .list ul li {
    font-size: 12px;
  }

  footer .list ul li i {
    display: none;
  }

  footer .list ul li span {
    display: inline;
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  footer .big-heading {
    font-size: 96px;
  }

  footer .list ul {
    gap: 40px;
  }

  footer .list ul li {
    font-size: 16px;
  }

  footer .list ul li i {
    display: none;
  }

  footer .list ul li span {
    display: inline;
  }
}

/* Mobile screens */
@media (max-width: 767px) {
  footer .big-heading {
    font-size: 64px;
    padding-bottom: 15px;
  }

  footer .list ul {
    gap: 30px;
  }

  footer .list ul li {
    font-size: 14px;
  }

  footer .list ul li i {
    display: inline-block;
    font-size: 14px;
  }

  footer .list ul li span {
    display: none;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  footer .big-heading {
    font-size: 48px;
    padding-bottom: 10px;
  }

  footer .list ul {
    gap: 20px;
  }

  footer .list ul li i {
    font-size: 14px;
  }

  footer .list ul li span {
    display: none;
  }
}


/* contact page */


.contact-section {
  padding: 80px;
  background-color: black;
}

.contact-section .contact-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  gap: 80px;
}

.contact-section .left-box {
  flex: 1;
  min-width: 300px;
}

.contact-section .right-box {
  flex: 1;
  min-width: 300px;
}

.contact-section .email-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000;
  font-size: 16px;
  margin-bottom: 30px;
  width: 525px;
}

.contact-section .icon {
  background-color: #FFD700;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-section .icon i {
  color: white;
  font-size: 32px;
}

.contact-section .contact-text h2 {
  margin-bottom: 10px;
  font-size: 44px;
  font-family: "poppins";
  text-transform: capitalize;
  font-weight: 300;
  color: white;
}

.contact-section .contact-text p {
  margin: 10px 0;
  line-height: 1.6;
  width: 525px;
  font-family: 16px;
  font-weight: 100;
  text-align: justify;
  color: rgb(197, 197, 197);
}

.contact-section .contact-text h4 {
  margin-top: 20px;
  font-size: 16px;
  color: white;
}

.contact-section .social-icons {
  margin-top: 20px;
}

.contact-section .social-icons a {
  margin-right: 10px;
  display: inline-block;
}


.contact-section form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-section form input,
form textarea {
  padding: 12px;
  border: 1px solid #FFD700;
  background: transparent;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
}

.contact-section form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-section form button {
  padding: 12px;
  border: none;
  background-color: #fff;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;
}

.contact-section form button:hover {
  background-color: #FFD700;
  color: #000;
}

.contact-section .form-row {
  display: flex;
  gap: 15px;
}

.contact-section .form-row input {
  flex: 1;
}

.contact-section .email-text h1 {
  font-size: 18px;
  font-family: "poppins";
  text-transform: capitalize;
  font-weight: 600;
}

.contact-section .email-text p {
  font-size: 12px;
  font-family: "poppins";
  text-transform: capitalize;
  font-weight: 200;
}

.contact-section .contact-text {
  padding-top: 30px;
}

.contact-section .social-icons i {
  font-size: 24px;
  padding: 10px 13px;
  background-color: #f5db49;
  border-radius: 50%;
  color: black;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  margin-right: 10px; /* spacing between icons */

}

.contact-section .social-icons i:hover {
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);

  color: white;
  transform: scale(1.1);
}

/* Responsiveness for smaller devices */

/* For screens below 1024px (tablet and smaller screens) */
@media (max-width: 1024px) {
  .contact-section .contact-container {
    flex-direction: column; /* Stack left and right boxes vertically */
    gap: 40px;
    padding: 40px 20px;
  }

  .contact-section .email-box {
    width: 100%;
    margin: 10px 0;
  }

  .contact-section .contact-text h2 {
    font-size: 36px;
  }

  .contact-section .contact-text p {
    width: 100%;
    font-size: 14px;
  }

  .contact-section .contact-text h4 {
    font-size: 14px;
  }

  .contact-section .social-icons a {
    font-size: 20px;
  }

  .contact-section form input,
  .contact-section form textarea {
    font-size: 16px;
    padding: 10px;
  }

  .contact-section form button {
    font-size: 16px;
    padding: 10px;
  }
}

/* For mobile screens below 768px */
@media (max-width: 768px) {
  .contact-section .contact-container {
    gap: 20px;
    padding: 30px 15px;
  }

  .contact-section .email-box {
    width: 100%;
  }

  .contact-section .contact-text h2 {
    font-size: 30px;
  }

  .contact-section .contact-text p {
    font-size: 13px;
  }

  .contact-section form input,
  .contact-section form textarea {
    font-size: 15px;
    padding: 12px;
  }

  .contact-section form button {
    font-size: 15px;
    padding: 12px;
  }

  .contact-section .social-icons a {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .contact-section {
    padding: 30px 20px; /* More generous padding all around */
  }

  .contact-section .contact-container {
    flex-direction: column;
    gap: 30px;
    padding: 0; /* Padding already given to parent */
  }

  .contact-section .email-box {
    width: 100%;
    padding: 18px;
    margin: 10px 0;
    font-size: 14px;
  }

  .contact-section .contact-text {
    padding-top: 10px;
  }

  .contact-section .contact-text h2 {
    font-size: 24px;
    margin-bottom: 12px;
    line-height: 1.3;
  }

  .contact-section .contact-text p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
  }

  .contact-section .contact-text h4 {
    font-size: 14px;
    margin-top: 10px;
  }

  .contact-section form {
    width: 100%;
    gap: 12px;
  }

  .contact-section .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .contact-section form input,
  .contact-section form textarea {
    padding: 14px;
    font-size: 14px;
    width: 100%;
  }

  .contact-section form textarea {
    min-height: 100px;
  }

  .contact-section form button {
    padding: 14px;
    font-size: 15px;
    margin-top: 10px;
  }

  .contact-section .social-icons {
    margin-top: 20px;
  }

  .contact-section .social-icons i {
    font-size: 20px;
    padding: 10px 12px;
  }
}

/* services page */
.service-box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 80px;
}

.card {
  background-color: #000;
  color: #fff;
  padding: 2rem;
  border-radius: 1.5rem;
  width: 300px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card .price {
  font-size: 2rem;
  font-weight: 700;
  color: #ffd700;
}

.card .price span {
  font-size: 0.9rem;
  color: #999;
  font-weight: 400;
}

.card hr {
  margin: 1.2rem 0;
  border: 0.5px solid #333;
}

.card ul {
  list-style: none;
  margin-bottom: 1.5rem;
}

.card ul li {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.card ul li span {
  color: #ffd700;
  margin-right: 0.6rem;
  font-size: 1rem;
}

.btn {
  background-color: #ffd700;
  color: #000;
  font-weight: 600;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 0.9rem;
}

.btn:hover {
  background-color: #f7c800;
}

/* ***** about page content ***** */
.about-sec2-heading {
  font-size: 98px;
  line-height: 100px;
  font-weight: 900;
  margin: 7%;
  border-bottom: gray solid 1px;
  padding: 40px 0;
}

.about-sec2-title2 {
  margin: 0 7% 7% 7%;
  color: black;
}

.about-sec2-sec2 {
  margin: 10%;
}

.about-sec2-sec2 h1 {
  font-size: 22px;
}

.about-sec2-sec2 p {
  font-size: 14px;
  font-weight: 300;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .about-sec2-heading {
    font-size: 72px;
    line-height: 80px;
    margin: 5%;
    padding: 30px 0;
  }

  .about-sec2-title2 {
    margin: 0 5% 5% 5%;
  }

  .about-sec2-sec2 {
    margin: 7%;
  }

  .about-sec2-sec2 h1 {
    font-size: 20px;
  }

  .about-sec2-sec2 p {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .about-sec2-heading {
    font-size: 52px;
    line-height: 60px;
    margin: 4%;
    padding: 25px 0;
  }

  .about-sec2-title2 {
    margin: 0 4% 4% 4%;
  }

  .about-sec2-sec2 {
    margin: 5%;
  }

  .about-sec2-sec2 h1 {
    font-size: 18px;
  }

  .about-sec2-sec2 p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .about-sec2-heading {
    font-size: 36px;
    line-height: 44px;
    margin: 3%;
    padding: 20px 0;
  }

  .about-sec2-title2 {
    margin: 0 3% 3% 3%;
  }

  .about-sec2-sec2 {
    margin: 3%;
  }

  .about-sec2-sec2 h1 {
    font-size: 16px;
  }

  .about-sec2-sec2 p {
    font-size: 11px;
  }
}
.about-sec3 {
  min-height: 100vh;
  width: 100%;
  padding: 8vw 0 0 0;
  position: relative;
  background-color: black;
  color: white;
}
@media (max-width: 768px) {
  .about-sec3 {
    min-height: 50vh;
    padding: 7vw 4vw 0 4vw;
  }
  .tagline{
    display: none;
  }
}
@media (max-width: 1024px) {
  .about-sec3 {
    min-height: 50vh;
    padding: 10vw 5vw 0 5vw;
  }
}
/* services page */


.service-box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 80px;
  background-color: #000; /* section background black */
  font-family: "poppins";
}

.service-box .card {
  background-color: #000;
  color: #fff;
  padding: 2rem;
  border-radius: 1.5rem;
  width: 300px;
  transition: all 0.4s ease;
  cursor: pointer;
  border: 2px solid #FFD700; /* gold outline */
  box-shadow: 0 0 0 transparent;
  transform: rotate(0deg);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.service-box .card:hover {
  box-shadow: 0 0 15px #FFD700, 0 0 30px #FFD700; /* glowing effect */
  transform: rotate(1deg); /* slight tilt */
}

.service-box .card h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-family: "poppins";
}

.service-box .card .price {
  font-size: 2rem;
  font-weight: 700;
  color: #FFD600;
  font-family: "poppins";

}

.service-box .card .price span {
  font-size: 0.9rem;
  color: #999;
  font-family: "poppins";

  font-weight: 400;
}

.service-box .card hr {
  margin: 1.2rem 0;
  border: 0.5px solid #333;
}

.service-box  .card ul {
  list-style: none;
  margin-bottom: 1.5rem;
  font-family: "poppins";

}

.service-box .card ul li {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
  font-family: "poppins";

}

.service-box  .card ul li span {
  color: #FFD600;
  margin-right: 0.6rem;
  font-size: 1rem;
  font-family: "poppins";

}

.service-box .btn {
  background-color: #d3d3d3;
  color: #000;
  font-weight: 600;
  padding: 0.8rem 1rem;
  width: 100%; /* full width of card */
  text-align: center; /* center text */
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  display: block;
  margin: 0 auto; /* center horizontally if needed */
  font-family: "poppins";

}

.service-box  .btn:hover {
  background-color: #f9e76d; /* slight color change on hover */
}
/* Large screens (Desktops) */
@media (min-width: 1200px) {
.service-box {
  padding: 80px;
  flex-direction: row; /* Cards in a row */
}

.service-box .card {
  width: 30%; /* 3 cards in a row */
  margin: 1rem; /* Margin between cards */
}
}

/* Medium Screens (Tablets and smaller Desktops) */
@media (max-width: 1199px) and (min-width: 992px) {
.service-box {
  flex-direction: row; /* Cards in a row */
  padding: 60px;
}

.service-box .card {
  width: 45%; /* 2 cards in a row */
  margin: 1.5rem; /* Adjusted margin for spacing */
}
}

/* Small Screens (Small Tablets and Large Mobiles) */
@media (max-width: 991px) and (min-width: 768px) {
.service-box {
  flex-direction: column; /* Cards in a column */
  padding: 50px;
}

.service-box .card {
  width: 80%; /* Cards will take 80% width */
  margin: 15px auto; /* Adjusted margin */
}

.service-box .card h4 {
  font-size: 1rem;
}

.service-box .card .price {
  font-size: 1.5rem;
}

.service-box .card .price span {
  font-size: 0.8rem;
}

.service-box .card ul li {
  font-size: 1rem;
}
}

/* Small Mobile Devices */
@media (max-width: 767px) and (min-width: 480px) {
.service-box {
  padding: 30px;
  flex-direction: column;
}

.service-box .card {
  width: 90%; /* Full width for small devices */
  margin: 20px auto; /* Adjusted margin */
}

.service-box .card h4 {
  font-size: 1.1rem;
}

.service-box .card .price {
  font-size: 1.3rem;
}

.service-box .card .price span {
  font-size: 1rem;
}

.service-box .card ul li {
  font-size: 1.1rem;
}
}

/* Extra Small Screens (Mobile) */
@media (max-width: 479px) {
.service-box {
  padding: 20px;
  flex-direction: column;
}

.service-box .card {
  width: 100%; /* Full width on extra small devices */
  margin: 10px 0; /* Adjusted margin */
}

.service-box .card h4 {
  font-size: 1.2rem;
}

.service-box .card .price {
  font-size: 1.2rem;
}

.service-box .card .price span {
  font-size: 0.9rem;
}

.service-box .card ul li {
  font-size: 1.1rem;
}
}

/* heading */
.headingTitle {
  position: relative;
  text-align: center;
  padding-top: 80px;
  z-index: 2;
  background-color: #000;
}

.headingTitle .what {
  color: #FFD700;
  font-style: italic;
  transform: rotate(-25deg);
  display: inline-block;
  font-weight: bold;
  font-size: 3.8rem;
  margin-left: 22px;
}

.headingTitle .rest {
  color: white;
  font-size: 3.5rem;
  font-weight: bold;
  display: inline-block;
}
/* services showcase */
.services-section {
  padding: 60px 20px;
}

.services-section .subtitle {
  color: #353535;
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
  font-family: "poppins";
}

.services-section .title {
  font-size: 32px;
  font-weight: bold;
  margin: 10px 0 40px;
  text-align: center;
  padding: 20px;
  font-family: "poppins";
  color:black;
 
}

.services-section .highlight {
  background-color: #FFD700;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: "poppins";
}

.services-section .services-grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
  justify-content: center;
  cursor: pointer;
  padding-bottom: 100px;
}

.services-section .service-card {
  width: calc(33.333% - 20px);
  border-radius: 15px;
  padding: 30px 20px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.services-section .service-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.services-section .icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 12px ;
}

.services-section .black-card {
  background-color: black;
  color: white;
}

.services-section .black-card .icon {
  background-color: #FFD700;
  color: black;
}

.services-section .yellow-card {
  background-color: #FFD700;
  color: black;
}

.services-section .yellow-card .icon {
  background-color: black;
  color: white;
}

.services-section .gray-card {
  background-color: #D3D3D3;
  color: black;
}

.services-section .gray-card .icon {
  background-color: black;
  color: white;
}

.services-section .white-card {
  background-color: white;
  border: 1px solid #D3D3D3;
  color: black;
}

.services-section .white-card .icon {
  background-color: #D3D3D3;
  color: black;
}

.services-section .service-card h4 {
  font-size: 20px;
  font-weight: 600;
  font-family: "poppins";
  text-transform: capitalize;
  margin: 12px;
}

.services-section .service-card p {
  font-size: 14px;
  font-family: "poppins";
  margin: 12px;
}

/* Responsive Styles */

/* Mobile: Stacked layout */
@media screen and (max-width: 767px) {
  .services-section .services-grid {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .services-section .service-card {
    width: 100%;
    padding: 20px;
  }

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

  .services-section .subtitle {
    font-size: 16px;
  }

  .services-section .service-card h4 {
    font-size: 18px;
  }

  .services-section .service-card p {
    font-size: 13px;
  }
}

/* Tablet: 2 cards per row */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .services-section .service-card {
    width: calc(50% - 20px);
    padding: 25px;
  }

  .services-section .title {
    font-size: 28px;
  }

  .services-section .service-card h4 {
    font-size: 19px;
  }

  .services-section .service-card p {
    font-size: 14px;
  }
}

/* Desktop: 3 cards per row */
@media screen and (min-width: 1025px) {
  .services-section .service-card {
    width: calc(33.333% - 20px);
  }

  .services-section .title {
    font-size: 32px;
  }

  .services-section .service-card h4 {
    font-size: 20px;
  }

  .services-section .service-card p {
    font-size: 14px;
  }
}
/* service content */

.consulting-section {
display: flex;
justify-content: center;
align-items: center;
padding: 100px;
background-color: #ffffff;
}
.consulting-container {
max-width: 1200px; /* NEW */
width: 100%;
margin: 0 auto;     /* Centering */
background-color: #fff;
border-radius: 12px;
display: flex;
padding: 30px;
gap: 100px;
flex-wrap: wrap;    /* Prevent collapse on overflow */
overflow-x: hidden; /* NEW */

}

.consulting-section img {
width: 500px;
height: 500px;
border-radius: 16px;
object-fit: cover;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}

.consulting-section .profile-image {
width: 300px;
height: 500px;
border-radius: 16px;
object-fit: cover;
}

.consulting-section .content-box {
flex: 1;
min-width: 300px;
max-width: 600px; /* NEW */
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}


.consulting-section .content-box h2 {
font-size: 28px;
font-weight: 600;
margin-bottom: 16px;
width: 500px;
color: #1c1c1c;
font-family: "poppins";
}

.consulting-section .content-box p {
font-size: 15px;
color: #555;
line-height: 1.6;
margin-bottom: 20px;
font-family: "poppins";

}

.consulting-section .features {
list-style: none;
margin-bottom: 25px;
}

.consulting-section .features li {
display: flex;
align-items: center;
font-size: 15px;
color: #333;
margin-bottom: 10px;
font-family: "poppins";

}

.consulting-section .features i {
font-size: 18px;
color: #333;
margin-right: 10px;
}

.consulting-section .about-btn {
background-color: #FFD700 ;
width: 200px;
border: none;
padding: 10px 22px;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
color: black;
font-family: "poppins";

cursor: pointer;
transition: background-color 0.3s ease;
}

.consulting-section .about-btn:hover {
background-color: #ffe65b;
color:black
}
/* responsivess */
/* Responsive styles for tablets */
@media (max-width: 1024px) {
.consulting-container {
  flex-direction: row;
  align-items: center;
  gap: 40px;
  padding: 20px;
}

.content-box {
  width: 100%;

}

.content-box h2 {
  font-size: 24px;
  width: 100%;
}

.content-box p,
.features li {
  font-size: 14px;
}

.about-btn {
  margin: 0 auto;
}

.profile-image {
  width: 90%;
  height: auto;
}
}
@media (min-width: 1025px) {
.consulting-container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.content-box {
  text-align: left;
}
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
.consulting-section {
  padding: 40px 20px;
}

.consulting-container {
  padding: 20px;
  gap: 30px;
}

.content-box h2 {
  font-size: 22px;
}

.content-box p {
  font-size: 13px;
}

.features li {
  font-size: 13px;
}

.about-btn {
  width: 100%;
}

.consulting-container img{
  width: 300px;
  height: 300px;
}
}

/* Extra small screens (e.g. small mobiles) */
@media (max-width: 480px) {
.content-box h2 {
  font-size: 20px;
}
.consulting-container img{
  width: 200px;
  height: 200px;
}
.content-box p,
.features li {
  font-size: 12px;
}


.about-btn {
  font-size: 14px;
  padding: 8px 16px;
}
}


/* team-members */

@layer reset, layout;

    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    @property --direction {
      syntax: '<number>';
      initial-value: 1;
      inherits: true;
    }

    @layer reset {
      *, ::before, ::after {
        box-sizing: border-box;
      }

      :where(:not(dialog)) {
        margin: 0;
      }

      :where(html) {
        -webkit-text-size-adjust: none;
        @media (prefers-reduced-motion: no-preference) {
          scroll-behavior: smooth;
        }
      }

      :where(body) {
        min-block-size: 100svb;
        -webkit-font-smoothing: antialiased;
        background-color: #000;
        color: #fff;
      }
    }

    @layer layout {
      .section-about-member {
        display: grid;
        min-block-size: 100svb;
        padding-block: 80px;
        place-items: center;
        overflow-x: clip;
        background-color: #000;
        color: #fff;
      }

      .section-about-member-wrapper {
        display: grid;
        place-items: center;
      }

      .header-about-member {
        display: grid;
        place-items: center;
        gap: 16px;
        z-index: 2;
        text-align: center;
        @media (width >=1024px) {
          grid-area: 1/1;
        }
      }

      .hgroup {
        display: grid;
        place-items: center;
        gap: 8px;
      }

      .headline {
        font-size: 54px;
        font-weight: bold;
        text-align: center;
        @media (width >=1200px) {
          font-size: 54px;
        }
        
      }

      @media (max-width: 1023px) {
        .headline {
          display: none;
        }
        .tagline{
          font-size: 22px;
        }
      }
      
      .section-about-member-link {
        color: #fff;
        text-decoration: underline;
        font-weight: bold;
        @media (width < 1024px) {
          display: none;
        }
      }

      .cards-about-member {
        list-style: none;
        padding: 0;
        display: grid;

        @media (width < 1024px) {
          grid-auto-flow: row;
          grid-template-columns: 1fr;
          gap: 32px;
          padding: 32px;
          justify-items: center;
        }

        @media (width >=1024px) {
          --avatar-opacity: 1;
          --avatar-img-scale: 1;
          --tooltip-visibility: hidden;
          --tooltip-opacity: 0;
          --animation-state: running;
          grid-area: 1/1;
          min-block-size: 700px;
          place-items: center;

          &:has(.avatar-link-wrapper:is(:hover, :focus-visible, :active)) {
            --animation-state: paused;
            --avatar-opacity: 0.4;
          }
        }
      }

      .card-about-member {
        padding: 0;

        @media (width >=1024px) {
          --radius: min(620px, 40cqi);
          --offset-per-child: calc(360deg / (var(--nth-siblings) + 1));
          --angle-offset: calc(var(--nth-child) * var(--offset-per-child));
          --inline-ratio: 1/1;
          --block-ratio: 1/2;
          --direction: min(max(calc(cos((var(--angle) + var(--angle-offset))) * -100), -1), 1);

          grid-area: 1/1;
          translate: calc(cos((var(--angle) + var(--angle-offset))) * var(--radius) * var(--inline-ratio)) calc(sin((var(--angle) + var(--angle-offset))) * var(--radius) * var(--block-ratio) * -1);

          animation: adjust-angle linear 40s infinite reverse var(--animation-state);
        }
      }

      @keyframes adjust-angle {
        to {
          --angle: 360deg;
        }
      }

      .avatar-link-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #fff;

        &:is(:hover, :focus-visible, :active) {
          --avatar-img-scale: 1.1;
          --avatar-opacity: 1;
          --tooltip-opacity: 1;
          --tooltip-visibility: visible;
        }

        @media (width < 1024px) {
          flex-direction: column;
          gap: 16px;
          text-align: center;
        }
      }

      .visual {
        width: 240px;
        height: 240px;
        border-radius: 1rem;
        box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.1);
        overflow: hidden;
        opacity: var(--avatar-opacity);
        transition: opacity 0.3s ease;
      
        @media (width >=1024px) {
          width: 144px;
          height: 144px;
          border-radius: 1e5px;
        }
      }
      


      .avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
        transform: scale(var(--avatar-img-scale, 1));
      }
      

      .tooltiptext {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        text-align: center;
        color: #fff;

        @media (width >=1024px) {
          position: absolute;
          max-inline-size: 20ch;
          opacity: var(--tooltip-opacity);
          visibility: var(--tooltip-visibility);
          translate: 110% 0;
          transition: opacity 0.3s ease, visibility 0.3s ease;
          pointer-events: none;
          user-select: none;

          @container style(--direction: -1) {
            text-align: end;
            translate: -110% 0;
          }
        }
      }

      .team-name {
        font-weight: bold;
        font-size: 1.25rem;
      }

      .team-title, .team-bio {
        color: #ccc;
        font-size: 0.9rem;
      }
    }

    /* faq */
    .faq-section {
      padding: 80px 60px;
      margin: auto;
      background-color: black;
      font-family: "poppins";
    }

    .faq-title {
      color: #FFD700;
      font-size: 2.5rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 40px;
      animation: shimmer 5s linear infinite;
    }

    @keyframes shimmer {
      0% { background-position: 0%; }
      100% { background-position: 100%; }
    }

    .faq-item {
      background: linear-gradient(135deg, #1a1a1a, #111);
      padding: 18px 30px;
      margin-bottom: 15px;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .faq-item:hover {
      background: black;
    }

    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.15rem;
      font-weight: 600;
      color: #f0f0f0;
    }

    .faq-icon {
      font-size: 1.5rem;
      font-weight: bold;
      color: #FFD700;
      transition: transform 0.3s ease;
      margin-left: 20px;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: all 0.5s ease;
      font-size: 1rem;
      color: #b3b3b3;
      margin-top: 10px;
    }

    .faq-item.active .faq-answer {
      max-height: 200px;
      opacity: 1;
    }

    .faq-item.active .faq-icon {
      transform: rotate(45deg);
    }

    @media (max-width: 768px) {
      .faq-section {
        padding: 60px 30px;
      }

      .faq-question {
        font-size: 1rem;
      }

      .faq-icon {
        font-size: 1.3rem;
      }
    }

    @media (max-width: 500px) {
      .faq-title {
        font-size: 2rem;
      }
    }
    /* portfolio */
     .container {
            max-width: 1200px;
            margin: 0 auto;
            /* background-color: #000; */
            padding: 20px;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 36px;
            color: black;
            padding: 20px 0px;
        }

        .project {
            display: flex;
            border-radius: 8px;
            margin-bottom: 40px;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
        }

        /* Golden Glow Effect on Hover */
        .project:hover {
            transform: translateY(-5px);
           
            cursor: pointer;
        }

        .project:hover .project-number {
            color: #f1c40f;
        }

        .project-image {
            flex: 1;
            min-height: 300px;
            background-size: cover;
            background-position: center;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .project:hover .project-image {
            opacity: 0.9;
        }
        
      

        .project:hover .project-image::after {
            background: linear-gradient(to right, rgba(212, 175, 55, 0.1), transparent);
        }

        .project-content {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .project-number {
            font-size: 14px;
            color: #D4AF37;
            margin-bottom: 10px;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }

        .project-title {
            font-size: 28px;
            margin-bottom: 20px;
            color:black;
            transition: all 0.3s ease;
        }

        .project:hover .project-title {
            color: #f1c40f;
        }

        .project-description {
            color: #484848;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .project-btn {
            display: inline-block;
            padding: 12px 30px;
            background: #D4AF37;
            color: #000 !important;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 600;
            transition: all 0.3s ease;
            align-self: flex-start;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .project-btn:hover {
            background: #f1c40f;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(212, 175, 55, 0.5);
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .project {
                flex-direction: column;
            }

            .project-image {
                min-height: 250px;
                width: 100%;
            }
            
            .project-image::after {
                background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
            }
            
            .project:hover .project-image::after {
                background: linear-gradient(to bottom, rgba(212, 175, 55, 0.1), transparent);
            }
        }

        @media (max-width: 768px) {
            .section-title {
                font-size: 30px;
                margin-bottom: 30px;
            }

            .project-content {
                padding: 30px;
            }

            .project-title {
                font-size: 24px;
            }
        }

        @media (max-width: 576px) {
            body {
                padding: 30px 0px;
            }

            .project-content {
                padding: 25px;
            }

            .project-btn {
                padding: 10px 25px;
            }
        }