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

/* Extra Bold */
@font-face {
  font-family: 'Inter Extra-bold';
  src: url('fonts/inter.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}


@font-face {
  font-family: 'satoshi-regular';
  src: url('fonts/inter.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}


@font-face {
  font-family: 'agency-fb-regular';
  src: url('fonts/agency-fb.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}



html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* All main sections full screen */
section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}


 /* SKY BACKGROUND */
.scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;   /* ✅ BACKGROUND */
}

.sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, #0b0b12 0%, #000 55%);
  z-index: 0;
}

.scene,
.sky
 {
  position: absolute;
  z-index: 0;
}

 
 
 

/* ---------- STARS ---------- */
.layer{
  position:absolute;
  transform:translate3d(
    calc(var(--mx) * var(--p)),
    calc(var(--my) * var(--p)),
    0
  );
  transition:transform 90ms linear;
}

.stars{
  position:absolute;
  width:2px;
  height:2px;
  background:transparent;
  box-shadow:var(--stars);
 
  filter: drop-shadow(0 0 6px rgba(200,200,200,0.5));

  opacity:.85;
}

.big{
  width:3px;
  height:3px;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.8));
}

.blink{
  animation:blink var(--dur) ease-in-out infinite;
  animation-delay:var(--delay);
}

@keyframes blink{
  0%,100%{opacity:.1}
  45%{opacity:1}
  65%{opacity:.25}
}


		@media (min-width: 1440px) {

            .container,
            .container-lg,
            .container-md,
            .container-sm,
            .container-xl,
            .container-xxl {
                max-width: 1440px !important;
            }
        }

        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
           
            color: #fff;
        }

        .hero {
           position: relative;

/*  padding: 120px 0;*/
  overflow: hidden;
        }


        /* Circle */
        .circle {
  position: absolute;
  width: 28rem;
  height: 28rem;
  background: #c68c53;
  border-radius: 50%;
  left: -15rem;
  top: 5rem;
  z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            top: -2rem;
        }

       

        /* Heading */
        .hero-title {
            font-family: 'Inter Extra-bold';
            font-size: 5rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 1px;
            margin-bottom: 0rem;
        }

        .hero-title span {
           color: rgba(255,255,255,0.5);
        }

        /* Tagline */
        .tagline {
            color: #c68c53;
            font-weight: 600;
            font-size: 1.8rem;
            text-transform: uppercase;
        }

        /* Description */
        .hero-desc {
            color: #bf854d;
            margin-top: 20px;
            font-size: 1.75rem; font-family: 'satoshi-regular';padding-top:5%;
        }

        /* Buttons */
        .btn-custom {
            background: #c68c53;
            color: #fff;
            border-radius: 30px;
            padding: 12px 26px;
            border: none;
            font-weight: 500;
             font-family: 'Inter';
        }

        .btn-custom:hover {
            background: #a8743f;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 2.8rem;
            }
        }

        .padd-left {
            padding-left: 10rem !important;
        }

        @media (max-width: 768px) {
            
             .hero .circle {
   width: 22.25rem !important;
    height: 22.25rem !important;
    }

		.hero { background:#000;}
            .hero-title {
                font-size: 2rem;
            }
			.video-only .bg-video { background:#000;}

            .video-only .bg-video{
           object-fit: contain !important;    
            }

            .circle {
                width: 200px;
                height: 200px;
                left: -70px;
                top: 80px;
            }

            .tagline {
                text-align: left !important;
                margin-top: 15px;
				font-size:0.8rem;
            }

            .button-top-marginP{
margin-top: 2rem;
            } 

            .padd-left {
                padding-left: 1.3rem !important;
            }

            .hero-content{
                top: -4rem;
            }
			.hero-desc { font-size:1rem;  font-family: 'satoshi-regular';}
        }


        .scroll-row {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-behavior: smooth;
}

.scroll-row::-webkit-scrollbar {
  height: 6px;
}

.scroll-row::-webkit-scrollbar-thumb {
  background: #c68c53;
  border-radius: 10px;
}

/* card size */
.work-card {
  min-width: 280px;   /* controls width */
  flex: 0 0 auto;
}

/* image */
.work-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.work-row {
  display: flex;
  gap: 20px;
  overflow: hidden; /* hide overflow for carousel effect */
}

/* Each card fixed width */
.work-card {
  min-width: 300px;
  flex: 0 0 auto;
}


.workSwiper {
  padding: 20px 40px;
}

.swiper-slide {
  width: auto !important; /* controls card width */
}

.work-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.swiper-button-next ,.swiper-button-prev { color:#fff !important;}

        .button-top-margin {
            margin-top: 4rem;
        }


        .swiper {
  padding: 40px 0;
}

.swiper-slide {
  display: flex;
  justify-content: center;
}

.work-card {
  width: 100%;
}


        /* secomd sectiom */

        .clients-section {
  position: relative;

  padding: 120px 0;
  overflow: hidden;
  
}

/* Star background */
.clients-section::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffffff22 1px, transparent 1px);
  background-size: 28px 28px;
  top: 0;
  left: 0;
}

/* Circle */
.clients-section .circle {
  position: absolute;
  width: 28rem;
  height: 28rem;
  background: #c68c53;
  border-radius: 50%;
  left: -15rem;
  top: 5rem;
  z-index: 1;
}

.clients-content {
  position: relative;
  z-index: 2;
  
}

/* Heading */
.clients-title {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
}

.clients-title span {
 color: rgba(255,255,255,0.5);
}

/* Client Boxes */
.client-box {
  
  
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 4px;
  transition: 0.3s;
  padding:5px;
  margin: 7px 0px;
}

.client-box:hover {
  
}

/* Stats */
.stat-box small {
  color: #aaa;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.stat-box h3 {
  font-size: 2rem;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 992px) {
  .clients-title {
    font-size: 3rem;
  }
}

.col-lg-1{
    width: 12.5% !important;
}

@media (max-width: 768px) {
  .clients-title {
    font-size: 2.2rem;
  }

  .clients-section .circle {
    width: 200px;
    height: 200px;
    left: -70px;
    top: 60px;
  }

  .client-box {
    height: 60px;
    font-size: 0.9rem;
  }

  .clients-content{
    top: 0rem !important;
  }

  .col-lg-1 {
    width: 25% !important;
}
}



.our-client-bottom-margin{
    margin-bottom: 8rem;
}

.border-left{
    border-left: 10px solid #c68c53;
}

/* Third sectiom videpo */
.video-section {
  position: relative;
  min-height: 100vh; /* full screen height */
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  overflow: hidden;
}

.video-content {
  width: 100%;
}

.video-wrapper {
  max-width: 1080px;   /* control max size */
  margin: 0 auto;
  cursor: pointer;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px; /* optional */
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: #fff;
    cursor: pointer;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 15px 25px;
}

 
.center-video {
    width: 80%;        /* control size */
    max-width: 800px;  /* optional limit */
    height: auto;
    display: block;
    margin: 0 auto;    /* centers horizontally */
}
/* Background video */
.bg-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;

}

.video-wrapper {
  width: 100%;
  position: relative;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px; /* optional */
}

/* Dark overlay */
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
}

/* Stars */
.video-section::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /*background-image: radial-gradient(#ffffff22 1px, transparent 1px);*/
  background-size: 28px 28px;
  z-index: 1;
}

.video-content {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 4rem;
}

/* Text */
.video-title {
  font-size: 10rem;
  font-weight: 700;
  color: #ddd;
  line-height: 1;
}

/* Play button */
.play-btn {
  margin-top: 30px;
  width: 80px;
  height: 80px;
  background: #c68c53;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  cursor: pointer;
  transition: 0.3s;
}

.play-btn:hover {
  transform: scale(1.1);
}

/* Modal video */
#modalVideo {
  width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .video-title {
    font-size: 3rem;
    text-align: center;
  }

  .video-content{
    padding-left: 0rem;
    justify-content: center;
  }

  .play-btn {
    width: 60px;
    height: 60px;
  }
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

/* What we do */

.what-we-do {
  position: relative;

  
  overflow: hidden;
}

/* Stars background */
.what-we-do::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;

  background-size: 28px 28px;
  top: 0;
  left: 0;
}

/* Circle */
.what-we-do .circle {
  position: absolute;
  width: 28rem;
  height: 28rem;
  background: #c68c53;
  border-radius: 50%;
  left: -15rem;
  top: 5rem;
  z-index: 1;
}

.what-we-do .container {
  position: relative;
  z-index: 2;
  
}

/* BIG TITLE */
.big-title {
  font-size: 7rem;
  font-weight: 700;
  line-height: 0.9;
}

.big-title span {
 color: rgba(255,255,255,0.5);
}

/* Section headings */
.section-heading {
  color: #c68c53;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Lists */
.what-we-do ul {
  list-style: none;
  padding: 0;
}

.what-we-do ul li {
  color: #ccc;
  margin-bottom: 6px;
}

/* Sub text */
.sub-text {
  color: #c68c53;
  font-weight: 600;
}

.sub-text ul {
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .big-title {
    font-size: 3rem;
  }

  .what-we-do .circle {
    width: 200px;
    height: 200px;
    left: -70px;
    top: 60px;
  }

  .what-we-do .container{
    top: 0rem;
  }
}

/* next sectiom */

.selected-works {
  position: relative;
  background: #000;
  padding: 120px 0;
  overflow: hidden;
  height:100vh;
  width:100%;  
}

/* Stars background */
.selected-works::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 28px 28px;
  top: 0;
  left: 0;
}

/* Circle */
.selected-works .circle {
  position: absolute;
  width: 28rem;
  height: 28rem;
  background: #c68c53;
  border-radius: 50%;
  left: -15rem;
  top: 3rem;
  z-index: 1;
}

.selected-works .container {
  position: relative;
  z-index: 2;
  
}

/* Title */
.works-title {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 0rem;
}

.works-title span {
 color: rgba(255,255,255,0.5);
}


.selected-title {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 0rem;
}

.selected-title span {
 color: rgba(255,255,255,0.5);
}

/* Logo text */
.brand-text {
  position:relative;
 


}
.brand-text img {padding-top:13%; }

.what-we-do .brand-text img {position:relative;padding-top:6%; }

.selected-works .brand-text img {position:relative;padding-top:4%; }
/* Cards */
.work-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.work-card p {
  color: #aaa;
  margin: 10px 0;
  font-size: 0.9rem;
}

.work-card button {
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .works-title {
    font-size: 2.5rem;margin-top: 4rem;
  }

   .selected-title {
    font-size: 2.5rem;margin-top: -3rem;
  }

  .selected-works .circle {
    width: 200px;
    height: 200px;
    left: -70px;
    top: 50px;
  }

  .selected-works .container{
    top: 0rem;
  }
}

/* Next section */

.case-study-section {

  padding: 120px 0;
  position: relative;
}

/* Stars */
.case-study-section::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffffff22 1px, transparent 1px);
  background-size: 28px 28px;
  top: 0;
  left: 0;
}


.carousel-wrapper {
  position: relative;
}

.custom-prev {
  left: -60px;   /* move outside left */
  width: auto;
}

.custom-next {
  right: -60px;  /* move outside right */
  width: auto;
}

/* Optional: make them visible */
.carousel-control-prev-icon,
.carousel-control-next-icon {

  border-radius: 50%;
  padding: 15px;
}



.case-img {
  border-radius: 10px;
  max-height: 500px;
  object-fit: cover;
}

#case1Carousel,#case4Carousel,#case5Carousel,#case7Carousel, #case9Carousel {
  max-width: 800px;
  margin: auto;
}


/* Main Box */
.case-box {
  background: #9b6b3f;
  border-radius: 25px;
  padding: 30px 80px;
  position: relative;
  color: #fff;
}

.case-box p { padding:10px;}
/* Close button */
.close-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  background: #fff;
  color: #000;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  z-index: 1000;
}

/* Image */
.case-img {
  width: 100%;
  border-radius: 10px;
}

/* Text */
.case-text {
  font-size: 0.9rem;
  color: #f1f1f1;
  line-height: 1.6;
}

/* Meta */
.case-meta small {
  color: #ddd;
  font-size: 0.7rem;
  letter-spacing: 1px;
}

.case-meta p {
  margin-top: 5px;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .case-box {
    padding: 20px;
  }

  .close-btn {
    width: 30px;
    height: 30px;
  }
}

.case-study-section {
  display: none;
}

#case1 .box { padding:20px; background:#f69220; } 
#case1 .box h2 { text-align:center}
#case1 .box p { text-align:center}

#case4 .box { padding:20px; background:#a7a9ac; } 
#case4 .box h2 { text-align:center}
#case4 .box p { text-align:center}


#case5 .box { padding:20px; background:#a7a9ac;height:200px; } 
#case5 .box h2 { text-align:center}
#case5 .box p { text-align:center}

#case7 .box { padding:20px; background:#a7a9ac;height:200px; } 
#case7 .box h2 { text-align:center}
#case7 .box p { text-align:center; font-size:14px;}



#case8 .box { padding:20px; background:#a7a9ac; } 
#case8 .box h2 { text-align:center; font-family: 'agency-fb-regular';}
#case8 .box p { text-align:center; font-size:14px;}
#case8 .box img { width:100%;}


#case9 .box { padding:20px; background:#a7a9ac;height:200px;} 
#case9 .box h2 { text-align:center}
#case9 .box p { text-align:center}




.case-study-section {
  display: none;
  position: fixed;        /* 🔥 IMPORTANT */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;       /* allow scrolling inside modal */
  z-index: 9999;
  background: rgba(0,0,0,0.8); /* dark overlay */
  padding: 60px 0;
}

body.modal-open-custom {
  overflow: hidden;
}

.case-study-section {
  opacity: 0;
  transition: 0.3s;
}

.case-study-section.active {
  display: block;
  opacity: 1;
}

/* form */

.contact-section {
 
  padding: 120px 0;
  position: relative;
}

/* Stars background */
.contact-section::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffffff22 1px, transparent 1px);
  background-size: 28px 28px;
  top: 0;
  left: 0;
}

/* Card */
.contact-card {
  background: #d9d9d9;
  border-radius: 30px;
  padding: 50px;
  width: 100%;
  max-width: 900px;
  position: relative;
  z-index: 2;
}

/* Title */
.contact-title {
  font-size: 3rem;
  font-weight: 600;
  color: #b47b42;
  margin-bottom: 30px;
}

/* Input group */
.input-group-custom {
  position: relative;
  margin-bottom: 20px;
}

.input-group-custom input,
.input-group-custom textarea {
  width: 100%;
  border: none;
  outline: none;
  padding: 14px 45px 14px 15px;
  border-radius: 10px;
  background: #eee;
  font-size: 14px;
}

/* textarea height */
.input-group-custom.textarea textarea {
  height: 120px;
  resize: none;
}

/* Icons */
.input-group-custom .icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

/* Button */
.submit-btn {
  background: #c68c53;
  color: #fff;
  border-radius: 30px;
  padding: 10px 25px;
  border: none;
  font-weight: 500;
}

.submit-btn:hover {
  background: #a8743f;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-card {
    padding: 30px;
  }

  .contact-title {
    font-size: 1.8rem;
  }
}

.video-only {
  position: relative;
  width: 100%;
  height: 100vh;   /* full screen */
  overflow: hidden;
}

/* Video fill */
.video-only .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  position:relative;
  bottom:20px;
}

/* Icon box */
.scroll-icon {
  width: 50px;
  height: 50px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 22px;
  animation: bounce 1.5s infinite;
}
.scroll-icon img{ width:30px; height:30px;}

/* Animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}


@media (min-width: 1400px) {

  


 .circle {
  position: absolute;
  width: 31.25rem;
  height: 31.25rem;
  background: #c68c53;  

  border-radius: 50%;
  left: 0rem;
  top: 0rem;
  z-index: 1;

    /* initial state */
  opacity: 0;
  transform: scale(0.6) translateY(80px);
  transition: all 1s ease;
}

        }


    
/* when active */
.circle.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}


        .hero-content {  top: -8rem; }

       


        .what-we-do .circle { 
          position: absolute;
  width: 28rem;
  height: 28rem;
  background: #c68c53;  

  border-radius: 50%;
  left: 0rem;
  top: 0rem;
  z-index: 1;

        }

        .selected-works .circle {

           position: absolute;
  width: 28rem;
  height: 28rem;
  background: #c68c53;  

  border-radius: 50%;
  left: 0rem;
  top: 0rem;
  z-index: 1;

        }
        .clients-section .circle { position: absolute;
  width: 28rem;
  height: 28rem;
  background: #c68c53;  

  border-radius: 50%;
  left: 0rem;
  top: 0rem;
  z-index: 1; }

  .hero-title {
  display: flex;
  flex-direction: column;
}



@media (max-width: 1280px) {
 
  .hero-title { font-size: 4rem; }
 .circle   {
  position: absolute;
  width: 31.25rem;
  height: 31.25rem;
  background: #c68c53;   

  border-radius: 50%;
  left:-12rem;
  top: 0rem;
  z-index: 1;

    /* initial state */
  opacity: 0;
  transform: scale(0.6) translateY(80px);
  transition: all 1s ease;
}

.hero .circle {
          width: 29.25rem;
        height: 28.25rem;
}

  .what-we-do .circle {    left:-12rem;
  top: 0rem;}

.selected-works .circle {    left:-12rem;
  top: 0rem;}

.clients-section .circle {    left:-12rem;
  top: 0rem;}  

  .video-wrapper {
  max-width: 800px;   /* control max size */
  margin: 0 auto;
}
 }


 @media (max-width: 768px) {

  .circle   {
  position: absolute;
width: 22.25rem;
    height: 22.25rem;
  background: #c68c53;   

  border-radius: 50%;
  left:-12rem;
  top: 0rem;
  z-index: 1;

    /* initial state */
  opacity: 0;
  transform: scale(0.6) translateY(80px);
  transition: all 1s ease;
}

  .what-we-do .circle {    left:-12rem;
  top: 0rem;
width: 22.25rem;
    height: 22.25rem;
}

.selected-works .circle {    left:-12rem;

  top: 0rem;
width: 22.25rem;
    height: 22.25rem;
}

.clients-section .circle {    left:-12rem;
  top: 0rem;
width: 22.25rem;
    height: 22.25rem;
}  

  .video-wrapper {
  max-width: 800px;   /* control max size */
  margin: 0 auto;
}

.hero-title { font-size: 2.5rem;margin-top:18%}
.hero-desc { margin-top:30%} 
 }