/* @import url('https://fonts.googleapis.com/css2?family=Int÷er:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Orelega+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mina:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html {
    scroll-behavior: smooth;
    /* scroll-padding-top: 75px; */

    /* scrollbar-color: #070707 transparent;  */
  }

body{
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6,p,span{
    font-family: "Open Sans", sans-serif;
  font-weight: 700;
}
.hero-section p span{
    font-family: "Open Sans", sans-serif;

}
a{
    text-decoration: none;
    color: inherit;
}
a:hover{
    color: #ffffff;
}

/* For WebKit browsers (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
    width: 10px !important; /* Width of the scrollbar */
  }

  ::-webkit-scrollbar-track {
    background: #000000 !important; /* Track (background of the scrollbar) */
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(125 89 23) 100%);
    border-radius: 10px !important; /* Rounded corners */
  }
/*
   ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
      180deg,
      #555,
      #777
    ) !important;
  } */
  /* Preloader
-------------------------------------------------------*/

.loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    font-size: 0;
    color: #00c9d0;
    display: inline-block;
    margin: -25px 0 0 -25px;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.lead{
  font-size:13px;
}
.loader div {
    background-color: #d9b06a;
    display: inline-block;
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    opacity: .5;
    border-radius: 50%;
    -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
    animation: ballPulseDouble 2s ease-in-out infinite;
}

.loader div:last-child {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes ballPulseDouble {
    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes ballPulseDouble {
    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.top-email-div{
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.top-header{
    background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(125 89 23) 100%);
    background: #C5B358;
}
.top-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
}
.nav-icon{
    display: flex;
    align-items: start;
}
.icon-text-con{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
}
.icon-text-con a {
    transition: all .2s ease-in-out;
}
.top-email-div i {
    transition: all .2s ease-in-out;
}
.icon-text-con:hover a{
    color: white;
}
.top-email-div p{
 margin-bottom: 0px;
 font-size: 13px;
 font-weight: 600;
}
.top-email-div i{
    font-size: 16px;
    font-weight: 600;
    color: #e51a23;
}
.top-button{
    float: right;
}
.top-button a {
    border: 0px solid black;
    background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(201 130 0) 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 10px;
    /* gap: 12px; */
}
/* .top-button span{
    border: 1px solid black;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    color: white;
    padding: 0px 10px;
} */
.header-center{
    background-color: #0000;
    border-top: 4px solid #e51a23;
    border-bottom: 4px solid #e51a23;
    background-color: black;
    text-align: center;
    color: white;
    padding: 16px 0px;

}

.header-center .Heading-carousel-contact {
    margin-top: -6px;
}

.header-center p{
    margin-bottom: 0px;
    font-size: 15px;
    font-weight: 500;
    margin-top: -3px;
}
.main-menu{
    background-color: black;
}
.nav-link{
    color: #c7b361 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    font-weight: 900;
    padding: 0px 12px !important;
}
.nav-item {
    color: #ffff !important;
    font-size: 15px !important;
    font-weight: 900;
    text-transform: uppercase;
    padding: 0px !important;
}
.dropdown{
    position: relative;
    /* display: inline-block; */
}
.dropdown-content {
    display: none;
    margin-top: 2px;
}
.dropdown-content {
     height: 300px;
    /* overflow-x: scroll;
    background: linear-gradient(180deg, rgb(104, 96, 74) 0%, rgba(91,85,70,1) 49%, rgba(0,0,0,1) 100%);  */
    position: relative;
    z-index: 111;
}

.dropdown-2 {
    /* display: none; */
    margin-top: 2px;
}
.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
}
.unqiue-dropdown {
    right: -120px;
    top: 160px;
    /* display: none !important; */
}
.unDrop {
    margin-left: -32px;
}
.dropdown-2 {
    position: relative;
    list-style: none;
}

.unDrop .dropdown-list { 
    display: none;
    position: absolute;
    left: 58px;
    background: black;
    list-style: none;
    padding: 0;
    width: 200px;
    /* margin-left: -32px; */
}

.dropdown:hover .unqiue-dropdown {
    /* display: block !important; */
}
.dropdown-content> div {
    /* display: flex;  */
    position: relative;
    z-index: 2;
    list-style: none;
    gap: 10px;
    background-color: #000;
    width: 150px;
    margin-left: -30px;
    /* border: 2px solid goldenrod; */
    margin-top: 10px;
}
.dropdown-content> div li {
    /* background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(125 89 23) 100%); */
    /* border-radius: 20px; */
     padding: 6px 7px;
    margin: 3px 0;
    font-size: 14px;
    font-family: 'Open Sans';
    font-weight: 500; 
}
.dropdown-content> div li:hover{
    background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(125 89 23) 100%);
}

/* .badges-drop .badges-dropChild {
    display: none !important;
    position: absolute;
    right: -100px !important;
}
.badges-drop:hover .badges-dropChild{
    display: block;
} */

.navbar-nav{
    /* padding-left: 50px; */
}

.navbar-nav .nav-item .nav-link {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 20px;
    letter-spacing: 1px;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    border-radius: 5px; /* Rounded corners for a modern look */
}

.navbar-nav .nav-item .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(125 89 23) 100%);
    transition: all 0.3s ease;
    z-index: -1;
    opacity: 0; /* Start with invisible background */
    border-radius: 5px; /* Matches the link's border radius */
}

.navbar-nav .nav-item .nav-link:hover {
    color: #fff; /* Text remains white for contrast */
    transform: scale(1.05); /* Slight zoom effect */
}

.navbar-nav .nav-item .nav-link:hover::before {
    opacity: 1; /* Background gradient appears on hover */
    background: linear-gradient(90deg, rgb(0 0 0) 0%, rgb(169 109 0) 100%);
}

.navbar-nav .nav-item .nav-link:hover {
    background-color: rgba(255, 133, 30, 0.2); /* Soft background color overlay */
}

.nav-icons-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.top_icons {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
}
.top_icons a {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    background-color: #c7b361;
    justify-content: center;
    animation: pulse-animation 2s infinite;
}
.top_icons a i {
    color: #e51a23;
}
.top_icons a:hover {
    background-color: #ffffff;
}
.navbar-collapse {
    justify-content: center !important;
}

.shop_icons {
    display: flex;
    gap: 10px;
}
.shop_icons a i {
    color: #e51a23;
    font-size: 25px;
}
.hero-section {
    position: relative;
    padding: 260px 0px 0px 0px;
    border-top: 4px solid #e51a23;
    border-bottom: 4px solid #e51a23;
    overflow: hidden;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-text {
    position: relative;
    z-index: 1;
    color: #fff;
    background: #0000009e;
    border-radius: 25px;
    padding: 10px;
    display: inline-block;
    /* position: relative; */
    bottom: 135px;
}
.indus-heading h1 {
    font-size: 55px !important;
    white-space: unset !important;
}
.gold {
    font-size: unset !important;
    font-weight: unset !important;
    /* color: unset !important; */
    color: goldenrod !important;
    padding-top: unset !important;
    margin-top: unset !important;
    position: unset !important;
}
.color-white {
    font-size: unset !important;
    font-weight: unset !important;
    /* color: unset !important; */
    color: #ffffff !important;
    padding-top: unset !important;
    margin-top: unset !important;
    position: unset !important;
}
.red {
    font-size: unset !important;
    font-weight: unset !important;
    /* color: unset !important; */
    color: #d91921 !important;
    padding-top: unset !important;
    margin-top: unset !important;
    position: unset !important;
}
.hero-text-parent {
    display: flex;
    justify-content: center;
}
.hero-text{
    text-align: center;
}
.hero-text h1{
    color: #c7b362;
    font-size: 58px;
    font-weight: 600;
    padding: 0px auto;

    overflow: hidden; /* Ensures the text is hidden before the animation */
    white-space: nowrap; /* Prevents wrapping */
    border-right: 0.15em solid black; /* Adds a cursor effect */
    width: 0; /* Start with no width */
    animation: typing 5s steps(50) 1s forwards, blink 0.75s step-end infinite; /* Typing animation */
}

/* Typing effect */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Cursor blinking effect */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}
.hero-text p{
    font-size: 27px;
    font-weight: 400;
    color: #fff;
}
.hero-text span{
    font-size: 27px;
    font-weight: 400;
    color: #ffff;
    /* padding-top: 100px; */
    /* margin-top: 100px; */
    position: relative;
    top: 120px;
}
.contact-img img{
    width: 100%;
}
.contact-section{
    /* background: url(../Assests/badge-img/hero/contact-banner.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border-bottom: 3px solid #ffff;
}
.contact-child {
    /* background-color: #000000a1; */
    padding: 30px 0px;
}
/* .contact-form{
    background-image: url(../bg-ctf\ 1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
padding: 200px;
} */
.contact-form h3{
    color: #ffff;
    font-size: 60px;
    text-align: center;

}
.contact-form{
    padding: 30px ;
}
.input-half input {
    /* width: 100%;
    padding: 10px;
    background-color: #5E5E5E;
    border: none; */
    width: 100%;
    padding: 10px;
    color: #fff;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #ffc83d;
}
label{
    color: #ffff;
    padding: 15px 0px 5px 0px;
    font-size: 18px;
    font-weight: 200;
}
.label-para{
    color: #ffff;
    padding: 15px 0px 5px 0px;
    font-size: 18px;
    font-weight: 700;
}
textarea{
    width: 100%;
    height: 160px;
    color: #fff;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #ffc83d;
}
.slick-track{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .hero-section {
    background-image: url(../Video\ Section\ Image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 130px 0px 160px 0px;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;



} */

.banner-sliders {
    /* background-image: url(/Assests/badge-img/hero/badge-background-vertical.png); */
    background-size: cover;
    /* background-repeat: no-repeat; */
    border-bottom: 4px solid #e51a23;
}
.child-banner {
    /* background-color: #000000bf; */
    padding: 4rem 0;
}
.banner-sliders .swiper {
    width: 100%;
    height: 600px;
    margin: 0 auto;
  }

  .banner-sliders .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner-sliders  .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .swiper-wrapper {
    text-align: center !important;
  }
  .banner-sliders .swiper-button-next, .banner-sliders .swiper-button-prev {
    background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(125 89 23) 100%);
    color: white;
    height: 60px;
    width: 40px;
    border-radius: 25px;
    display: none;
}
.banner-sliders .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 28px;
}
.banner-sliders .swiper-pagination-bullet {
    width: 15px;
    /* height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); */
    display: inline-block;
    border-radius: 12px;
    background: #ae9104;
}
.banner-sliders .swiper-horizontal>.swiper-pagination-bullets, .banner-sliders .swiper-pagination-bullets.swiper-pagination-horizontal, .banner-sliders .swiper-pagination-custom, .banner-sliders .swiper-pagination-fraction {
    bottom: -5px;
}
.banner-sliders .swiper-pagination-bullet-active {
    width: 40px !important;
    background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(125 89 23) 100%);
}
.contact-set{
    width: 90%;
}
.contact-set form {
    background: #00000096;
    padding: 12px;
    border-radius: 15px;
}
.form-btn{
    float: right;
    padding-top: 20px;
}
.form-btn button{
border: none;
/* background: linear-gradient(30deg,#ff851E,#ffc703); */
/* background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(201 130 0) 100%); */
background: linear-gradient(30deg, #d3701e, #ffdc63);
border-radius: 7px;
padding: 10px 20px;
font-size: 18px;
font-weight: 600;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Adjust the darkness */
    box-shadow: inset 100px 100px 350px rgba(5, 6, 6, 0.99); /* Shadow effect */
    z-index: 1;
}
.about-banner {
    background-image: url("/Assests/badge-img/hero/about-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
}
.about-child {
    background-color: #00000096;
    padding: 260px 0px 0px 0px;
}
.mobile-nav2 {
    display: none;
}
.about-child .hero-text {
    background-color: transparent;
}
.about-banner h1 {
    text-transform: uppercase;
}
.about-banner p {
    font-size: 14px;
}
.hero-section * {

    z-index: 2; /* Ensures other content appears above the overlay */
}
.service-text h3 {
    font-size: 60px;
    background: linear-gradient(30deg, #d3701e, #e3b516);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-align: center;
}
.service-section{
    /* background-image: url(../Assests/badge-img/hero/service-banner.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid #e51a23;
}
.service-child {
    /* background-color: #000000ab; */
    background-color: rgb(255, 255, 255);
    padding: 0px 0px 82px 0px;
    position: relative;
    z-index: 10;
}

.service-para{
    /* background: linear-gradient(30deg, #ff851E, #ffc703); */
    /* background: linear-gradient(90deg, rgb(241 183 72) 0%, rgb(125 89 23) 100%); */
    /* background: linear-gradient(30deg, #d3701e, #ffdc63); */
        background: white;
    padding: 10px;
    border-radius: 30px 5px 30px 5px;
    margin: 20px;
    transition: 0.5s ease-in-out;
    height: auto;
    border: 3px solid #e7a13d;
    color: #353535;
}
.service-section .service-para span {
    color: #353535;
}
.service-para span {
    color: #ffffff;
}
.serv-img button{
    margin-top: 10px;
}
.serv-img .un-height {
    height:max-content;
}
.service-para:hover{
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    padding: 10px;
    border-radius: 5px 30px 5px 30px;
    margin: 20px;
    color: #ffffff;
    transform: translateY(-14px);
}
.service-para:hover span {
    color: #ffffff;
}
.service-para button {
    border-radius: 15px;
    transition: all .3s ease-in-out;
}
.serv-img img {
    filter: brightness(0) invert(1);
}
.service-para:hover .serv-img img {
    filter: brightness(0) invert(1); /* This makes the image appear white */
}

.service-para:hover button {
    background-color: #9e7900; /* Changes button background to white */
    color: #000; /* Changes button text color to black */
}
.service-first{
    display: flex;
    justify-content: center;
}
.service-row .service-first img{
    width: 85%;
    /* border: 1px solid black; */
    /* border: 4px solid black;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%; */
}
.service-para p{
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0px;
    padding: 0px 0px;
    text-transform: uppercase;
    height: 65px;
}
.service-para span {
    transition: all .5s ease-in-out;
}
.service-para button{
    background: linear-gradient(30deg, rgb(255 201 16), rgb(211, 112, 30));
    border: 1px solid rgb(255, 255, 255);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    padding: 5px 10px;
}
.service-para button:hover{
        background: linear-gradient(30deg, rgb(211, 112, 30) ,rgb(255, 220, 99) );
}
.serv-img img{
    width: 17%;
    border: none;
}
.serv-img span {
    display: block;
}
.service-row{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 44px;

}

.service-row a {
    margin-top: 1rem;
        display: block;
        width: 115px;
}

.service-con{
    width: 82%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.slide-para {
    flex: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
}
.slick-initialized .slick-slide{
    width: 604px;
    margin-left: 32px;
}
.slide-para h4 {
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 36px;
    margin: 0px;
    text-transform: uppercase;
    padding-bottom: 6px;
    /* padding: 8px 0px; */
    padding-top: 10px;
}
.slide-para  img {
    width: 8%;
    transform: rotate(7deg);
}
.slidcontain{
    overflow-x: hidden;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    padding: 11px 0px;
    transform: rotate(7deg);
    margin-top: 131px;
    opacity: 50%;
}
.slider-set{
    width: 104vw;
    position: relative;
    left: -20px;
}
/* .slide-item{
    flex: 20%;
}
.slide-item2{
    flex: 6%;
} */
.slide-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.slider-row {
    position: relative;
}

/* .slider-row::before {
    content: '';
    border-top: 4px solid #fff;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
} */
/* .slider-row::after{
    content: '';
    border-top: 4px solid #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
} */
.slidtwo{
    transform: rotate(-10deg);
    margin-top: 0px;
    opacity: 100%;
    margin-bottom: 39px;
    margin-top: -68px;
}

.logo-con{
    display: flex;
    padding-top: 132px;
    justify-content: space-between;
    flex-wrap: wrap;
}


.logo-con img{
    width: 100%;
}

.banefits-image {
    height: 100%;
    --border-size: 4px;
    --padding: 0px;
    --border-radius: 100%;
    --border-bg: conic-gradient(
        #FF9019 0.1666turn,
        #444 0.1666turn 0.3333turn,
        #FF9019 0.3333turn 0.5turn,
        #444 0.5turn 0.6666turn,
        #FF9019 0.6666turn 0.8333turn,
        #444 0.8333turn
    );
    position: relative;
    overflow: hidden;
    font-size: 2rem;
    padding: calc(var(--padding) + var(--border-size));
    border-radius: var(--border-radius);
    display: inline-block;
    z-index: 1111;

    &::before {
        content: '';
        display: block;
        background: var(--border-bg);
        width: calc(100% * 1.41421356237);
        padding-bottom: calc(100% * 1.41421356237);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        z-index: -2;
        animation: spin 5s linear infinite;
        animation-play-state: paused; /* 👈 animation default mein rukegi */
    }

    &:hover::before {
        animation-play-state: running; /* 👈 hover par chalu hogi */
    }

    &--reverse::before {
        animation-direction: reverse;
        animation-play-state: paused; /* 👈 reverse bhi by default pause */
    }

    &--reverse:hover::before {
        animation-play-state: running; /* 👈 reverse hover par chalu */
    }

    &::after {
        content: '';
        position: absolute;
        inset: var(--border-size);
        background: white;
        z-index: -1;
        border-radius: calc(var(--border-radius) - var(--border-size));
    }
}




.banefits-image img {
    width: 160px;
    height: 100%;
    border-radius: 50%;
}

.arrow-con{
    display: flex;
    flex-direction: column;
}

.arrow-con img {
    opacity: 0; /* Start with images hidden */
    animation: fadeIn 2s ease-in-out infinite; /* Apply the animation */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1; /* Fade in */
    }
    100% {
        opacity: 0; /* Fade out */
    }
}

/* Optional: Stagger the animations for each image */
.arrow-con img:nth-child(1) {
    animation-delay: 0s;
}

.arrow-con img:nth-child(2) {
    animation-delay: 0.5s;
}

.arrow-con img:nth-child(3) {
    animation-delay: 1s;
}


.Benefits-sub-section{
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    align-items: center;
    gap: 30px;
    margin-bottom: 66px;
    justify-content: space-evenly;
}

.benefits-sec{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.benefits-row{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    /* align-items: center; */

}

.Benefits-section{
    /* background-image: url(../Assests/badge-img/hero/service-banner-2.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    /* justify-content: center;  */
    align-items: center;
    border-bottom: 3px solid #e51a23;
    /* padding-bottom: 35px; */
}
.benefits-child {
    /* background-color: #000000ab; */
    background-color: #ffffff;
    width: 100%;
}
.un-pad {
    padding-bottom: 40px;
}
.hidden-con{
    display: flex;
    gap: 12px;
    padding-left: 54px;
    justify-content: space-between;
}
.hidden-con p{
    font-family: "Mina", sans-serif;
    padding: 0px;
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}
.vector-image{
    animation: moveUpDown 2s infinite;
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.hidden-para {
    display: none;
    max-height: 0;
    transition: max-height 0.5s ease-out;
}
#hidden-p{
    color: white;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 0px;
    padding-left: 54px;
    padding-right: 34px;
}


/* .hidden-para {
    display: none;
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
    transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
} */

/* .benefits-para.active + .hidden-para {
    display: block;
    max-height: 200px;
    transition: max-height 0.5s ease-in;
} */



.hidden-para {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}




.heading-container {
    text-align: center;
    z-index: 1;
    position: relative;
    margin-top: 40px;
}

.heading-container h1 {

    font-size: 62px;
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0px;
}

.un-h1 {
    text-transform: uppercase;
}

.PFF-Section .heading-container{
    margin-top: 0;
}

.Pff-con .heading-container h1 {
    padding: 2rem 0;
    background: linear-gradient(30deg, #ff0000, #ff4040);
    -webkit-background-clip: text;
    background-clip: text;
}

.para-set{
    display: flex;
    flex-direction: column;
}

.benefit-bottom-con{
    display: flex;
    justify-content: center;
}
.benefit-bottom-con p {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-top: 22px;
}
.heding-image{
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}
.service-row .serv-img img {
    display: none;
}
.ppf-child .heding-image {
    margin-top: -18px;
}

.logo-carousel {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    /* margin-top: 58px; */
    display: flex;
    align-items: center;
    background: #000000be;
}
.Heading-carousel {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin-top: 0px;
    display: flex;
    align-items: center;
}
.Heading-carousel-contact  {
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin-top: 0px;
    display: flex;
    align-items: center;
}
.z-index{
    z-index: 1;
}
.carousel-track {
    display: inline-flex;
    animation: scroll 260s linear infinite;
}
.carousel-track-heading {

    display: inline-flex;
    animation: scroll 120s linear infinite;
}
.logo-set {
    border-right: 2px solid white;
    display: inline-block;
    padding: 0px 60px;
        background: aliceblue;
}
.heading-set {

    display: inline-block;
    padding: 0px 106px;
}
.heading-set h1 {
    /* margin-bottom: -36px; */
    padding-bottom: 0px;
    font-family: "Mina", sans-serif;
    font-size: 127px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
    text-shadow: 0px 1px 0 #343434, -1px -1px 0 #343434, 1px -1px 0 #343434, -1px 1px 0 #343434
}
.logo-set img {
    height: 76px;
    width: auto;
}

/* Continuous scroll animation */
@keyframes scroll {
    from {
        transform: translateX(0);
    }

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


/* .embroidry {
    background-image: url("/Assests/badge-img/hero/embroidry.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
} */


.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider-set {
    display: flex;
    flex-direction: column;
}

.slidcontain {
    overflow: hidden;
    position: relative;
}

.slider-row {
    display: flex;
    transition: none;
    /* No transition for continuous scrolling */
    animation: scrolls 15s linear infinite;
    /* Continuous scrolling */
}

.slider-row-PFF {
    display: flex;
    transition: none;
    /* animation: scrolls 15s linear infinite; */
}

.slide-item {
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: none;
    border-right: none;
    min-width: 38%;
    box-sizing: border-box;
}

/* Continuous scrolling fix for Safari */
@keyframes scrolls {
    0% {
        transform: translateX(0);
    }

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

.benefits-para {
    --border-radius: 1rem;
    --border-size: 0.2rem;
    --border-bg: linear-gradient(45deg, #f16f01, #edb900, #ff7500, #937200);
    --padding: 10px;

    width: 100%;
    background: #313131;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    top: 54px;
    left: -60px;
    padding-left: 12px;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.3s ease;
    font-size: 2rem;
    padding: calc(var(--padding) + var(--border-size));
    border-radius: var(--border-radius);
    display: inline-block;
    z-index: 9;
    position: relative;
}

/* Fix for Safari pseudo-element rendering issues */
.benefits-para::before {
    content: '';
    display: block;
    background: var(--border-bg);
    width: calc(30% * 1.41421356237);
    padding-bottom: calc(100% * 1.41421356237);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -2;
    animation: spin 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.benefits-para--reverse::before {
    animation-direction: reverse;
}

.benefits-para::after {
    content: '';
    position: absolute;
    inset: var(--border-size);
    background: rgb(16 15 15);
    z-index: -1;
    border-radius: calc(var(--border-radius) - var(--border-size));
}
.benefits-para::before {
    /* ...tumhari purani properties yahan hongi... */
    animation: spin 3s linear infinite;
    animation-play-state: paused; /* 👈 default mein animation rukegi */
}

.benefits-para:hover::before {
    animation-play-state: running; /* 👈 hover par animation chalu hogi */
}
/* Safari-specific fix for rendering issues */
@supports (-webkit-touch-callout: none) {
    .benefits-para {
        will-change: transform;
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
    }
}



.benefits-para02 {
    flex-direction: column;

}

.hidden-para {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out;
}

.benefits-para.open .hidden-para {
    max-height: 1000px; /* Adjust this based on your content */
    opacity: 1;
}

.arrow-con img {
    transition: transform 0.3s ease;
}

.benefits-para.open .arrow-con img {
    transform: rotate(180deg); /* Rotate the arrows when open */
}
.benefits-para.open .arrow-con{
    position: relative;
    top: 228px;
}
.benefits-para.open .hidden-con{

    border-bottom: 2px solid white;
    padding-bottom: 10px;
}

@keyframes spin {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  .benefits-row02 {
    display: flex;
    margin-top: 30px;
    flex-direction: row-reverse;
    --border-radius: 1rem;
    --border-size: 0.2rem;
    --border-bg: linear-gradient(#f16f01, #edb900, #ff7500, #937200);
    --padding: 10px;
    background: #313131;
    overflow: hidden;
    padding-left: 12px;
    cursor: pointer;
    padding: 0px;
    transition: background-color 0.5s ease, transform 0.3s ease;
    position: relative;
    width: 44%;
    justify-content: space-between;
    border-radius: var(--border-radius);
    z-index: 9;

    &::before {
      content: '';
      display: block;
      background: var(--border-bg);
      width: calc(30% * 1.41421356237);
      padding-bottom: calc(100% * 1.41421356237);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 100%;
      z-index: -2;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &::after {
      content: '';
      position: absolute;
      inset: var(--border-size);
      background: #0f0f0f;
      z-index: -1;
      border-radius: calc(var(--border-radius) - var(--border-size));
    }
  }

  .benefits-row02:hover::after {
    background-color: #070707;
  }

  .benefits-row02:hover::before {
    animation: spin 5s linear infinite;
    opacity: 1;
  }


.hidden-para02 {
    display: block;
    height: 196px;
    opacity: 1;
    width: 100%;

}

.hidden-con02 {
    display: flex;
    gap: 12px;

    justify-content: space-between;
}
.hidden-con02 p {
    font-family: "Mina", sans-serif;
    padding: 0px;
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
}

#hidden-p02 {
    color: white;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 0px;
}

#hidden-p03 {
    color: white;
    font-size: 17px;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 0px;
    text-align: justify;
}

.para-set01 {
    display: flex;
    flex-direction: column;
    /* background: #25232382; */
    padding: 6px 12px;
    border-radius: 10px;
    width: 68%;
}

.para-set03 {
    display: flex;
    flex-direction: column;
    /* background: #25232382; */
    padding: 6px 12px;
    border-radius: 10px;
    width: 100%;
}

#banefits-image-img02 {
    width: 100%;
    height: 278px;
    padding-right: 6px;
    border-radius: 12px;
}

.banefits-image02{
    height: 100%;
    position: relative;
    overflow: hidden;
    font-size: 2rem;
    display: inline-block;
    z-index: 1111;
    padding: 6px 0px;
    width: 30%;
}

.banefits-image03 {
    height: 100%;
    position: relative;
    overflow: hidden;
    font-size: 2rem;
    display: inline-block;
    z-index: 1111;
    padding: 6px 0px;

}

.benefits-row03 {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    flex-direction: column;
    --border-radius: 12px;
    --border-size: 4px;
    --border-bg: linear-gradient(#f16f01, #000000, #f16f01, #FFC703);
    --padding: 10px;
    background: #121111;
    overflow: hidden;
    padding-left: 12px;
    cursor: pointer;
    padding: 0px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    z-index: 9;
    transform: perspective(600px) rotateY(10deg);

    &::before {
        content: '';
        display: block;
        background: var(--border-bg);
        width: calc(140%* 1.41421356237);
        padding-bottom: calc(124%* 1.41421356237);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        z-index: -2;
        animation: spin 3s linear infinite;
    }
    &--reverse::before{
      animation-direction: reverse;
    }
    &::after{
      content: '';
      position: absolute;
      inset: var(--border-size);
      background: rgb(16 15 15);
      z-index: -1;
      border-radius: calc(var(--border-radius) - var(--border-size));
    }

}

.benefits-row03:hover {
    transform: perspective(600px) rotateY(0deg);
}

#banefits-image-img03 {
    width: 100%;
    height: 204px;
    padding: 0px 4px;
    /* padding-right: 6px; */
    border-radius: 6px 6px 0px 0px;
}

.hidden-con03 {
    display: flex;
    gap: 12px;
    justify-content: left;
}

.hidden-con03 p {
    font-family: Mina, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 22px;
    font-weight: bold;
    padding: 0px;
    margin: 0px;
}

.hidden-para03 {
    display: block;
    height: 240px;
    opacity: 1;
    width: 312px;
}


        /* Enhanced Gallery Grid */
        .premium-gallery-grid {
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 50px;
            /* display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); */
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 34px;
            position: relative;
            z-index: 2;
            margin-top: 36px;
        }

        /* Enhanced Gallery Card */
        .premium-gallery-card {
            position: relative;
            /* background: linear-gradient(145deg, 
                rgba(26, 26, 26, 0.3), 
                rgba(42, 42, 42, 0.3), 
                rgba(26, 26, 26, 0.3)); */
            flex: 1 1 calc(33.333% - 50px); 
            max-width: calc(33.333% - 50px);
            background: #000000e6;
            border-radius: 25px;
            overflow: hidden;
            border: 2px solid transparent;
            background-clip: padding-box;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            cursor: pointer;
            box-shadow: 
                0 15px 35px rgba(0, 0, 0, 0.4),
                0 5px 15px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .premium-gallery-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 2px;
            background: linear-gradient(135deg, 
                rgba(211, 112, 30, 0.6), 
                rgba(255, 220, 99, 0.4), 
                rgba(211, 112, 30, 0.6));
            border-radius: 25px;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .premium-gallery-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(211, 112, 30, 0.1), 
                rgba(255, 220, 99, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: 25px;
        }

        .premium-gallery-card:hover::before {
            opacity: 1;
        }

        .premium-gallery-card:hover::after {
            opacity: 1;
        }

        .premium-gallery-card:hover {
            transform: translateY(-20px) scale(1.03);
            box-shadow: 
                0 30px 60px rgba(211, 112, 30, 0.3),
                0 0 40px rgba(255, 220, 99, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        /* Enhanced Card Header */
        .premium-card-header {
            padding: 30px 25px 20px;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .premium-card-title {
            font-size: 2rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            transition: all 0.4s ease;
            position: relative;
        }

        .premium-card-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #d3701e, #ffdc63);
            transition: width 0.4s ease;
        }

        .premium-gallery-card:hover .premium-card-title {
            color: #d3701e;
            text-shadow: 0 0 20px rgba(211, 112, 30, 0.6);
            transform: scale(1.05);
        }

        .premium-gallery-card:hover .premium-card-title::after {
            width: 80px;
        }

        /* Enhanced Image Container */
        .premium-image-wrapper {
            position: relative;
            height: 300px;
            margin: 0 25px 25px;
            border-radius: 20px;
            overflow: hidden;
            background: linear-gradient(45deg, #333, #555);
            border: 3px solid transparent;
            background-clip: padding-box;
            transition: all 0.4s ease;
        }

        .premium-image-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 3px;
            background: linear-gradient(45deg, #d3701e, #ffdc63, #d3701e);
            border-radius: 20px;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }

        .premium-gallery-card:hover .premium-image-wrapper::before {
            opacity: 1;
        }

        .premium-gallery-card:hover .premium-image-wrapper {
            box-shadow: 
                0 0 30px rgba(211, 112, 30, 0.5),
                inset 0 0 20px rgba(255, 220, 99, 0.1);
        }

        .premium-gallery-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            z-index: 1;
        }

        .premium-gallery-card:hover .premium-gallery-image {
            transform: scale(1.15) rotate(2deg);
            filter: brightness(1.2) contrast(1.1) saturate(1.2);
        }

        /* Enhanced Overlay Effects */
        .premium-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                135deg,
                rgba(211, 112, 30, 0.4) 0%,
                rgba(255, 220, 99, 0.4) 50%,
                rgba(211, 112, 30, 0.4) 100%
            );
            opacity: 0;
            transition: all 0.4s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 2;
            backdrop-filter: blur(2px);
        }

        .premium-gallery-card:hover .premium-image-overlay {
            opacity: 1;
        }

        .premium-view-icon {
            color: white;
            font-size: 3rem;
            font-weight: bold;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            animation: premiumIconFloat 1s ease infinite;
            margin-bottom: 10px;
        }

        .premium-view-text {
            color: white;
            font-size: 1.2rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        @keyframes premiumIconFloat {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-10px) scale(1.1); }
        }

        /* Enhanced Modal Styles */
        .premium-modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(20px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            transition: all 0.4s ease;
        }

        .premium-modal-backdrop.active {
            opacity: 1;
        }

        .premium-modal-container {
            position: relative;
            max-width: 95vw;
            max-height: 95vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;
            animation: modalSlideIn 0.5s ease;
        }

        @keyframes modalSlideIn {
            from {
                transform: scale(0.8) translateY(50px);
                opacity: 0;
            }
            to {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        .premium-carousel-wrapper {
            display: flex;
            align-items: center;
            gap: 40px;
            position: relative;
        }

        .premium-carousel-image {
            max-width: 700px;
            max-height: 500px;
            border-radius: 25px;
            border: 4px solid transparent;
            background: linear-gradient(45deg, #d3701e, #ffdc63) padding-box,
                        linear-gradient(45deg, #d3701e, #ffdc63) border-box;
            box-shadow: 
                0 25px 50px rgba(211, 112, 30, 0.4),
                0 0 50px rgba(255, 220, 99, 0.2);
            transition: all 0.3s ease;
        }

        .premium-nav-button {
            background: linear-gradient(135deg, #d3701e, #ffdc63);
            border: none;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            color: white;
            font-size: 2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(211, 112, 30, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .premium-nav-button:hover {
            transform: scale(1.15);
            box-shadow: 0 15px 35px rgba(211, 112, 30, 0.5);
            background: linear-gradient(135deg, #ffdc63, #d3701e);
        }

        .premium-close-button {
            background: linear-gradient(135deg, #d3701e, #ffdc63);
            border: none;
            border-radius: 20px;
            padding: 15px 30px;
            color: white;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 10px 25px rgba(211, 112, 30, 0.3);
        }

        .premium-close-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(211, 112, 30, 0.5);
            background: linear-gradient(135deg, #ffdc63, #d3701e);
        }

        .premium-card-description {
            font-size: 1rem;
            color: #cccccc;
            text-align: center;
            padding: 0 0px 0px;
            line-height: 1.5;
            margin-bottom: 0;
        }

        @media (max-width: 992px) {
            .premium-gallery-card {
                flex: 1 1 calc(50% - 50px); /* 2 cards per row */
                max-width: calc(50% - 50px);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .premium-main-heading h1 {
                font-size: 3rem;
            }

            .premium-text-flow {
                font-size: 2rem;
            }

            .premium-gallery-grid {
                grid-template-columns: 1fr;
                padding: 0 25px;
                gap: 40px;
            }

            .premium-carousel-wrapper {
                flex-direction: column;
                gap: 25px;
            }

            .premium-carousel-image {
                max-width: 90vw;
            }

            .premium-nav-button {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
        }
        @media (max-width: 576px) {
            .premium-gallery-card {
                flex: 1 1 100%;
                max-width: 100%;
            }

            .premium-gallery-grid {
                padding: 0 25px;
                gap: 40px;
            }
        }

        /* Loading Animation */
        .premium-loading {
            display: inline-block;
            width: 25px;
            height: 25px;
            border: 4px solid rgba(211, 112, 30, 0.3);
            border-radius: 50%;
            border-top-color: #d3701e;
            animation: premiumSpin 1s ease-in-out infinite;
        }

        @keyframes premiumSpin {
            to { transform: rotate(360deg); }
        }

/* ----------------------------Galary-Css-------------------------- */
.Gallery-section{
    /* background: black;
    background-image: url(../Assests/bg-01\ 22.png); */
        background: rgb(255, 255, 255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 3px solid #e51a23;
    padding-bottom: 46px;
}

.gallary-con {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    gap: 24px;
    margin: 0 auto;
    justify-content: center;
    border-radius: 6px;
    margin-top: 16px;
}

.Gallar-img {
    /* flex-basis: calc(33.33% - 24px);  */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: url(../Assests/bg-image-hover.png); */
    background: linear-gradient(to right, #ff7e00, #ffcc00);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    border-radius: 12px;
    flex-direction: column;
}



.background-cars {
    cursor: pointer;
}

.background-cars img {
    object-fit: cover; /* Cover the container without distortion */
    width: 100%;
    height: 100%;
    position: relative;
    top: 6px;
    left: -6px;
    transition: all 0.3s ease-in-out; /* Add smooth transition */
}

.Gallar-img:hover .background-cars img {
    top: -6px;
    left: 6px;
}



#carouselModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: start;
    z-index: 9999;
}

.carousel-div{
    display: flex;
    justify-content: center;
    align-items: start;
    height: 100%;
    width: 100%;
}

#carouselContainer {
    position: relative;
    top: 40%;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.Image-left{
    position: relative;
    left: 104px;
    z-index: 1;

}
.Image-center{
    position: relative;
    z-index: 2;
    top: -25px;
}
.Image-right{
    position: relative;
    left: -104px;
    z-index: 1;

}
.carouselImages-left{
    max-width: 500px;
    max-height: 300px;
    border-radius: 16px;
    border: 2px solid orange;
}
.carouselImages {
    width: 450px;
    max-width: 500px;
    max-height: 300px;
    border-radius: 16px;
    border: 2px solid orange;
}
.carouselImages-right{
    max-width: 500px;
    max-height: 300px;
    border-radius: 16px;
    border: 2px solid orange;
}

.carouselContainer-button {
    border: 2px solid orange;
    color: orange;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    background: transparent;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.carouselContainer-button img{
    height: 22px;
    width: 20px;
}
.cross-btn:hover {
    background-color: orange;
}
.carouselContainer-button:hover {
    background-color: rgb(43, 41, 41);
}

.cross-btn:hover img {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.cross-btn {
    background: transparent;
    border: 2px solid orange;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.cross-btn img {
    width: 22px;
    height: 22px;
}

.arrow-div {
    display: flex;
    gap: 40px;
    position: relative;
    z-index: 9999999;
}
.car-con{
    display: flex;
}
/* ------------------PFF--Section------------------- */

.PFF-Section{
    border-bottom: 3px solid #e51a23;
}

.slidcontain-3 {
        overflow-x: hidden;
    /* background: linear-gradient(30deg, #ff851E, #ffc703); */
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    background: #C5B358;
    padding: 11px 0px;
    overflow: hidden;
    position: relative;
    border-bottom: 3px solid red;
}
.slide-para3 {
    flex: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 94px;
}
.slide-para4 {
    flex: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 94px; */
}
.slide-para3 img {
    width: 6%;
    transform: rotate(1deg);
}
.slide-para4 img {
    width: 6%;
    transform: rotate(1deg);
}
.slide-para3 h4 {
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 18px;
    margin: 0px;
    text-transform: uppercase;
    padding-bottom: 6px;
    /* padding: 8px 0px; */
    padding-top: 10px;
}
.slide-para4 h4 {
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 18px;
    margin: 0px;
    text-transform: uppercase;
    padding-bottom: 6px;
    /* padding: 8px 0px; */
    padding-top: 10px;
}
.slide-item3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: none;
    border-right: none;
    min-width: 32%;
    box-sizing: border-box;
}
.slide-item4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: none;
    border-right: none;
    min-width: 20%;
    box-sizing: border-box;
}

.PFF-Sec{
    width: 90%;
    display: flex;
    margin-top: 40px;
    gap: 20px;
}
.Pff-con{
    /* background-image: url(../Assests/badge-img/hero/texture-golden.jpg); */
    /* background: #C5B358; */
    background: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    /* padding-bottom: 66px; */
}
.ppf-child {
    /* background-color: rgba(0, 0, 0, 0.185); */
}

.add-to-cart .service-para a {
            background: unset;
            border: unset;
            color: unset;
            font-weight: unset;
            font-size: unset;
            padding: unset;
            width: fit-content;
}

.PFF-right-sec {
    display: flex;
    flex-direction: column;
    gap: 38px;
}
.pff-image-sec{
    display: flex;
    width: 412px;
    height: 210px;
    background-image: url(../Assests/frontporsha01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    justify-content: center;
    overflow: hidden;
    align-items: end;
    /* padding-bottom: 32px; */
}
.Pff-para{
    width: 412px;
    display: flex;
    justify-content: center;
}
.Pff-para h4 {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
  }

  .Pff-para h4::before,
  .Pff-para h4::after {
    content: "";
    position: absolute;
    left: 0;
    height: 3px; /* Thickness of lines */
    background: linear-gradient(30deg, #ff851E, #ffc703);
  }

  .Pff-para h4::before {
    bottom: 0;
    width: 100%;
  }

  .Pff-para h4::after {
    bottom: -10px;
    left: 12px;
    width: 90%;
  }
  .Pff-para h4 {
    color: #fff;
    margin: 0px;
    font-size: 18px;
  }
.pff-image-sec2{
    display: flex;

    width: 412px;;
    height: 210px;
    background-image: url(../Assests/frontporsha03.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    justify-content: center;
    overflow: hidden;
    align-items: end;
    /* padding-bottom: 32px; */
}
.pff-image-sec3{
    display: flex;
    width: 412px;
    height: 210px;
    background-image: url(../Assests/frontporsha02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    justify-content: center;
    overflow: hidden;
    align-items: end;
    /* padding-bottom: 32px; */
}

.add-card {
    background-color: white;
    border-radius: 25px !important;
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    width: 80%;
}
.add-card img {
    width: 100%;
}
.add-card > button {
    border: none;
    /* color: #000; */
    background-color: #000 !important;
}
.add-to-cart .service-para {
    background: linear-gradient(180deg, rgba(196,180,131,1) 0%, rgba(91,85,70,1) 49%, rgba(0,0,0,1) 100%);
    border-radius: 25px;
    border: 3px solid #ffa500;
    /* width: 100%; */
}
.add-to-cart .service-para:hover{
    background: linear-gradient(30deg, #d3701e, #ffdc63);
        border: 3px solid #a0a0a0;
    color: white;
}
.add-to-cart .service-para:hover span, .add-to-cart .service-para:hover{
    color: white;
}
.add-to-cart .service-para button {
    background: linear-gradient(30deg, #f79545, #f5cc3c);
    border: none;
    color: black;
}
.add-to-cart .serv-img span {
    display: block;
    transition: all .3s ease-in-out;
}
.add-to-cart .service-para p {
    height: auto;
}
.add-to-cart .service-para p {
    font-size: 20px;
    color: white;
}
/* .add-to-cart .service-first img {
    width: 100% !important;
    height: 90%;
} */
.add-to-cart .serv-img {
    height: auto;
}

.add-to-cart .unCard .serv-img {
    height: auto;
}
.add-to-cart .service-first {
    overflow: hidden;
    height: 180px;
}
.add-to-cart .service-first img {
    border-radius: 15px;
}
.add-to-cart h1 {
    text-align: center;
    padding-top: 2rem;
}
.slidcontain-4 {
    overflow-x: hidden;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    padding: 8px 0px;
    overflow: hidden;
    position: relative;
    width: 100%;
    /* height: 53.13px; */
    /* transform: rotate(-30deg); */
    z-index: 0;
    /* top: 77px; */
    /* left: 45px; */
}
.slide-para4 h4 {
    font-family: "Orelega One", serif;
    font-weight: 400;
    font-size: 18px;
    margin: 0px;
    text-transform: uppercase;
    padding-bottom: 1px;
    /* padding: 8px 0px; */
    padding-top: 2px;
}
.slide-para4 {
    flex: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}
.slide-item4-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: none;
    border-right: none;
    /* min-width: 108%; */
    box-sizing: border-box;
}
.slide-item4-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: none;
    border-right: none;
    min-width: 82%;
    box-sizing: border-box;
}
.slide-item4-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: none;
    border-right: none;
    min-width: 92%;
    box-sizing: border-box;
}
.PFF-sec-2{
    display: flex;
    width: 100%;
    justify-content: end;
    flex-direction: column;
    align-items: end;
    gap: 12px;
}
.PFF-sec-22{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    /* align-items: end; */
    gap: 12px;
}


.PFF-h1{
    margin-top: 54px;
}
.PFF-h1 h1 {
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 53px;
    color: #fff;
    text-transform: uppercase;
}
.PFF-para p{
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    line-height: 48px;
    letter-spacing: 0px;
}
.PFF-h2 h1 {
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 37px;
    color: #fff;
    text-transform: uppercase;
}
.pff-btn button{
    /* background: linear-gradient(30deg, #ff851E, #ffc703); */
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    border-radius: 7px;
    border: none;
    padding: 8px 28px;
}
.PFF-left-sec{
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.cross-btn-div{
    position: absolute;
    top: -50%;
    right: 20%;
}
/* --------------------------------our-offer's------------------- */
.offer-sec {
    background: black;
    background-image: url(../Assests/bg-offer.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    border-bottom: 3px solid #ffff;
}
.offers-con{
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    /* margin-bottom: 40px; */
}
.offfers-input{
    flex: 60%;
}
.offfers-input h1 {
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 50px;
    color: #fff;
}
.offers-heading {
    margin-top: 86px;
    flex: 40%;
    display: flex;
    flex-direction: column;
    gap: 22px;

}
.offer-content{
    display: flex;
    justify-content: center;
}
.offer-form{
    display: flex;
    flex-direction: column;
}
.offer-form input{
    background: #5E5E5E;
    opacity: 51%;
    font-size: 18px ;
    font-family: "Montserrat", sans-serif;
    color: white;
}
.offer-form label{
    color: white;
    font-size: 18px ;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}
.offers-num{
    display: flex;
    justify-content: center;
}
.offers-num h1{
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 50px;
    color: #fff;
}
/* -------------------------------our-packages---------------------------------- */

.packages-sec {
    background: black;
    background-image: url(../Assests/package-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 3px solid #ffff;
}

.package-slidtwo {
    transform: rotate(-5deg);
    margin-top: 0px;
    opacity: 100%;
    margin-bottom: 39px;
    margin-top: -68px;
}
.packages-slide-item {
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: none;
    border-right: none;
    min-width: 30%;
    box-sizing: border-box;
}
.packages-slide-para {
    flex: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}
.packages-slide-para h4 {
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 36px;
    margin: 0px;
    text-transform: uppercase;
    padding-bottom: 6px;
    /* padding: 8px 0px; */
    padding-top: 10px;
}
.packages-slide-para img {
    width: 8%;
    transform: rotate(7deg);
}

.package-con{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    padding: 20px;
    width: 82%;
}



.packages {
    flex: 1 1 300px;
    max-width: 32%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(0deg, #ff851E, #ffc703);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 518px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* justify-content: center; */
}
.car-bg{
    background-image: url(../Assests/packages-bg-car.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 80px;
    /* padding: 0; */
    padding-top: 0px;
    padding-left: 0px;
    gap: 0px;
}
.car-bg2 {
    background-image: url(../Assests/packages-bg-car.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 32px;
    /* padding: 0; */
    padding-top: 0px;
    padding-left: 0px;
    gap: 0px;
}
.car-bg h1 {
    color: #fff;
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 28px;
    margin: 0px;
    text-transform: uppercase;
}
.car-bg2 h1 {
    color: #fff;
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 28px;
    text-transform: uppercase;
    margin: 0px;
}
.car-bg p {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 13px;
    opacity: 50%;
    margin: 0px;
    text-align: center;
}
.car-bg2 p {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 13px;
    opacity: 50%;
    margin: 0px;
    text-align: center;
}
.package-btn{
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}
.package-btn button {
    background: #000;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: bold;
    border-radius: 20px;
    padding: 8px 24px;
}
.package-center{
    display: flex;
    justify-content: center;
    margin-top: 38px;
    padding-bottom: 22px;
}
/* .packages-para-con{
    height: 350px;

} */

.packages {
    flex: 1 1 300px;
    max-width: 35%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 36% 2%;
    /* background: linear-gradient(0deg, #bd7f2d, #f9e283e6); */
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.para-icon{
    margin-top: 14px;
}

.packages-para-con p{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 0px 8px;
    line-height: 44px;
    margin: 0px;

}

/* --------------------uploaded-video--------------------------------- */

.upload-video {
    /* background: black; */
    /* background-image: url(/Assests/badge-img/hero/badge-background.png); */
    background: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    height: 100%;
    color: rgb(0, 0, 0);
    border-bottom: 3px solid #e51a23;
}
.upload-child {
    /* background-color: #00000059; */
}


.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire section */
    z-index: 1; /* Places the video behind the content */
}
/* .video-set {
    width: 626px;
    height: 625px;
} */

.upload-video h4, .upload-video h1, .upload-video p, .upload-video button {
    margin: 10px 0;
}
.upload-video .content{
    height: auto;
    padding: 3rem 0;
}
.content{
    /* margin-top: 18px; */
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 100%;
    text-align: center;
    color: white; /* Adjust as needed for contrast */
    padding: 40px;
    z-index: 1;
    /* background: rgba(0, 0, 0, 0.6); */
    background: rgb(255, 255, 255);
}



.uplaodvideo-btn button{

    padding: 4px 1px 4px 14px;
    font-size: 15px;
    font-weight: 500;

}
.uplaodvideo-btn span {
    background-image: url(../Assests/bg-btn-icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 8px;
    margin: -4px 0px -4px 6px;

}
.video-first-head{
    display: flex;
}
.headin-dash{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}
.dash-heading h4 {
    font-family: "Mina", sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #c7b362;
}
.video-head {
    text-align: left;
}
.video-head h1 {
    font-family: "Mina", sans-serif;
    font-size: 66px;
    font-weight: bold;
    background: linear-gradient(#FF851E, #FFC703);
    background: linear-gradient(30deg, #d3701e, #ffdc63);

    background-clip: text;
    color: transparent;
}

.upload-video {
    position: relative;
    overflow: hidden;
    height: auto;
    color: white;
}

.background-video2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;

}

.video-set {
    /* width: 626px;
    height: 625px;
    position: relative;  */
    overflow: hidden; /* Ensures the video stays within bounds */
}

.upload-video {
    z-index: 1;
    /* padding: 20px; */
    text-align: center;
}


.video-content {
    width: 100%;
    padding: 20px 0px 20px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-con {
    display: flex;
    justify-content: center;
    /* padding: 44px 0px; */
    width: 52%;
    /* margin-top: 40px; */
}

.video-para p{
    font-family: "Montserrat", sans-serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 32px;
    color: #c7b362;
    /* text-align: left; */
}
.uplaodvideo-btn{
    display: flex;
    color: #000;
}

/* ----------------------------------Clients-Reviews----------------------------------------- */

.clients-reviews{
    /* background: black;
    background-image: url(../Assests/badge-img/hero/client-banner.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 3px solid #e51a23;
    display: flex;
    flex-direction: column;
}
.client-child {
    /* background-color: #000000ab; */
background-color: #ffffff;
}
.reviews{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 22px;
}

.judo-content {
    color: white;
}
.Pff-con .add-to-cart {
    justify-content: center;
}
.reveiws-con{
    display: flex;
    justify-content: space-between;
    width: 80%;
    background: #fff;
    border-radius: 13px;
    padding: 10px 24px;
}
.google-con{
    display: flex;
    gap: 18px;
}
.google-con p{
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0px;
}
.rating-con{
    display: flex;
    gap: 18px;
}
.rating-con h1 {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0px;
}
.review-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
.review-btn button{
    background: #000;
    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    padding: 10px 15px;
}

.reviews-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 34px;
    max-width: 80%;
    width: 100%;
    margin: 20px auto;
  }

  .gallery-item {
    display: none; /* Hide all items initially */
    background-color: #f4f4f4;
    border: 3px solid #f2bc4e;
    text-align: center;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 18px;
    font-weight: bold;
    border-radius: 32px;
    transition: all .3s ease-in-out !important;
  }

  .gallery-item:hover{
    background-color: #e1e1e1;
    border: 3px solid #ffffff;
  }

  #toggle-view {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    padding: 6px 24px;
    font-size: 16px;
    /* background: linear-gradient(30deg, #ff851E, #ffc703); */
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .review-image-con{
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .review-image-con img {
    width: 56px;
    height: 56px;
    border-radius: 100%;
  }
  .review-image-con h1 {
    font-family: "Montserrat", sans-serif;
    font-size: 23px;
    font-weight: 600;
    text-align:left;
    margin: 0px;
  }
  .review-image-con p {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0px;
  }
  .start-con{
    display: flex;
    gap: 4px;
  }

  .reveiws-para p{
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    margin: 0px;
    color: black;
  }
  .reveiw-icon{
    display: flex;
  }
  .garllery-con{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ----------------------------------Footer--------------------------------------------------- */


footer {
    background-color: #000;
    color: #fff;

    padding: 20px 20px 0px 20px;
  }

  .footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
  }

  .footer-left {
    flex: 30%;
  }
  .footer-center{
    flex: 60%;
  }

  .footer-logo {
    width: 100px;
    margin-bottom: 15px;
  }

  .contact-info,
  .location {
    margin-bottom: 15px;
    font-size: 14px;
    color: #f4c051;
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 20px;
  }
  .contact-info a{
    font-family: "Mina", sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-decoration: none;
    color: #fff;
  }
  .location a{
    font-family: "Mina", sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-decoration: none;
    color: #fff;
  }
  .appointment-btn {
    /* background: linear-gradient(30deg, #ff851E, #ffc703); */
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
  }

  .newsletter-form {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 2px solid #e51a23;
  }

  .newsletter-form input {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    font-family: "Montserrat", sans-serif;
  }

  .subscribe-btn {
    /* background: linear-gradient(30deg, #ff851E, #ffc703); */
    background: linear-gradient(30deg, #d3701e, #ffdc63);
    border: none;
    color: #000;
    padding: 13px 24px;
    cursor: pointer;
    border-radius: 7px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
  }

  .useful-links ul,
  .footer-right ul {
    list-style: none;
  }

  .useful-links li,
  .footer-right li {
    margin-bottom: 10px;
  }

  .useful-links a,
  .footer-right a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
  }

  .useful-links a:hover,
  .footer-right a:hover {
    text-decoration: underline;
  }

  .footer-bottom {
    text-align: center;
    padding: 10px 0px 0px 0px;
    /* border-top: 1px solid #444; */
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .footer-bottom p  {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
  }


 @media (max-width: 768px)  {
    .footer-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .footer-left,
    .footer-center,
    .footer-right {
      min-width: 100%;
    }
  }

  .newsletter-form label{
    color: #f4c051;
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 20px;
  }
  .footer-input-div{
    width: 60%;

  }
  .useful-links{
    display: flex;
    flex-direction: column;
    /* align-items: center;
    justify-content: center; */
  }
  /* .fooetr-sec-heading{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .fooetr-sec-heading h3 {
    color: #FFC703;
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 20px;
  } */
  .footer-links{
    display: flex;
    justify-content: space-around;
    width: 96%;
    margin-top: 38px;
  }
  .footer-links h3 {
    color: #f4c051;
    font-family: "Mina", sans-serif;
    font-weight: bold;
    font-size: 20px;
  }
  .links{
    display: flex;
    gap: 72px;
    margin-top: 26px;
  }

  .footer-links li {
    font-family: "Mina", sans-serif;
    font-weight: 400;
    font-size: 20px;
  }
  .footer-two{
    display: flex;
    flex-direction: column;
  }
  .last-links{
    margin-top: 26px;
  }

  .bootm-div{
    /* background: #fff; */
    width: 100%;
    border-top-left-radius: 32px;
  border-top-right-radius: 32px;

  }

  /* -------------media-querry------------------- */


@media (min-width: 1600px)  {
    .Benefits-sub-section {

        width: 86%;

    }
}
@media (min-width: 1640px)  {
    .package-con{
        width: 81%;
    }
    .car-bg {
        padding-bottom: 82px;
    }
    .car-bg2 {
        padding-bottom: 80px;
    }
    .reviews-gallery {
        max-width: 77%;

    }

}
@media (min-width: 1700px)  {
    .package-con{
        width: 74%;
    }
    .Benefits-sub-section {

        width: 80%;

    }
}

@media (min-width: 1800px)  {
    .contact-set{
        width: 82%;
    }
    .Benefits-sub-section {

        width: 75%;
    }
    .reviews-gallery {
        max-width: 72%;
    }
}
@media (min-width: 1840px)  {
    .package-con{
        width: 70%;
    }
    .car-bg {
        padding-bottom: 76px;
    }
    .car-bg2 {
        padding-bottom: 76px;
    }
    .PFF-right-sec {
        gap: 8px;
    }
    .pff-btn button {
        font-size: 24px;
        padding: 8px 22px;
    }
    .PFF-left-sec {
        gap: 56px;
    }
    .slide-para3 {
        gap: 162px;
    }
}

/* --------------------font-bump------------------------------- */

/* --------------------------pff-header--------------------------------- */
.pff-header-video{
    width: 100%;
    height: 100%;
    border-top: 4px solid #fff;
    /* border-bottom: 4px solid #fff; */
}

.pff-video-content{
    height: 100%;
    width: 100%;
}

.Pff-Head-video {
    width: 100%;
    height: 70vh;
    object-fit: fill;
}


/* -------------------------------pff-header-end------------------------------------------ */

/* -------------------------------------font-bumper-start----------------------------------------------- */

.bumper-section{
    background: url(../Best\ Auto\ Assets/Mask-01.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    justify-content: center;
}
.bumper-section2{
    background: url(../Best\ Auto\ Assets/Mask-02.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    justify-content: center;
}
.bumper-section3{
    background: url(../Best\ Auto\ Assets/Mask-03.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 3px solid #fff;
    padding: 40px 0px;
}
.font-bump{
    display: flex;
    width: 94%;
}
.font-bump2{
    display: flex;
    width: 94%;
    flex-direction: row-reverse;
}
.font-content{
    color: white;
}
.font-content2{
    color: white;
}
.font-content h2{
      font-size: 50px;
      font-weight: bold;
      text-transform: uppercase;
      -webkit-text-stroke: 0.5px #F36A03;
      text-shadow: 0px 0px 4px #F36A03;
      font-family: "Mina", sans-serif;
      font-weight: 700;
}
.font-content2 h2{
    font-size: 50px;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-text-stroke: 0.5px #F36A03;
    text-shadow: 0px 0px 4px #F36A03;
    font-family: "Mina", sans-serif;
    font-weight: 700;
}
.font-content p{
    font-family: "Montserrat", sans-serif;
    font-size: 28px;
    font-weight: 500;
}
.font-content2 p {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 500;
}
.font-para{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.font-para2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    text-align: end;
}
.font-gif{
    width: 50%;
}
.font-gif img{
    width: 100%;
}

.pff-button{
    border: none;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 18px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
}

.pff-pri-sub h4{
    font-family: "Mina", sans-serif;
    font-weight: 700;
    text-align: center;
    color: #fff;
}
/* -------------------------prising------------------------------------------------- */
.pff-pricing{
    background: black;
    background-image: url(../Best\ Auto\ Assets/prising-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 40px 0px;
    border-bottom: 3px solid #fff;
}
.pricing-heading{
    font-family: "Mina", sans-serif;
  font-weight: 700;
  font-size: 37px;
  color: #fff;
}
.pricing-cars{
    display: flex;
    justify-content: space-between;
    width: 80%;
}
.pri-car-con{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.Note-div{
    display: flex;
    width: 80%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

}
.Note-headi-con{
    display: flex;
    width: 100%;
    gap: 10px;
}
.Note-headi-con h2 {
  font-family: "Mina", sans-serif;
  font-weight: 700;
  font-size: 33px;
  color: #fff;
}
.arrow-pff{
    display: flex;
    flex-direction: column;
}

.arrow-pff img {
    opacity: 0; /* Start with images hidden */
    animation: fadeIn 2s ease-in-out infinite; /* Apply the animation */
    transition: transform 0.3s ease;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1; /* Fade in */
    }
    100% {
        opacity: 0; /* Fade out */
    }
}

/* Optional: Stagger the animations for each image */
.arrow-pff img:nth-child(1) {
    animation-delay: 0s;
}

.arrow-pff img:nth-child(2) {
    animation-delay: 0.5s;
}

.arrow-pff img:nth-child(3) {
    animation-delay: 1s;
}
.Note-heading{
    display: flex;
    background: linear-gradient(90deg, #FF851E, #FFC703);
    width: 100%;
    border-radius: 7px;
    padding: 18px;
}
.para-Note{
    width: 70%;
}
.para-Note p{
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin: 0px;
}
.para-note-btn{
    width: 30%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 24px;
}
.Note-button {
    border: none;
    background: black;
    border-radius: 14px;
    color: #fff;
    padding: 8px 14px;
    font-size: 18px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    height: fit-content;
}
.note-bottom h3{
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    color: #fff;
    text-align: center;
    margin: 10px 0px;
}

/* ---------------------------------bottom-pff------------------------- */

.pricing-bottom{
    background: black;
    background-image: url(../Best\ Auto\ Assets/prising-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    padding: 40px 0px;
    border-bottom: 3px solid #fff;
}
.botton-contaner{
    width: 80%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.botton-contaner h1 {
    background: linear-gradient(0deg, #FF851E, #FFC703);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: "Mina", sans-serif;
  font-weight: 700;
  font-size: 62px;
}
.botton-contaner h4 {
    color: #fff;
   font-family: "Mina", sans-serif;
  font-weight: 700;
  font-size: 33px;
}
.timeline {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
  }

  .circle {
    width: 50px;
    height: 50px;
    background: linear-gradient(90deg, #FF851E, #FFC703);
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    padding: 13px;
    z-index: 1;
  }
  .circle-con{
    width: 100%;
  }

  .line {
    width: 72%;
    height: 4px;
    background: linear-gradient(90deg, #FF851E, #FFC703);
    position: absolute;
  }
  .circle-content{
    width: 88%;
    display: flex;
        justify-content: center;
        align-items: center;
  }
  .last-con{
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .last-con h2{
    color: #fff;
   font-family: "Mina", sans-serif;
  font-weight: 700;
  font-size: 24px;

  }
.last-con p{
    color: #fff;
    font-size: 21px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;

  }

  /* --------------------popup-form-pff--------------------- */

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 1000;
}

.popup-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1e1e1e;
    color: white;
    padding: 32px;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    display: none;
    z-index: 1001;
    background-image: url(../Best\ Auto\ Assets/pop-form-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 8px solid #fff;
}
.popup-form-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.popup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
    position: relative;
}

.mail-logo-con{
    width: 100%;
    margin-bottom: 10px;
}
.mail-logo-con img {
    width: 100%;

}
.cross-btn-set {
    position: absolute;
    right: -32px;
    top: -64px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(0deg, #FF851E, #FFC703);
}

.popup-title {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    background: linear-gradient(0deg, #FF851E, #FFC703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Mina", sans-serif;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;


}

.popup-label {
    font-weight: bold;
    /* margin-top: 10px; */
    padding: 0px;
    display: block;
    font-size: 18px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

.popup-options {
    display: flex;
    gap: 10px;

    justify-content: space-between;
}

.popup-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;

    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    position: relative;
    background-color: white;
    outline: none;
    transition: all 0.3s ease;
}

/* Checked Radio Button Styling */
.popup-form input[type="radio"]:checked {
    background: linear-gradient(90deg, #FFC703, #FF851E);
    border: 2px solid #fff;
}

.radio-label{
    font-family: "Mina", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 0px;
}
.radio-con-div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* .popup-form input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(90deg, #FFC703, #FF851E);
    transition: all 0.3s ease;
} */

.poplabel-input{
    font-size: 18px;
    font-weight: 400;
    padding: 0px;
    margin: 0px;
    font-family: "Montserrat", sans-serif;
}


.popup-input {
    width: 100%;
    padding: 4px;
    margin-top: 0px;
    color: #fff;
    border-radius: 5px;
    background: #5E5E5E;
}
.popup-input:-webkit-autocomplete {
    color: #fff !important;
    background: #5E5E5E !important;
}
.popup-submit-btn {
    width: fit-content;
    padding: 6px 16px;
    background: linear-gradient(90deg, #FF851E, #FFC703);
    color: #000;
    border: none;
    cursor: pointer;
    margin-top: 0px;
    font-size: 20px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    border-radius: 7px;
}
.form-submit{
    display: flex;
    justify-content: center;
    margin-top: 24px;

}
.pop-feilds-con{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.success-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #383737;
    color: #fff;
    padding: 20px 64px;

    border-radius: 10px;
    text-align: center;
    display: none;
    z-index: 1002;
}

.enquriy-form {
    /* background: url(../Assests/badge-img/hero/contact-banner.jpg); */
    background-size: cover;
    background-repeat: no-repeat;
  }
  .enquiry-child {
        /* background-color: #000000ad; */
  }

    .enquiry-child .container form {
        background: #303030;
    }
.enquriy-form .top-content {
        color: #fff;
    text-align: center;
    background: #000000cf;
    padding: 0px 0px 30px;
    border-radius: 20px;
    margin-top: 14px;

}
.enquriy-form .top-content a {
    color: #c58203;
}
.enquriy-form .top-content h2 {
    padding-top: 4rem;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 56px;
}
.enquriy-form .top-content p {
    /* font-family: 'DM Sans'; */
    font-size: 15px;
}
.enquriy-form label {
        font-weight: 500;
        font-family: 'Open Sans';
        padding: 0;
        font-size: 15px;
        color: white !important;
}
.enquriy-form select option {
    background-color: rgba(196,180,131,1);
}
.enquriy-form textarea {
    background-color: #ffffff;
}
@media (max-width: 1400px) {
    .add-to-cart .service-para {
        width: 100%;
    }
}
@media (max-width: 1200px) {
    .service-para {
        width: 94%;
    }

}
@media (max-width: 991px) {
    .service-para {
        margin: 12px;
    }

    .service-para p {
        font-size: 22px;
    }
    .Benefits-sub-section {
        width: 70%;
    }
    .gallary-con {
        width: 96%;
    }
    .top-header .container {
        max-width: 1160px;
    }
    #navbarSupportedContent {
        display: none !important;
    }
    .banner-sliders .swiper {
        height: 450px;
    }
}

@media (max-width: 1024px) {
    .package-con {
        width: 98%;
    }
}

@media (max-width: 1130px) {
    .package-con {
        width: 88%;
    }
}
@media (max-width: 1200px) {
    .package-con {
        width: 100%;
    }
    .nav-link {
        font-size: 12px !important;
    }
    .navbar-brand img {
        width: 130px;
    }
}
@media (max-width: 1270px) {
    .package-con {
        width: 92%;
    }
}
@media (max-width: 1320px) {
    .package-con {
        width: 88%;
    }
}
@media (max-width: 1372px) {
    .package-con {
        width: 88%;
    }
}
@media (max-width: 920px) {
    .packages {
        max-width: 42%;
    }
}

@media (max-width: 991px) {
    .packages {
        max-width: 39%;
    }
    .hero-text {
        width: 100%;
    }
    .hero-text h1 {
        font-size: 55px;
    }
}
@media (max-width: 1024px) {
    .packages {
        max-width: 37%;
    }
}
@media (max-width: 1040px) {
    .packages {
        max-width: 40%;
    }
}
@media (max-width: 1100px) {
    .packages {
        max-width: 39%;
    }
}
@media (max-width: 1130px) {
    .packages {
        max-width: 36%;
    }
}
@media (max-width: 1194px) {
    .packages {
        max-width: 31%;
    }
}
@media (max-width: 1200px) {
    .packages {
        max-width: 50%;
        height: auto;
    }
}

@media (max-width: 1210px) {
    .benefits-row02 {
        width: 100%;
    }

}
@media (max-width: 1024px) {
    .Benefits-sub-section {
        width: 70%;
    }
}

@media (max-width: 1210px) {
    .Benefits-sub-section {
        width: 70%;
    }
}
@media (max-width: 1222px) {
    .Benefits-sub-section {
        width: 95%;
    }
}
@media (max-width: 1250px) {
    .Benefits-sub-section {
        width: 93%;
    }
}
@media (max-width: 1320px) {
    .Benefits-sub-section {
        width: 92%;
    }
}
@media (max-width: 1372px) {
    .Benefits-sub-section {
        width: 87%;
    }
}
@media (max-width: 1402px) {
    .Benefits-sub-section {
        width: 84%;
    }
}
@media (max-width: 1420px) {
    .Benefits-sub-section {
        width: 82%;
    }
}

.success-popup p{
    font-weight: 300;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    margin: 0px;
}


.success-btn {

    padding: 6px 30px;
    background: linear-gradient(90deg, #FF851E, #FFC703);
    border: none;
    border-radius: 7px;
    color: #000;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

/* -----------------------------about-Css-------------------------------------------------- */

.About-hero-section {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 118px 0px;
}
.About-deatil-section{
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    text-align: center;
    color: #fff;

    border-bottom: 4px solid #fff;
}

.About-deatil02{
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    text-align: center;
    color: #fff;

    border-bottom: 4px solid #fff;
}

.About-heaing-new{
    display: flex;
    flex-direction: column;
}
.About-heaing-new h1{
    font-weight: 700;
    font-size: 40px;
    line-height: 55px;
    margin: -0.21em 0 10px;
    font-style: italic;
    color: #fff;
}
.About-heaing-new h2{
    font-weight: 700;
    font-size: 40px;
    line-height: 55px;
    margin: -0.21em 0 10px;
    font-style: italic;
    color: #fff;
}
.about-sub-heading h3 {
    word-break: break-word;
    font-weight: 700;
    font-size: 22px;
    color: #e7b000;
}
.about-sub-heading{
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-direction: column;
}

.About-detail-set{
    display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        padding-top: 58px;
        flex-direction: column;
        position: relative;
        padding-bottom: 58px;
}


  /* Collage Styling */
  .collage {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .flip-card {
    background-color: transparent;
    width: 280px;
    height: 288px;
    perspective: 1000px;
  }

  .flip-card2 {
    background-color: transparent;
    width: 480px;
    height: 352px;
    perspective: 1000px;
}

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  .flip-card2:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  @media (max-width: 550px){
    .flip-card2 {

        width: 100%;

    }
  }

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 4px;
    overflow: hidden;
    border: 8px solid;
  }

  .flip-card-front img,
  .flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .flip-card-back {
    transform: rotateY(180deg);
  }

  /* About Text Styling */
  .about-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .about-text-sub {
    text-align: center;
    display: flex;
    justify-content: space-between;
    gap: 22px;
  }
  .about-text-sub-sec {
    text-align: center;
    display: flex;
    justify-content: space-between;
    gap: 22px;
  }

  .about-text-sub01 {
    width: 50%;
  }
  .about-text-sub02 {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about-text-sub03 {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #mainHeading{
    color: #fff;
  }

  .about-text h2 {
    font-size: 50px;
    /* margin-bottom: 15px; */
    font-style: italic;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-align: center;
  }

  .about-text-sub h2 {
    font-size: 50px;
    /* margin-bottom: 15px; */
    font-style: italic;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-align: left;
  }
  .about-text-sub-sec h2 {
    font-size: 50px;
    /* margin-bottom: 15px; */
    font-style: italic;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-align: left;
  }

  .about-text-sub p {
    line-height: 1.8;
    font-size: 18px;
    color: #fff;
    text-align: left;
  }

  .about-text-sub-sec p {
    line-height: 1.8;
    font-size: 18px;
    color: #fff;
    text-align: left;
  }

  .about-text p {
    line-height: 1.8;
    font-size: 18px;
    color: #fff;
  }
  .Heading-carousel-about {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin-top: 0px;
    display: flex;
    position: absolute;
    align-items: center;
}
.name-direc {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
}

/* Hero Section */
.about-hero-section {
    position: relative;
    height: 36vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../Assests/about-bg-1.jpg");
    overflow: hidden;
    transition: background-image 1s ease-in-out;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
  }

  /* Slide Animations */
  .fade-in {
    animation: fadeIn 1s ease-in forwards;
  }

  .fade-out {
    animation: fadeOut 1s ease-out forwards;
  }

  .text-slide-in {
    animation: textSlideInSmooth 1s ease-in-out forwards;
  }

  .text-slide-out {
    animation: textSlideOutSmooth 1s ease-in-out forwards;
  }

  /* Keyframes for Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes textSlideInSmooth {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes textSlideOutSmooth {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(-20px);
      opacity: 0;
    }
  }

  /* Text Styling */
  h1, h2, h3 {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  .why-us-cont{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 56px;
    position: relative;
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .why-us-cont h2 {
    font-size: 50px;
    font-style: italic;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-align: center;
}
.why-us-cont p {
    line-height: 1.8;
    font-size: 18px;
    color: #fff;
}
.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: auto;
  }

  .carousel {
    display: flex;
    transition: transform 0.8s ease-in-out;
  }

  .carousel-slide {
    min-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  }

  .carousel-slide.active {
    opacity: 1;
    transform: scale(1);
  }

  .why-us-content {
    width: 50%;
    padding: 20px;
    text-align: left;
    width: 90%;
    padding: 10px;
    text-align: center;
  }

  .why-us-content h2 {
    font-size: 36px;
    margin-bottom: 10px;
    color: #333;
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 10px;
    padding: 5px 32px;
  }

  .why-us-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #9f9d9d;
    padding: 5px 32px;
    text-align: justify;
    font-size: 1rem;
    line-height: 1.6;
}

  .why-us-images {
    width: 50%;
    display: flex;
    justify-content: center;
  }

  .why-us-images img {
    width: 70%;
    height: 380px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }

  .carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
  }

  .carousel-controls button {
    background: linear-gradient(30deg, #ff851E, #ffc703);
    color: #fff;
    border: none;
    padding: 10px 12px;
    font-size: 1rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .carousel-controls button:hover {
    background: linear-gradient(30deg, #6e3303, #a17f01);
  }

  .carousel-controls i {
    pointer-events: none;
  }
  .carousel-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    position: relative;
  }



  .carousel-slide.active {
    opacity: 1;
    transform: scale(1);
  }



  /* .carousel-controls button {
    font-size: 0.8rem;
    padding: 8px;
  } */

  /* Base for all animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease-out;
}

/* Activated class */
.in-view {
  opacity: 1;
  transform: translateY(0);
}

.about-text h2.animate-on-scroll {
  transform: scale(0.8);
  opacity: 0;
}

.about-text h2.in-view,
.why-us-cont h2.in-view {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s;
}

/* .fliping-card-image {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s;
} */


/* Line Images Animation */
.heding-image img.animate-on-scroll {
  width: 0;
}

.heding-image img.in-view {
  width: 100%;
  transition: width 1s ease-out;
}

/* Paragraphs Animation */
.about-text p.animate-on-scroll,
.about-text-sub p.animate-on-scroll {
  transform: translateX(-50px);
  opacity: 0;
}

.about-text p.in-view,
.about-text-sub p.in-view {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.8s ease-out, opacity 0.8s;
}

/* Flip Cards Animation */
.flip-card.animate-on-scroll {
  transform: perspective(1000px) rotateY(90deg);
  opacity: 0;
}

.flip-card.in-view {
  transform: perspective(1000px) rotateY(0);
  opacity: 1;
  transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1s;
}


  @media (min-width: 768px) {
    .why-us-content {
      width: 50%;
      text-align: left;
    }

    .why-us-content h2 {
      font-size: 2rem;
    }



  }
  @media (max-width: 768px){
    .about-text-sub{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .about-text-sub-sec{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    .about-text-sub01 {
        width: 100%;
    }
    .about-text-sub02 {
        width: 100%;
    }
    .about-text-sub h2{
        text-align: center;
        font-size: 44px;
    }
    .about-text-sub p{
        text-align: center;
    }
    .about-text-sub-sec h2{
        text-align: center;
    }
    .about-text-sub-sec p{
        text-align: center;
    }
    #mainHeading{
        font-size: 24px;
    }
    #subHeading{
        font-size: 24px;
    }
    .about-sub-heading{
        font-size: 24px;
    }
    .why-us-images img {
        width: 80%;
    }
  }
  @media (max-width: 660px) {
    .carousel-slide {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        opacity: 0;
        transform: scale(0.95);
        transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    }
    .why-us-cont{
        gap: 10px;
    }
    .carousel-controls{
        position: unset;
        justify-content: center;
    gap: 14px;
    transform: translateY(0%);
    margin-top: 18px;
    }
    .why-us-content p{
        font-size: 13px;
        margin: 0px;
        padding: 0px;
        text-align: center;
    }
    .why-us-images img{
        height: 300px;
    }
    .why-us-content h2{
        padding: 0px;
        text-align: center;
    }
    .about-text p{
        font-size: 14px;
    }
    .why-us-images img{
        width: 100%;
    }
    .why-us-images {
        width: 70%;
    }
    #mainHeading{
        font-size: 20px;
        text-align: center;
    }
    #subHeading{
        font-size: 20px;
        text-align: center;
    }
    .about-sub-heading{
        text-align: center;
    }

  }

  .fliping-card-image {
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(0.8);
    opacity: 0;
  }

  .fliping-card-image.zoom-in {
    transform: scale(1);
    opacity: 1;
  }

/* -----------------------------services----------------------------------------- */


  .service-card {
    flex: 1 1 calc(33.333% - 20px);
    margin: 0 10px;
    border: 2px solid rgba(0, 0, 0, 0.7);;
    border-radius: 8px;
    padding: 32px 20px;
    background-color: #1a1a1a;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* width: 50%; */
    margin: 18px 10px;
    background-size: cover !important ;
    background-repeat: no-repeat !important;
    background-position: center !important;
    cursor: pointer;
}
.service-car2 {
    flex: 1 1 calc(33.333% - 20px);
    margin: 0 10px;
    border: 2px solid rgba(0, 0, 0, 0.7);;
    border-radius: 8px;
    padding: 32px 20px;
    background-color: #1a1a1a;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* width: 50%; */
    margin: 18px 10px;
    background-size: cover !important ;
    background-repeat: no-repeat !important;
    background-position: center !important;
    cursor: pointer;
}
.service-card-new {
    flex: 1 1 calc(33.333% - 20px);
    margin: 0 10px;
    border: 2px solid rgba(0, 0, 0, 0.7);;
    border-radius: 8px;
    padding: 32px 20px;
    background-color: #1a1a1a;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* width: 50%; */
    margin: 18px 10px;
    background-size: cover !important ;
    background-repeat: no-repeat !important;
    background-position: center !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
}
.service-card h4 {
    z-index: 9999;
    position: relative;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.service-card .arrow{
    position: relative;
    z-index: 9999;
}
.service-card p {
    z-index: 9999;
    position: relative;
}

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent black */
    z-index: 1; /* Place the overlay below the text */
    transition: background 0.3s ease;
    z-index: 999;

}

.service-card-marquee {
    background: linear-gradient(30deg, #ff851E, #ffc703);
    color: #000;
    font-weight: 600;
    z-index: 999999;
    position: relative;
    top: 6px;
}





  .service-card:hover {
    border: 2px solid;
    border-color: orange;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .subtext,
  .arrow {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease-in-out;
  }

  .service-card:hover .subtext,
  .service-card:hover .arrow {
    transform: translateX(0);
    opacity: 1;
  }
.icon-sec{
    border-bottom: 2px solid white;
}
  .icon-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(0deg, #232323, #000000, #000000, #000000, #232323);
    /* background-color: #000000; */
    padding: 20px;
    color: #fff;
  }

  .icon-box {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    text-align: center;
    margin: 20px;
    /* width: 120px; */
    transition: transform 0.3s ease, background-color 0.3s ease;

  }

  .icon-box img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
  }

  .icon-box h3 {
    font-size: 24px;
    margin: 5px 0;
    transition: color 0.3s ease;

  }

  .icon-box p {
    font-size: 14px;
    margin: 0;
    transition: color 0.3s ease;
  }

  /* Hover Effects */
  .icon-box:hover {
    transform: translateY(-10px);
    background-color: #0a0a0a;
  }

  .icon-box:hover img {
    transform: scale(1.2);
  }

  .icon-box:hover h3,
  .icon-box:hover p {
    color: #e7b000;
  }



  /* Responsive Design */
  @media (max-width: 768px) {
    .icon-box {
      width: 100px;
    }

    .icon-box h3 {
      font-size: 20px;
    }

    .icon-box p {
      font-size: 12px;
    }
  }

  /* ---------------------Customer-Rides-Gallery--------------------------------------------- */
/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four columns */
    gap: 20px; /* Space between cards */
    padding: 10px; /* Padding around the grid */
}

.shop06::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 20px solid transparent !important; /* Adjust the border thickness */
    background: linear-gradient(180deg, #ff851e99, #ffc70326);
    clip-path: polygon(
      10% 0%, 90% 0%, 100% 10%, 100% 90%,
      90% 100%, 10% 100%, 0% 90%, 0% 10%
    ) !important; /* Creates the cut corners effect */
    pointer-events: none !important; /* Keeps it non-interactive */
  }

.set-grid {
    padding: 6%;
    /* background: #a7a54a; */
    background: linear-gradient(180deg, #ff851ee6, #ffc70352);
    border-radius: 10px;
    transition: transform 0.3s ease,
}

.set-grid:hover {
    background: linear-gradient(180deg, #ff831ea1, #ffc8032f);
}




/* Gallery Card */
.gallery-card01 {
    position: relative;
    overflow: hidden;
    height: 200px;
    background: #ccc;
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.gallery-card03 {
    position: relative;
    overflow: hidden;
    height: 340px;
    background: #ccc;
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}
.rect-margin{
    margin-top: 8px;
}
.about-text .gallery-grid .rect-margin p {
    line-height: 1.2;
    font-size: 14px;
    color: #ffffffe0;
    margin-top: 16px;
}
.gallery-btn {
    background: linear-gradient(30deg, #ff851E, #ffc703);
    border: none;
    color: #000;
    padding: 10px 24px;
    cursor: pointer;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid black;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.gallery-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 133, 30, 0.3), rgba(255, 199, 3, 0.3));
    z-index: -1;
    transition: all 0.5s ease;
    transform: skewX(-45deg);
}

.gallery-btn:hover:before {
    left: -50%;
}

.gallery-btn:hover {
    color: #fff;
    border-color: #ffc703;
    transform: scale(1.05);
    animation: bounce 0.3s ease-out;
    box-shadow: 0 8px 15px rgba(255, 133, 30, 0.6);
}

@keyframes bounce {
    0%, 100% {
        transform: scale(1.05) translateY(0);
    }
    50% {
        transform: scale(1.05) translateY(-5px);
    }
}

.gallery-btn77{
    margin-top: 12px;
}

.gallery-card01 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card01:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    z-index: 1; /* Bring card to front on hover */
    border: 2px solid orange; /* Orange border */
    animation: glowingBorder 1.5s infinite, subtleRotate 1.5s ease-in-out; /* Add animations */
}

.gallery-card01:hover img {
    transform: scale(1.1);
}


/* Hover Overlay */
.gallery-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    transform: scale(0.9); /* Start smaller */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.gallery-card01:hover .gallery-hover {
    opacity: 1;
    transform: scale(1); /* Expand smoothly */
}

.about-text .gallery-grid p {
    line-height: 1.2;
    font-size: 14px;
    color: #fff;
}

.about-text .gallery-grid h3 {
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hover Text */
.gallery-hover h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    animation: fadeInUp 0.4s ease forwards;
}

.gallery-hover p {
    font-size: 1rem;
    animation: fadeInUp 0.6s ease forwards;
}

.card {
    position: relative;
    width: 190px;
    height: 254px;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 12px;
    gap: 12px;
    border-radius: 8px;
    cursor: pointer;
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    left: -5px;
    margin: auto;
    width: 200px;
    height: 264px;
    border-radius: 10px;
    background: linear-gradient(-45deg, red 0%, yellow 100%);
    z-index: -10;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .card::after {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, red 0%, yellow 100%);
    transform: translate3d(0, 0, 0) scale(0.95);
    filter: blur(20px);
  }

  .heading {
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 700;
  }

  .card p:not(.heading) {
    font-size: 14px;
  }

  .card p:last-child {
    color: #e81cff;
    font-weight: 600;
  }

  .card:hover::after {
    filter: blur(30px);
  }

  .card:hover::before {
    transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
  }








/* Keyframes for Hover Text Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Add glowing border animation */
@keyframes glowingBorder {
    0% {
        box-shadow: 0 0 2px orange, 0 0 5px orange, 0 0 10px orange, 0 0 12px orange;
    }
    50% {
        box-shadow: 0 0 5px orange, 0 0 20px orange, 0 0 20px orange, 0 0 24px orange;
    }
    100% {
        box-shadow: 0 0 2px orange, 0 0 5px orange, 0 0 10px orange, 0 0 15px orange;
    }
}

/* Add subtle rotation animation */
@keyframes subtleRotate {
    0%, 100% {
        transform: scale(1.08) rotate(0deg); /* Match initial hover scale */
    }
    50% {
        transform: scale(1.08) rotate(2deg); /* Add slight rotation */
    }
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px; /* Space between buttons */
}

.page-box {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-box:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    background: linear-gradient(30deg, #ffc703, #ff851E);
    color: #000;
}


/* -------------------------Contact-Us-------------------------------------- */




#map {
    width: 100%;
}
.contact-form-head{
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.contact-wrap{
    text-align: left;
}
.wrapper{
    background: #0000008a;
    padding: 30px;
    border-radius: 10px;
}

.icon-box-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px;
    /* width: 120px; */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.icon-box-contact h3 {
    font-size: 24px;
    margin: 5px 0;
    transition: color 0.3s ease;

  }

  .icon-box-contact p {
    font-size: 14px;
    margin: 0;
    transition: color 0.3s ease;
  }

  /* Hover Effects */
  .icon-box-contact:hover {
    transform: translateY(-10px);
    /* background-color: #000000; */
  }

  .icon-box-contact:hover img {
    transform: scale(1.2);
  }

  .icon-box-contact:hover h3,
  .icon-box-contact:hover p {
    color: #e7b000;
  }
  .contact-form-btn {

    padding-top: 20px;
}
.contact-form-btn button {
    border: none;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    border-radius: 7px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: all 0.4s ease; /* Smooth transition for all properties */
    position: relative; /* For the pseudo-element */
    overflow: hidden; /* Prevents content spill */
  }

  .contact-form-btn button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 300%;
    background: rgba(10, 10, 10, 0.2);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: width 0.5s ease;
    z-index: 0; /* Keep below the text */
  }

  .contact-form-btn button:hover::before {
    width: 150%; /* Expands the shine effect */
  }

  .contact-form-btn button:hover {
    background: linear-gradient(30deg, #ffc703, #ff851E); /* Reverse gradient */
    transform: translateY(-2px) scale(1.05); /* Lift and enlarge effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Glow effect */
  }

  .contact-form-btn button span {
    position: relative;
    z-index: 1; /* Keep text above pseudo-element */
  }


  /* Responsive Design */

  @media (max-width: 1399px) {
    .top-header,
        .header-center,
        .hero-section,
        .contact-section,
        .contact-child,
        .service-section,
        .Benefits-section,
        .Benefits-section,
        .Gallery-section,
        .PFF-Section,
        .clients-reviews {
            overflow: hidden;
        }
  }

  @media (max-width: 991px) {
    .top-header,
        .header-center,
        .hero-section,
        .contact-section,
        .contact-child,
        .service-section,
        .Benefits-section,
        .Benefits-section,
        .Gallery-section,
        .PFF-Section,
        .clients-reviews {
            overflow: hidden;
        }
  }


  @media (max-width: 768px) {
    .icon-box-contact {
      width: 100px;
    }

    .icon-box-contact h3 {
      font-size: 20px;
    }

    .icon-box-contact p {
      font-size: 12px;
    }
  }

  @media (max-width: 767px) {

    .top-header {
        display: none;
    }
    .header-center p {
        font-size: 12px;
    }
    .add-to-cart .service-para p {
        font-size: 18px;
    }
    .hero-text h1 {
        font-size: 40px;
    }
    .banefits-image img {
        width: 100px;
    }
        .top-header,
        .header-center,
        .hero-section,
        .contact-section,
        .contact-child,
        .service-section,
        .Benefits-section,
        .Benefits-section,
        .Gallery-section,
        .PFF-Section,
        .clients-reviews {
            overflow: hidden;
        }
        .banner-sliders .swiper {
            height: 350px;
        }
        .review-btn button {
            padding: 5px 4px;
        }
  }
  @media (max-width: 610px) {
    #hidden-p{
        width: 70% !important;
            font-size: 15px;
            overflow-y: scroll;
    }
    /* .row {
        width: 100%;
    } */
    .benefits-row {
        flex-wrap: wrap;
    }
    .para-set {
        width: 66%;
    }
    .hidden-para {
        width: 100% !important;
    }
    /* .Benefits-sub-section {
        overflow: hidden;
    } */
  }
  @media (max-width: 476px) {
    /* .benefits-row {
        max-width: 400px;
    } */
    .benefits-para {
        left: -30px;
    }
    .hidden-con p {
        font-size: 22px;
    }
    #hidden-p {
        height: 150px;
        width: 100% !important;
    }
    .benefits-row02 {
        display: block;
                /* align-items: center; */
    }
    .hidden-con {
                padding-left: 33px;
    }
    .serv-img .un-height {
        height: auto;
    }
    #hidden-p {
            padding-left: 30px;
                padding-right: 30px;
    }
    .banefits-image02 {
        display: flex;
        width: 50%;
        margin: 0 auto;
        height: auto;
     }
    #banefits-image-img02 {
        height: auto;
    }
    .hidden-con02 p {
        font-size: 22px;
    }
    #hidden-p02 {
            height: 135px;
            overflow-y: scroll;
    }
        .add-to-cart .service-para {
            width: 97%;
        }
        .hidden-para02 {
            height: auto;
        }
    .add-to-cart .service-para {
        width: 75%;
        margin: 35px auto;
    }
        .Pff-con {
            padding-bottom: 66px;
        }
    .add-to-cart .serv-img {
        height: auto;
    }
    .reveiws-con {
        justify-content: center;
        flex-wrap: wrap;
    }
    .review-image-con h1 {
        font-size: 24px !important;
    }
    .newsletter-form {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .links {
        display: block;
    }
    .footer-links li {
        text-align: left;
    }
    .bootm-div {
        width: 90%;
    }
    .footer-bottom p {
        font-size: 17px;
        padding: 5px 0;
    }
    /* .top_icons {
        display: none;
    } */
    .top_icons {
        gap: 6px;
    }
     .top_icons a {
        height: 30px;
        width: 30px;

     }
     .top_icons a i {
        font-size: 14px;
     }
    .navbar .navbar-toggler {
        position: absolute;
        right: 10px;
        z-index: 5;
        top: 30px;
    }
    .contact-form h3, .service-text h3 {
        font-size: 42px;
    }
    h1 {
        font-size: 32px !important;
    }
    .hero-text h1 {
        white-space: wrap;
    }
    .indus-heading h1 {
        font-size: 28px !important;
    }
    /* .gallery-item  {
        width: 65% !important;
    } */
        .heading-container h1 {
            padding: 5px;
        }
        .top-header, .header-center, .hero-section, .contact-section, .contact-child, .service-section, .Benefits-section, .Benefits-section, .Gallery-section, .PFF-Section, .clients-reviews{
            overflow: hidden;
        }
                .para-set01 {
                    width: 100%;
                }
                .banner-sliders .swiper {
                    height: 260px;
                }
                .nav-icons-parent {
                    position: absolute;
                    right: 65px;
                    top: 33px;
                }
    .navbar-toggler {
        padding: 3px 4px;
    }
    .shop_icons a i {
        font-size: 18px;
    }
    .nav-icons-parent {
        gap: 8px;
    }
    }
    @media (max-width: 388px) {
        .benefits-para {
            left: 0px;
        }
        .para-set {
            width: 80%;
        }
        .banefits-image {
            top: 64px;
        }
        #hidden-p {
            height: 180px;
        }
        .navbar-brand img {
            width: 95px;
        }
        .nav-icons-parent {
            top: 26px;
        }
        .navbar .navbar-toggler {
            top: 23px;
        }
        }
        @media (max-width: 340px) {
            .navbar-brand img {
                width: 80px;
            }
            .top_icons a {
                height: 25px;
                width: 25px;
            }
            .top_icons {
              margin-bottom: 0px;
            }
            .navbar .navbar-toggler {
                top: 18px;
            }
        }
.icon-sec-contact {
    border-bottom: 2px solid white;
    border-top: 2px solid white;
}


/* -----------------------------------------------Ceramic Coating----------------------------------------------- */

.flip-card3 {
    background-color: transparent;
    width: 100%;
    height: 430px;
    perspective: 1000px;
}

.flip-card3 .flip-card-front img, .flip-card3 .flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.flip-card3:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .Coating-sub02 {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: start;
}

.coating-text-sub {
    text-align: center;
    display: flex;
    justify-content: space-between;
    gap: 22px;
    flex-direction: column;
    align-items: center;
}
.coating-text-sub summary{
    text-align: left;
}

.hidden-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    display: none;
}

.visible-content {
    max-height: 500px; /* Adjust based on content height */
    opacity: 1;
    overflow: hidden;
    display: block;
    animation: slideDown 0.5s ease forwards;
}


@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px; /* Match the visible-content max-height */
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        max-height: 500px;
        opacity: 1;
    }
    to {
        max-height: 0;
        opacity: 0;
    }
}

.sliding-up {
    animation: slideUp 0.5s ease forwards;
}

#toggle-btn {
    color: #ff851E;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: color 0.3s ease;
}

#toggle-btn:hover {
    color: #ffc703;
}

.accordion {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
  }

  .accordion-item {
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .accordion-header {
    background-color: #000;
    color: white;
    padding: 15px;
    text-align: left;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
  }

  .accordion-header:hover {
    background-color: #383737;
  }

  .accordion-body {
    background-color: #000;
    padding: 15px;
    display: none;
    font-size: 14px;
    color: #fff;
    border-top: 1px solid #ddd;
    max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  }


  .accordion-body p {

    padding: 15px;
    text-align: left;
    font-size: 14px;
    color: #fff;

  }

  .accordion-item.active .accordion-body {
    display: block;
    max-height: 200px; /* Adjust based on your content */
    padding: 15px; /* Ensures smooth padding animation */
  }

  .accordion-item.active .accordion-header {
    background-color: #000;
  }

  .accordion-item .accordion-body p {
    margin: 0;
  }

  /* Animation */
  .accordion-header {
    animation: fadeIn 0.5s ease-out;

  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .arrow-con img {
    opacity: 0;
    animation: fadeIn-new 2s ease-in-out infinite;
}

.accordian-set{
    display: flex;
    gap: 6px;
}



.features{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 56px;
    position: relative;
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .features h2 {
    font-size: 50px;
    font-style: italic;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-align: center;
}
.features h3 {
    font-size: 22px;
    font-style: italic;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0px;
}
.features p {
    line-height: 1.6;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
}

@keyframes fadeIn-new {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1; /* Fade in */
    }
    100% {
        opacity: 0; /* Fade out */
    }
}
.caramic-image {
    width: 50%;
    height: auto;

    /* margin: 0 auto;  */
    display: flex;
  }
.caramic-image{
    width: 56%;
}
.caramic-content{
    width: 36%;
    background: #0000007d;
    border-radius: 12px;
}
.caremiac-cont-set{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 14px 22px;

}
.about-text .caremiac-cont-set h2 {
    font-size: 26px;
    margin: 0px;
}
.about-text .caremiac-cont-set p {
    font-size: 12px;
    margin: 0px;
    font-weight: 400;

}
.car-caremic-sec{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.caramic-image img{
    width: 100%;
    height: 100%;
    animation: movement 1s ease-in-out infinite;
    position: relative;
}


@keyframes movement {
    0% {
        top: 2px;
    }
    50% {
        top: -4px;
    }
    100% {
        top: 2px;
    }
}

#dropdown-set {
    display: flex;
    align-items: center;
  }

  #slide-nav {
    flex-direction: column;
    transition: 0.5s ease-out;
  }

  #navbarSupportedContent {
    display: flex;
    flex-direction: column;
    /* margin-top: 32px; */
    transition: margin-top 0.5s ease-out; /* Smooth transition for margin-top */
  }

  #hidden-content-nav {
    display: none;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    max-height: 0;
    opacity: 0; /* Start with opacity 0 */

    /* background: #171821; */
    border-radius: 12px;
  }

  #hidden-content-nav.show {
    display: block;
    max-height: 1000px;
    opacity: 1;
  }

  #hidden-slide {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    gap: 6px;
    margin-bottom: 66px;
    justify-content: center;
  }

  .nav-hidden-item {
    position: relative;
    font-size: 11px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0px;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(30deg, #ff851E, #ffc703);
    padding: 4px 4px;
    position: relative;
    transition: 2 ease-in;
}

  .nav-hidden-item:hover {
    color: #000;
    padding: 6px 4px;
  }


  .mobile-nav2 {
      display: none;
      width: 100%;
      /* background-color: #aacde9; */
      background: linear-gradient(180deg, #000, #1a1a1a, #161616, #000);
      margin-top: 12px;
      position: fixed;
      z-index: 99;
      bottom: 0;
    left: 0;
  }

  .mobile-nav2-ul {
      display: flex;
      justify-content: space-between;
      align-items: end;
      padding: 12px 4px;
      margin: 0px;

  }

  .mobile-nav2-ul li {
      width: 50%;
      z-index: 999;
  }

  .li-icon {
      display: flex;
      flex-direction: column;
      text-align: center;

  }

  .mobile-nav2-ul li a {
      font-size: 11px;
      line-height: 20px;
      z-index: 999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: #fff;
  }

  .whatsApp-logo {
      position: absolute;
      bottom: 32px;
      border-radius: 50%;
      width: 50px;
      /* Adjust as needed */
      height: 50px;
      /* Adjust as needed */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease-in-out;
      animation: plusAnimation 1s infinite ease-in-out;
  }

  @keyframes plusAnimation {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.2);
      }
  }

  .whtsp {
      position: relative;

  }

  .mobile-nav2-ul i {
      font-size: 22px;
      color: #dec574;
  }

  @media screen and (max-width:1400px) {
    .nav-link {
        padding: 0px 5px !important;
    }
  }
  @media only screen and (max-width: 660px) {
      .mobile-nav2 {
          display: block;
      }
  }

                .luxe-labels-showcase {
                    position: relative;
                    min-height: 100vh;
                    padding: 80px 20px;
                    /* background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); */
                }
        
                /* .luxe-labels-showcase::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-image:
                        radial-gradient(circle at 25% 25%, rgba(211, 112, 30, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 75% 75%, rgba(255, 220, 99, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 50% 50%, rgba(211, 112, 30, 0.05) 0%, transparent 50%);
                    background-size: 400px 400px, 300px 300px, 200px 200px;
                    background-position: 0 0, 100% 100%, 50% 50%;
                    animation: luxe-floating-orbs 20s ease-in-out infinite;
                    pointer-events: none;
                } */
        
                @keyframes luxe-floating-orbs {
        
                    0%,
                    100% {
                        background-position: 0 0, 100% 100%, 50% 50%;
                    }
        
                    33% {
                        background-position: 100% 0, 0 100%, 80% 20%;
                    }
        
                    66% {
                        background-position: 0 100%, 100% 0, 20% 80%;
                    }
                }
        
                .luxe-showcase-container {
                    max-width: 1200px;
                    margin: 0 auto;
                    position: relative;
                    z-index: 1;
                    background: #000000cf;
                    border-radius: 24px;
                    padding: 26px 0px;
                }
        
                .luxe-showcase-header {
                    text-align: center;
                    margin-bottom: 40px;
                    opacity: 0;
                    animation: luxe-fade-in-up 1s ease-out forwards;
                }
        
                .luxe-showcase-header h2 {
                    font-size: 3.5rem;
                    font-weight: 700;
                    background: linear-gradient(135deg, #d3701e 0%, #ffdc63 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    margin-bottom: 20px;
                    letter-spacing: 2px;
                }
        
                .luxe-showcase-header .luxe-subtitle {
                    font-size: 1.2rem;
                    color: #fff;
                    font-weight: 600;
                }
        
                .luxe-labels-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                    gap: 30px;
                    margin-top: 40px;
                }
        
                .luxe-label-card {
                    position: relative;
                    background: rgba(255, 255, 255, 0.02);
                    border-radius: 20px;
                    padding: 30px;
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(211, 112, 30, 0.2);
                    overflow: hidden;
                    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                    opacity: 0;
                    animation: luxe-fade-in-up 0.8s ease-out forwards;
                }
        
                .luxe-label-card:nth-child(1) {
                    animation-delay: 0.1s;
                }
        
                .luxe-label-card:nth-child(2) {
                    animation-delay: 0.2s;
                }
        
                .luxe-label-card:nth-child(3) {
                    animation-delay: 0.3s;
                }
        
                .luxe-label-card:nth-child(4) {
                    animation-delay: 0.4s;
                }
        
                .luxe-label-card:nth-child(5) {
                    animation-delay: 0.5s;
                }
        
                .luxe-label-card:nth-child(6) {
                    animation-delay: 0.6s;
                }
        
                .luxe-label-card:nth-child(7) {
                    animation-delay: 0.7s;
                }
        
                .luxe-label-card:nth-child(8) {
                    animation-delay: 0.8s;
                }
        
                .luxe-label-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(135deg, rgba(211, 112, 30, 0.1) 0%, rgba(255, 220, 99, 0.1) 100%);
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    border-radius: 20px;
                }
        
                .luxe-label-card:hover::before {
                    opacity: 1;
                }
        
                .luxe-label-card:hover {
                    transform: translateY(-10px) scale(1.02);
                    border-color: rgba(211, 112, 30, 0.6);
                    box-shadow:
                        0 20px 40px rgba(211, 112, 30, 0.2),
                        0 0 60px rgba(255, 220, 99, 0.1);
                }
        
                .luxe-label-preview {
                    position: relative;
                    width: 100%;
                    height: 260px;
                    background: #1a1a1a;
                    border-radius: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;
                    overflow: hidden;
                    border: 2px solid rgba(255, 255, 255, 0.1);
                    transition: all 0.3s ease;
                }
        
                .luxe-label-card:hover .luxe-label-preview {
                    border-color: rgba(211, 112, 30, 0.5);
                }
        
                .luxe-label-preview::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 100px;
                    height: 100px;
                    background: linear-gradient(45deg, #d3701e, #ffdc63);
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                    opacity: 0.1;
                    transition: all 0.3s ease;
                }
        
                .luxe-label-card:hover .luxe-label-preview::after {
                    width: 120px;
                    height: 120px;
                    opacity: 0.2;
                }
        
                .luxe-label-typography {
                    position: relative;
                    z-index: 2;
                    font-size: 1.5rem;
                    font-weight: bold;
                    background: linear-gradient(135deg, #d3701e 0%, #ffdc63 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    text-align: center;
                    transition: all 0.3s ease;
                }
        
                .luxe-label-card:hover .luxe-label-typography {
                    transform: scale(1.1);
                }
        
                .luxe-label-details {
                    position: relative;
                    z-index: 2;
                }
        
                .luxe-label-title {
                    font-size: 1.4rem;
                    font-weight: 600;
                    color: #ffffff;
                    margin-bottom: 10px;
                    transition: color 0.3s ease;
                }
        
                .luxe-label-card:hover .luxe-label-title {
                    color: #ffdc63;
                }
        
                .luxe-label-description {
                    font-size: 0.95rem;
                    color: #ffffff;
                    line-height: 1.6;
                    margin-bottom: 15px;
                }
        
                .luxe-label-tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                }
        
                .luxe-tag {
                    padding: 6px 12px;
                    background: rgba(211, 112, 30, 0.2);
                    border: 1px solid rgba(211, 112, 30, 0.3);
                    border-radius: 20px;
                    font-size: 0.8rem;
                    color: #ffdc63;
                    transition: all 0.3s ease;
                }
        
                .luxe-label-card:hover .luxe-tag {
                    background: rgba(211, 112, 30, 0.3);
                    border-color: rgba(255, 220, 99, 0.5);
                    transform: translateY(-2px);
                }
        
                .luxe-floating-particles {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    overflow: hidden;
                }
        
                .luxe-particle {
                    position: absolute;
                    width: 4px;
                    height: 4px;
                    background: rgba(211, 112, 30, 0.3);
                    border-radius: 50%;
                    animation: luxe-float 15s infinite linear;
                }
        
                .luxe-particle:nth-child(even) {
                    background: rgba(255, 220, 99, 0.3);
                    animation-duration: 20s;
                }
        
                @keyframes luxe-float {
                    0% {
                        transform: translateY(100vh) rotate(0deg);
                        opacity: 0;
                    }
        
                    10% {
                        opacity: 1;
                    }
        
                    90% {
                        opacity: 1;
                    }
        
                    100% {
                        transform: translateY(-100px) rotate(360deg);
                        opacity: 0;
                    }
                }
        
                @keyframes luxe-fade-in-up {
                    from {
                        opacity: 0;
                        transform: translateY(50px);
                    }
        
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
        
                @media (max-width: 768px) {
                    .luxe-showcase-header h2 {
                        font-size: 2.5rem;
                    }
        
                    .luxe-labels-grid {
                        grid-template-columns: 1fr;
                        gap: 20px;
                    }
        
                    .luxe-label-card {
                        padding: 20px;
                    }
                }


.dark-chenille-wrapper {
	/* background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d2d2d 100%); */
	/* min-height: 100vh; */
	/* font-family: 'Arial', sans-serif; */
	position: relative;
	overflow-x: hidden;
	/* background-image: url(../Assests/badge-img/hero/new-texture2.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed; */
}

/* .dark-chenille-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 25% 25%, rgba(15, 15, 11, 0.5) 0%, transparent 50%),
		radial-gradient(circle at 75% 75%, rgba(8, 7, 7, 0.5) 0%, transparent 50%),
		repeating-linear-gradient(90deg,
			transparent,
			transparent 100px,
			rgba(197, 179, 88, 0.2) 100px,
			rgba(197, 179, 88, 0.2) 102px),
		repeating-linear-gradient(0deg,
			transparent,
			transparent 100px,
			rgba(255, 31, 31, 0.2) 100px,
			rgba(255, 31, 31, 0.2) 102px);
	z-index: 1;
} */

.dark-chenille-header-section {
	text-align: center;
	padding: 80px 20px 60px;
	position: relative;
	z-index: 2;
}

.dark-chenille-main-title {
	font-size: 4rem;
	font-weight: 900;
	color: #C5B358;
	letter-spacing: 12px;
	margin-bottom: 5px;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
	position: relative;
}

.dark-chenille-main-title::after {
	content: '';
	position: absolute;
	bottom: -0px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 3px;
	background: linear-gradient(90deg, transparent, #C5B358, transparent);
}

#marginheadingset{
    margin: 20px 0px;
}

.dark-chenille-sub-title {
	font-size: 2.5rem;
	color: white;
	letter-spacing: 6px;
	margin-bottom: 25px;
	font-weight: 300;
}

.dark-chenille-tagline-badge {
	background: linear-gradient(135deg, #C5B358, #d4c766);
	color: black;
	padding: 12px 40px;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 600;
	border-radius: 30px;
	box-shadow: 0 4px 15px rgba(197, 179, 88, 0.3);
	position: relative;
	overflow: hidden;
}

.dark-chenille-tagline-badge::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.6s;
}

.dark-chenille-tagline-badge:hover::before {
	left: 100%;
}

.dark-chenille-hero-display {
	position: relative;
	z-index: 2;
	margin: 38px 12px;
}

.dark-chenille-hero-layout {
	display: grid;
	grid-template-columns: 300px 1fr 300px;
	gap: 40px;
	max-width: 100%;
	margin: 0 auto;
	align-items: center;
}

.dark-chenille-side-badge {
    background: linear-gradient(145deg, #33333399, #1a1a1a9e);
    border: 3px solid #C5B358;
    border-radius: 25px;
    padding: 40px 6px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.dark-chenille-side-badge::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, transparent, rgba(197, 179, 88, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.4s;
}

.dark-chenille-side-badge:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 20px 40px rgba(197, 179, 88, 0.3);
	border-color: #FF1F1F;
}

.dark-chenille-side-badge:hover::before {
	opacity: 1;
}

.dark-chenille-badge-visual {
    width: 100%;
    height: 100%;
    /* margin: 0 auto 25px; */
    /* border-radius: 50%; */
    /* background: linear-gradient(45deg, #C5B358, #a89948); */
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 4px solid #FF1F1F; */
    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); */
    position: relative;
    overflow: hidden;
}

.dark-chenille-badge-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* border-radius: 50%; */
}

.dark-chenille-badge-visual i {
	font-size: 3rem;
	color: #1a1a1a;
}

.dark-chenille-center-showcase {
	background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
	border: 4px solid #FF1F1F;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
	position: relative;
}

.dark-chenille-center-showcase::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(197, 179, 88, 0.1), rgba(255, 31, 31, 0.1));
	opacity: 0;
	transition: opacity 0.4s;
}

.dark-chenille-center-showcase:hover::before {
	opacity: 1;
}

.dark-chenille-center-image {
	width: 100%;
	height: 420px;
	background: url('../Assests/badge-img/hero/badge-images02.png') center/cover;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.8rem;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	position: relative;
}

/* .dark-chenille-center-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(197, 179, 88, 0.3), rgba(255, 31, 31, 0.3));
} */

.dark-chenille-center-image span {
	position: relative;
	z-index: 2;
}

.dark-chenille-main-section {
	padding: 60px 0px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.dark-chenille-section-heading {
	font-size: 3rem;
	color: #C5B358;
	text-align: center;
	margin-bottom: 60px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	position: relative;
}

.dark-chenille-section-heading::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 3px;
	background: #FF1F1F;
	border-radius: 2px;
}

.dark-chenille-content-layout {
	/* display: grid;
	grid-template-columns: 300px 1fr 300px; */
    display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	gap: 50px;
	margin-bottom: 80px;
}

.dark-chenille-side-visual {
    flex: 1 1 250px;
    max-width: 300px;
	background: linear-gradient(145deg, #333333, #1a1a1a);
	border: 3px solid #C5B358;
	border-radius: 20px;
	height: 680px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	position: relative;
	overflow: hidden;
}

.dark-chenille-side-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 17px;
}

.dark-chenille-side-visual::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(197, 179, 88, 0.2), rgba(255, 31, 31, 0.2));
	opacity: 0;
	transition: opacity 0.4s;
}

.dark-chenille-side-visual:hover::before {
	opacity: 1;
}

.dark-chenille-content-panel {
    flex: 1 1 500px;
    max-width: 900px;
	background: #000000bf;
	border: 3px solid #FF1F1F;
	border-radius: 25px;
	padding: 30px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
	position: relative;
}

.dark-chenille-content-panel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(197, 179, 88, 0.03), rgba(255, 31, 31, 0.03));
	border-radius: 22px;
}

.dark-chenille-description-text {
	color: #e0e0e0;
	font-size: 1.15rem;
	line-height: 1.9;
	margin-bottom: 40px;
	text-align: justify;
	position: relative;
	z-index: 2;
}

.chenille-slider-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 0 40px;
}

.dark-chenille-letters-showcase {
	display: flex;
	gap: 25px;
	transition: transform 0.5s ease-in-out;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Firefox */
}

.dark-chenille-letters-showcase::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari */
}

.chenille-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #C5B358;
    border: none;
    color: #1a1a1a;
    font-size: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.3s;
}

.chenille-slider-btn:hover {
	background: #FF1F1F;
	color: #fff;
}

.chenille-slider-btn.prev {
	left: 10px;
}

.chenille-slider-btn.next {
	right: 10px;
}


.dark-chenille-info-caption {
	color: #C5B358;
	font-size: 1.1rem;
	text-align: center;
	margin: 30px 0;
	font-weight: 600;
	position: relative;
	z-index: 2;
}

.dark-chenille-details-text {
	color: #e0e0e0;
	font-size: 1.15rem;
	line-height: 1.9;
	margin-bottom: 40px;
	position: relative;
	z-index: 2;
}

.dark-chenille-info-block {
	background: linear-gradient(145deg, #1a1a1a52, #2a2a2a3b);
	border: 3px solid #C5B358;
	border-radius: 25px;
	padding: 40px;
	margin: 50px 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	position: relative;
}

/* .dark-chenille-info-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(197, 179, 88, 0.05), rgba(255, 31, 31, 0.05));
	border-radius: 22px;
} */

.dark-chenille-info-heading {
	color: #C5B358;
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 25px;
	position: relative;
	z-index: 2;
}

.dark-chenille-info-heading i {
	margin-right: 10px;
	color: #FF1F1F;
}

.dark-chenille-info-listing {
	color: #e0e0e0;
	font-size: 1.05rem;
	line-height: 1.8;
	position: relative;
    padding: 0px;
	z-index: 2;
}

.dark-chenille-info-listing li {
	margin-bottom: 15px;
	padding-left: 25px;
	position: relative;
	list-style: none;
}

.dark-chenille-info-listing li::before {
	content: '\f054';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	color: #FF1F1F;
	font-size: 0.8rem;
	position: absolute;
	left: 0;
	top: 4px;
}

.dark-chenille-gallery-section {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
    margin: 40px 20px 0px;
}

.dark-chenille-gallery-card {
	background: linear-gradient(145deg, #33333375, #1a1a1a61);
	border: 3px solid #C5B358;
	border-radius: 12px;
	padding: 0;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.dark-chenille-gallery-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(197, 179, 88, 0.1), rgba(255, 31, 31, 0.1));
	opacity: 0;
	transition: opacity 0.4s;
}

.dark-chenille-gallery-card:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 20px 50px rgba(197, 179, 88, 0.3);
	border-color: #FF1F1F;
}

.dark-chenille-gallery-card:hover::before {
	opacity: 1;
}

.dark-chenille-gallery-image {
	width: 100%;
	height: 250px;
	border-radius: 22px 22px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.dark-chenille-gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dark-chenille-gallery-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(197, 179, 88, 0.2), rgba(255, 31, 31, 0.2));
	opacity: 0;
	transition: opacity 0.4s;
}

.dark-chenille-gallery-card:hover .dark-chenille-gallery-image::after {
	opacity: 1;
}

.dark-chenille-gallery-tag {
    background: linear-gradient(135deg, #c5b35852, #d4c7663b);
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 0 0 10px 10px;
    font-weight: bold;
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
}

.dark-chenille-gallery-tag i {
	margin-right: 8px;
}

.dark-chenille-letter-box {
	flex: 0 0 calc(20% - 20px);
	/* Show ~5 items at once with gap */
	background: #7b7b7b52;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	padding: 20px 0px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@keyframes animate {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(-1800px, 0, 0);
	}
}

/* @media (max-width: 1024px) {

	.dark-chenille-hero-layout,
	.dark-chenille-content-layout {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.dark-chenille-gallery-section {
		grid-template-columns: 1fr;
	}
} */

@media (max-width: 1024px) {
.dark-chenille-hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
}

@media (max-width: 992px) {
  .dark-chenille-content-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .dark-chenille-content-panel {
    padding: 30px;
    width: 100%;
    max-width: 100%;
  }
  

  .dark-chenille-side-visual {
    height: 300px;
    width: 100%;
    max-width: 100%;
  }
  
}

@media (max-width: 768px) {
	.dark-chenille-main-title {
		font-size: 2.5rem;
		letter-spacing: 6px;
	}

	.dark-chenille-sub-title {
		font-size: 1.8rem;
		letter-spacing: 3px;
	}

	.dark-chenille-letters-showcase {
		justify-content: center;
	}

	.dark-chenille-content-panel {
		padding: 30px;
	}

    .dark-chenille-gallery-section {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
    }
    .dark-chenille-hero-layout {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}


@media (max-width: 576px) {
  .dark-chenille-content-panel {
    padding: 20px;
  }

  .dark-chenille-side-visual {
    height: 250px;
    width: 100%;
    max-width: 100%;
  }
}



.golden-particle-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.golden-particle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	animation: golden-float 15s infinite linear;
}

.golden-particle.particle-gold {
	background: radial-gradient(circle, #C5B358 0%, #8B7D3A 100%);
	box-shadow: 0 0 20px #C5B358, inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.golden-particle.particle-amber {
	background: radial-gradient(circle, #D4C76A 0%, #9C8F42 100%);
	box-shadow: 0 0 15px #D4C76A, inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.golden-particle.particle-bronze {
	background: radial-gradient(circle, #B8A548 0%, #7A6D2F 100%);
	box-shadow: 0 0 18px #B8A548, inset 0 0 18px rgba(255, 255, 255, 0.25);
}

.golden-wave {
	position: absolute;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent 48%, rgba(197, 179, 88, 0.05) 50%, transparent 52%);
	animation: golden-wave 8s infinite linear;
	transform-origin: center;
}

.golden-wave:nth-child(2) {
	animation-delay: -2s;
	background: linear-gradient(-45deg, transparent 48%, rgba(197, 179, 88, 0.03) 50%, transparent 52%);
}

.golden-wave:nth-child(3) {
	animation-delay: -4s;
	background: linear-gradient(90deg, transparent 48%, rgba(197, 179, 88, 0.04) 50%, transparent 52%);
}

.golden-glow-orb {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(197, 179, 88, 0.3) 0%, transparent 70%);
	animation: golden-pulse 4s infinite ease-in-out;
	pointer-events: none;
}

.golden-neural-network {
	position: absolute;
	width: 2px;
	background: linear-gradient(45deg, transparent 0%, #C5B358 50%, transparent 100%);
	opacity: 0.3;
	animation: golden-neural 6s infinite ease-in-out;
}

/* .golden-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 20% 20%, rgba(197, 179, 88, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(197, 179, 88, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 40% 70%, rgba(197, 179, 88, 0.06) 0%, transparent 50%);
	animation: golden-overlay-shift 12s infinite ease-in-out;
} */



.scrollable-content {
	position: relative;
	z-index: 1;
	/* min-height: 100vh; */
	padding: 50px 30px;
	background: rgba(26, 26, 26, 0.3);
	backdrop-filter: blur(1px);
}

.content-section {
	max-width: 800px;
	margin: 0 auto 50px;
	background: rgba(0, 0, 0, 0.2);
	padding: 30px;
	border-radius: 10px;
	border: 1px solid rgba(197, 179, 88, 0.2);
}

.content-title {
	color: #C5B358;
	font-size: 24px;
	margin-bottom: 20px;
	text-shadow: 0 0 5px rgba(197, 179, 88, 0.3);
}

.content-text {
	line-height: 1.6;
	color: #cccccc;
	margin-bottom: 15px;
}

@keyframes golden-float {
	0% {
		transform: translateY(100vh) rotate(0deg) scale(0);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		transform: translateY(-100px) rotate(360deg) scale(1);
		opacity: 0;
	}
}

@keyframes golden-wave {
	0% {
		transform: rotate(0deg) scale(1);
	}

	100% {
		transform: rotate(360deg) scale(1.1);
	}
}

@keyframes golden-pulse {

	0%,
	100% {
		transform: scale(0.8);
		opacity: 0.4;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.8;
	}
}

@keyframes golden-neural {

	0%,
	100% {
		opacity: 0.1;
		transform: scaleY(0.5);
	}

	50% {
		opacity: 0.4;
		transform: scaleY(1);
	}
}

@keyframes golden-overlay-shift {

	0%,
	100% {
		transform: scale(1) rotate(0deg);
	}

	50% {
		transform: scale(1.1) rotate(180deg);
	}
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: rgba(13, 13, 13, 0.5);
}

::-webkit-scrollbar-thumb {
	background: rgba(197, 179, 88, 0.5);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(197, 179, 88, 0.7);
}

.dark-main-container {
	/* background: #00000057; */
	color: white;
	position: relative;
	animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Enhanced Background with Texture */
.dark-main-container::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 20% 20%, rgba(197, 179, 88, 0.08) 0%, transparent 40%),
		radial-gradient(circle at 80% 80%, rgba(255, 31, 31, 0.06) 0%, transparent 40%),
		radial-gradient(circle at 60% 40%, rgba(197, 179, 88, 0.04) 0%, transparent 40%),
		linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.01) 50%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

/* Animated particles */
.dark-main-container::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(2px 2px at 20px 30px, rgba(197, 179, 88, 0.1), transparent),
		radial-gradient(2px 2px at 40px 70px, rgba(255, 31, 31, 0.1), transparent),
		radial-gradient(1px 1px at 90px 40px, rgba(197, 179, 88, 0.08), transparent),
		radial-gradient(1px 1px at 130px 80px, rgba(255, 31, 31, 0.08), transparent);
	background-repeat: repeat;
	background-size: 150px 100px;
	animation: particles 20s linear infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes particles {
	0% {
		transform: translateY(0px);
	}

	100% {
		transform: translateY(-100px);
	}
}

.dark-content-wrapper {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Enhanced Section Headers */
.dark-section-header {
	text-align: center;
	font-size: 3rem;
	font-weight: 700;
	color: #C5B358;
	margin: 80px 0 50px 0;
	text-shadow: 0 0 30px rgba(197, 179, 88, 0.4);
	position: relative;
	opacity: 0;
	animation: slideInUp 0.8s ease-out 0.2s forwards;
}

.dark-section-header::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 3px;
	background: linear-gradient(90deg, transparent, #C5B358, transparent);
	border-radius: 2px;
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Enhanced Cards */
.dark-artwork-section,
.dark-digitising-section,
.dark-enquiry-section {
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(197, 179, 88, 0.3);
	border-radius: 20px;
	padding: 50px;
	margin: 50px 0;
	backdrop-filter: blur(20px);
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	position: relative;
	overflow: hidden;
	opacity: 0;
	animation: slideInScale 0.8s ease-out 0.4s forwards;
	transition: all 0.3s ease;
}

@keyframes slideInScale {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(30px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.dark-artwork-section:hover,
.dark-digitising-section:hover,
.dark-enquiry-section:hover {
	transform: translateY(-5px);
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
	border-color: rgba(197, 179, 88, 0.5);
}

.dark-artwork-section::before,
.dark-digitising-section::before,
.dark-enquiry-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
	transition: left 0.5s ease;
}

.dark-artwork-section:hover::before,
.dark-digitising-section:hover::before,
.dark-enquiry-section:hover::before {
	left: 100%;
}

.dark-artwork-section {
	border-color: rgba(197, 179, 88, 0.3);
}

.dark-digitising-section {
	border-color: rgba(255, 31, 31, 0.3);
}

.dark-digitising-section:hover {
	border-color: rgba(255, 31, 31, 0.5);
}

.dark-artwork-text,
.dark-digitising-text {
	font-size: 1.1rem;
	line-height: 1.8;
	text-align: center;
	margin-bottom: 30px;
	color: #e8e8e8;
	opacity: 0;
	animation: fadeInText 0.8s ease-out 0.6s forwards;
}

@keyframes fadeInText {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dark-digitising-header {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 600;
	color: #FF1F1F;
	margin-bottom: 40px;
	text-shadow: 0 0 25px rgba(255, 31, 31, 0.4);
	position: relative;
}

.dark-digitising-header::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #FF1F1F, transparent);
	border-radius: 2px;
}

/* Enhanced Work Section */
.dark-work-section {
	margin: 80px 0;
}

.dark-work-header {
	text-align: center;
	font-size: 3rem;
	font-weight: 700;
	color: #C5B358;
	margin-bottom: 50px;
	text-shadow: 0 0 30px rgba(197, 179, 88, 0.4);
	position: relative;
	opacity: 0;
	animation: slideInUp 0.8s ease-out 0.2s forwards;
}

.dark-work-header::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 3px;
	background: linear-gradient(90deg, transparent, #C5B358, transparent);
	border-radius: 2px;
}

.dark-work-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 25px;
	margin-bottom: 50px;
}

.dark-work-image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 15px;
	border: 2px solid rgba(197, 179, 88, 0.3);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	opacity: 0;
	animation: slideInScale 0.8s ease-out 0.4s forwards;
}

.dark-work-image:hover {
	transform: scale(1.05) rotateY(5deg);
	box-shadow:
		0 20px 40px rgba(197, 179, 88, 0.3),
		0 0 50px rgba(197, 179, 88, 0.2);
	border-color: rgba(197, 179, 88, 0.6);
}

.dark-work-description {
	text-align: center;
	font-size: 1.2rem;
	color: #e8e8e8;
	margin-bottom: 50px;
	opacity: 0;
	animation: fadeInText 0.8s ease-out 0.6s forwards;
}

/* Enhanced Banner Section */
.dark-banner-section {
	text-align: center;
	margin: 80px 0;
	opacity: 0;
	animation: slideInUp 0.8s ease-out 0.5s forwards;
}

.dark-banner-image {
	width: 350px;
	height: 220px;
	background: linear-gradient(135deg, #4a4a9e, #6b6bff, #8a8aff);
	border-radius: 20px;
	margin: 0 auto 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.8rem;
	font-weight: 600;
	border: 2px solid rgba(197, 179, 88, 0.4);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.dark-banner-image::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(transparent, rgba(255, 255, 255, 0.1), transparent);
	animation: rotate 3s linear infinite;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.dark-banner-image:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
	border-color: rgba(197, 179, 88, 0.6);
}

.dark-color-options {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
}

.dark-color-swatch {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 3px solid rgba(197, 179, 88, 0.4);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.dark-color-swatch::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transition: all 0.3s ease;
	transform: translate(-50%, -50%);
}

.dark-color-swatch:hover {
	transform: scale(1.2);
	border-color: rgba(197, 179, 88, 0.8);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.dark-color-swatch:hover::before {
	width: 100%;
	height: 100%;
}

/* Enhanced Cases Section */
.dark-cases-section {
	margin: 80px 0;
}

.dark-cases-header {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 600;
	color: #FF1F1F;
	margin-bottom: 50px;
	text-shadow: 0 0 25px rgba(255, 31, 31, 0.4);
	position: relative;
	opacity: 0;
	animation: slideInUp 0.8s ease-out 0.2s forwards;
}

.dark-cases-header::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #FF1F1F, transparent);
	border-radius: 2px;
}

.dark-cases-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 25px;
	margin-bottom: 50px;
}

.dark-case-image {
    width: 100%;
    height: max-content;
    /* background: linear-gradient(135deg, #2a2a2a29, #3a3a3a8c, #2a2a2a29); */
    border-radius: 15px;
    /* border: 2px solid rgba(255, 31, 31, 0.3); */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: slideInScale 0.8s ease-out 0.4s forwards;
}

.dark-case-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 31, 31, 0.1), transparent);
	transition: left 0.5s ease;
}

.dark-case-image:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 20px 40px rgba(255, 31, 31, 0.2);
	border-color: rgba(255, 31, 31, 0.6);
}

.dark-case-image:hover::before {
	left: 100%;
}

/* Enhanced Form */
.dark-form-container {
	background: rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(197, 179, 88, 0.3);
	border-radius: 20px;
	padding: 40px;
	backdrop-filter: blur(20px);
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark-form-title {
	text-align: center;
	font-size: 2rem;
	font-weight: 600;
	color: #C5B358;
	margin-bottom: 40px;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(197, 179, 88, 0.3);
	position: relative;
}

.dark-form-title::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: #C5B358;
	border-radius: 2px;
}

.dark-form-row {
	display: flex;
	gap: 25px;
	margin-bottom: 25px;
}

.dark-form-group {
	flex: 1;
	position: relative;
}

.dark-form-label {
	display: block;
	color: #C5B358;
	font-size: 0.95rem;
	margin-bottom: 8px;
	font-weight: 500;
	transition: color 0.3s ease;
}

.dark-form-input,
.dark-form-textarea,
.dark-form-select {
	width: 100%;
	padding: 15px;
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid rgba(197, 179, 88, 0.3);
	border-radius: 10px;
	color: white;
	font-size: 1rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.dark-form-input:focus,
.dark-form-textarea:focus,
.dark-form-select:focus {
	outline: none;
	border-color: #FF1F1F;
	box-shadow: 0 0 20px rgba(255, 31, 31, 0.2);
	transform: translateY(-2px);
}

.dark-form-input:focus+.dark-form-label,
.dark-form-textarea:focus+.dark-form-label {
	color: #FF1F1F;
}

.dark-form-textarea {
	min-height: 120px;
	resize: vertical;
	font-family: 'Inter', sans-serif;
}

.dark-form-submit {
	background: linear-gradient(135deg, #FF1F1F, #ff4444, #ff6666);
	color: white;
	padding: 18px 50px;
	border: none;
	border-radius: 50px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	display: block;
	margin: 40px auto 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
}

.dark-form-submit::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.dark-form-submit:hover {
	background: linear-gradient(135deg, #ff4444, #FF1F1F, #ff4444);
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(255, 31, 31, 0.4);
}

.dark-form-submit:hover::before {
	left: 100%;
}

.dark-form-submit:active {
	transform: translateY(-1px);
}

.dark-checkbox-label {
	color: #e8e8e8;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	transition: color 0.3s ease;
}

.dark-checkbox-label input {
    width: max-content;
}

.dark-form-checkbox {
	margin-right: 12px;
	transform: scale(1.2);
}

/* Enhanced Feedback Section */
.dark-feedback-section {
    text-align: center;
        display: flex;
        margin: 80px 0 0px;
        opacity: 0;
        animation: slideInUp 0.8s ease-out 0.5s forwards;
        flex-direction: column;
        gap: 16px;
        padding-bottom: 44px;
}

.firing-page {
    width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.6s ease;
        border-radius: 50%;
        filter: brightness(0.8) contrast(1.1);
}
.dark-feedback-header {
	font-size: 2.5rem;
	font-weight: 600;
	color: #FF1F1F;
	margin-bottom: 40px;
	text-shadow: 0 0 25px rgba(255, 31, 31, 0.4);
	position: relative;
}

.dark-feedback-header::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #FF1F1F, transparent);
	border-radius: 2px;
}

.dark-feedback-text {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #e8e8e8;
	max-width: 800px;
	margin: 0 auto 0px;
	padding: 25px;
	/* background: rgba(0, 0, 0, 0.3); */
    background: rgba(0, 0, 0, 0.6);
	border-radius: 15px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.dark-feedback-text:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	border-color: rgba(197, 179, 88, 0.3);
}

.dark-enquiry-header {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 600;
	color: #C5B358;
	margin-bottom: 20px;
	text-shadow: 0 0 25px rgba(197, 179, 88, 0.4);
	position: relative;
}

.dark-enquiry-header::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #C5B358, transparent);
	border-radius: 2px;
}

.dark-enquiry-subtitle {
	text-align: center;
	font-size: 1.2rem;
	color: #e8e8e8;
	margin-bottom: 50px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
	.dark-form-row {
		flex-direction: column;
		gap: 15px;
	}

	.dark-section-header,
	.dark-work-header {
		font-size: 2.5rem;
	}

	.dark-artwork-section,
	.dark-digitising-section,
	.dark-enquiry-section {
		padding: 30px;
	}

	.dark-banner-image {
		width: 280px;
		height: 180px;
		font-size: 1.5rem;
	}

	.dark-color-options {
		gap: 15px;
	}

	.dark-color-swatch {
		width: 40px;
		height: 40px;
	}
}

/* Scroll-triggered animations */
@keyframes slideInFromLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInFromRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Add staggered animations for work gallery */
.dark-work-image:nth-child(1) {
	animation-delay: 0.1s;
}

.dark-work-image:nth-child(2) {
	animation-delay: 0.2s;
}

.dark-work-image:nth-child(3) {
	animation-delay: 0.3s;
}

.dark-work-image:nth-child(4) {
	animation-delay: 0.4s;
}

.dark-work-image:nth-child(5) {
	animation-delay: 0.5s;
}

/* Add staggered animations for case gallery */
.dark-case-image:nth-child(1) {
	animation-delay: 0.1s;
}

.dark-case-image:nth-child(2) {
	animation-delay: 0.2s;
}

.dark-case-image:nth-child(3) {
	animation-delay: 0.3s;
}

.dark-case-image:nth-child(4) {
	animation-delay: 0.4s;
}

/* Enhanced loading animation */
.dark-main-container {
	animation: fadeIn 1.2s ease-out;
}

.prd-showcase-container {
	position: relative;
	min-height: 100vh;
	background: #0a0a0a;
}

.prd-animated-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 20% 30%, rgba(197, 179, 88, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(255, 31, 31, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 50% 50%, rgba(197, 179, 88, 0.05) 0%, transparent 50%);
	animation: prd-bg-float 15s ease-in-out infinite;
}

.prd-animated-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="25" cy="25" r="1" fill="%23C5B358" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23FF1F1F" opacity="0.08"/><circle cx="50" cy="10" r="0.5" fill="%23ffffff" opacity="0.05"/><circle cx="10" cy="60" r="0.8" fill="%23C5B358" opacity="0.06"/><circle cx="90" cy="40" r="1.2" fill="%23FF1F1F" opacity="0.04"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
	animation: prd-grain-move 20s linear infinite;
	pointer-events: none;
}

@keyframes prd-bg-float {

	0%,
	100% {
		transform: translateY(0px) scale(1);
	}

	50% {
		transform: translateY(-20px) scale(1.02);
	}
}

@keyframes prd-grain-move {
	0% {
		transform: translateX(0px) translateY(0px);
	}

	25% {
		transform: translateX(-20px) translateY(-10px);
	}

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

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

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

.prd-content-wrapper {
	position: relative;
	z-index: 2;
	padding: 40px 20px;
	max-width: 1200px;
	margin: 0 auto;
    background: linear-gradient(145deg, #121111 0%, #121111 100%);
	border-radius: 24px;
	margin-top: 20px;
}

.prd-section-header {
	text-align: center;
	margin-bottom: 40px;
	border-bottom: 2px solid #C5B358;
	padding-bottom: 20px;
}

.prd-section-title {
	font-size: 2.5rem;
	font-weight: bold;
	color: #FF1F1F;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.prd-section-desc {
	font-size: 1.1rem;
	color: #cccccc;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
}

.prd-about-section {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(197, 179, 88, 0.3);
	border-radius: 15px;
	padding: 30px;
	margin-bottom: 50px;
	backdrop-filter: blur(10px);
}

.prd-about-text {
	font-size: 1rem;
	line-height: 1.8;
	color: #e0e0e0;
	text-align: center;
}

.prd-options-section {
	margin-bottom: 50px;
}

.prd-options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 30px;
}

.prd-option-card {
	background: rgba(0, 0, 0, 0.6);
	border: 2px solid #C5B358;
	border-radius: 20px;
	padding: 25px;
	text-align: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
}

.prd-option-card:hover {
	transform: translateY(-10px);
	border-color: #FF1F1F;
	box-shadow: 0 20px 40px rgba(197, 179, 88, 0.2);
}

.prd-option-image {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 20px;
	background: linear-gradient(45deg, #C5B358, #FF1F1F);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: white;
	font-weight: bold;
}

.prd-option-title {
	font-size: 1.3rem;
	color: #C5B358;
	margin-bottom: 10px;
	font-weight: bold;
}

.prd-option-desc {
	color: #cccccc;
	font-size: 0.95rem;
	line-height: 1.5;
}

.prd-materials-section {
	margin-bottom: 50px;
}

.prd-materials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 25px;
	margin-top: 30px;
}

.prd-material-card {
	background: rgba(197, 179, 88, 0.1);
	border: 2px solid rgba(255, 31, 31, 0.3);
	border-radius: 15px;
	padding: 20px;
	text-align: center;
	transition: all 0.3s ease;
}

.prd-material-card:hover {
	background: rgba(255, 31, 31, 0.1);
	border-color: #C5B358;
	transform: scale(1.05);
}

.prd-material-circle {
	width: 182px;
	height: 182px;
	border-radius: 50%;
	margin: 0 auto 15px;
	background: linear-gradient(135deg, #C5B358, #FF1F1F);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	font-size: 1.2rem;
}

.prd-material-name {
	color: #C5B358;
	font-size: 1.6rem;
	font-weight: bold;
}

.prd-fixing-section {
	margin-bottom: 50px;
}

.prd-fixing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-top: 30px;
}

.prd-fixing-card {
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(197, 179, 88, 0.4);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	transition: all 0.3s ease;
}

.prd-fixing-card:hover {
	border-color: #FF1F1F;
	background: rgba(255, 31, 31, 0.05);
}

.prd-fixing-image {
	width: 100%;
	height: 150px;
	background: linear-gradient(45deg, #333, #555);
	border-radius: 8px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C5B358;
	font-size: 1.5rem;
	font-weight: bold;
}

.prd-fixing-title {
	color: #C5B358;
	font-size: 1.2rem;
	margin-bottom: 10px;
	font-weight: bold;
}

.prd-fixing-desc {
	color: #cccccc;
	font-size: 0.9rem;
	line-height: 1.4;
}

.prd-envelope-section {
	margin-bottom: 50px;
}

.prd-envelope-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.prd-envelope-card {
	background: rgba(197, 179, 88, 0.05);
	border: 1px solid rgba(255, 31, 31, 0.2);
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	transition: all 0.3s ease;
}

.prd-envelope-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(197, 179, 88, 0.1);
}

.prd-envelope-img {
	width: 100%;
	height: 120px;
	background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
	border-radius: 8px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C5B358;
	font-size: 1.2rem;
}

.prd-envelope-name {
	color: #C5B358;
	font-size: 1rem;
	font-weight: bold;
}

.prd-aperture-section {
	margin-bottom: 50px;
}

.prd-aperture-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 30px;
	align-items: center;
}

.prd-aperture-text {
	color: #e0e0e0;
	line-height: 1.6;
	font-size: 1rem;
}

.prd-aperture-visual {
	background: rgba(197, 179, 88, 0.05);
	border: 2px solid rgba(255, 31, 31, 0.3);
	border-radius: 15px;
	padding: 30px;
	text-align: center;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C5B358;
	font-size: 2rem;
	font-weight: bold;
}

.prd-fringing-section {
	margin-bottom: 50px;
}

.prd-fringing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.prd-fringing-circle {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 15px;
	background: linear-gradient(135deg, #C5B358, #FF1F1F, #000);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	transition: all 0.3s ease;
}

.prd-fringing-circle:hover {
	transform: scale(1.1);
	box-shadow: 0 10px 20px rgba(197, 179, 88, 0.3);
}

.prd-fringing-name {
	text-align: center;
	color: #C5B358;
	font-size: 1rem;
	font-weight: bold;
}

.prd-extras-section {
	margin-bottom: 50px;
}

.prd-extras-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 25px;
	margin-top: 30px;
}

.prd-extra-card {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(197, 179, 88, 0.3);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	transition: all 0.3s ease;
}

.prd-extra-card:hover {
	border-color: #FF1F1F;
	background: rgba(255, 31, 31, 0.03);
	transform: scale(1.02);
}

.prd-extra-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin: 0 auto 15px;
	background: linear-gradient(45deg, #C5B358, #FF1F1F);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.2rem;
	font-weight: bold;
}

.prd-extra-name {
	color: #C5B358;
	font-size: 1rem;
	font-weight: bold;
}

.prd-highlight-section {
	background: rgba(197, 179, 88, 0.05);
	border: 2px solid #FF1F1F;
	border-radius: 20px;
	padding: 40px;
	margin-top: 30px;
}

.prd-highlight-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-top: 30px;
}

.prd-highlight-card {
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(197, 179, 88, 0.4);
	border-radius: 15px;
	padding: 20px;
	text-align: center;
	transition: all 0.3s ease;
}

.prd-highlight-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(255, 31, 31, 0.1);
}

.prd-highlight-img {
	width: 100%;
	height: 200px;
	background: linear-gradient(45deg, #2a2a2a, #1a1a1a);
	border-radius: 10px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C5B358;
	font-size: 1.5rem;
	font-weight: bold;
}

.prd-highlight-title {
	color: #FF1F1F;
	font-size: 1.1rem;
	margin-bottom: 10px;
	font-weight: bold;
}

.prd-highlight-desc {
	color: #cccccc;
	font-size: 0.9rem;
	line-height: 1.4;
}

@media (max-width: 768px) {
	.prd-aperture-content {
		grid-template-columns: 1fr;
	}

	.prd-section-title {
		font-size: 2rem;
	}

	.prd-content-wrapper {
		padding: 20px 15px;
	}
}

.band-photos-sectionbadges {
	margin-bottom: 40px;
}

.band-main-display {
	background: white;
	border-radius: 10px;
	/* padding: 20px; */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
}

.band-featured-image {
	width: 100%;
    height: 632px;
    object-fit: fill;
	border-radius: 8px;
	border: 3px solid #C5B358;
}

.band-thumbnails-row {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}

.band-thumb-item {
	width: 80px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	border: 3px solid transparent;
	transition: all 0.3s ease;
	position: relative;
}

.band-thumb-item:hover {
	border-color: #C5B358;
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(197, 179, 88, 0.4);
}

.band-thumb-item.active-thumb {
	border-color: #FF1F1F;
	transform: translateY(-3px);
}

.band-thumb-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.band-thumb-image-case {
    width: 100%;
	height: 100%;
	object-fit: fill;
	transition: transform 0.3s ease;
}

/* .dark-case-image:hover .band-thumb-image-case {
	transform: scale(1.1);
} */
.band-thumb-item:hover .band-thumb-image {
	transform: scale(1.1);
}

.banner-gallery-description {
	text-align: center;
	color: #666;
	font-size: 16px;
	margin-top: 20px;
	line-height: 1.6;
}

.gallery-indicators {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.gallery-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ddd;
	cursor: pointer;
	transition: all 0.3s ease;
}

.gallery-dot.active-dot {
	background: #C5B358;
	transform: scale(1.2);
}

.gallery-dot:hover {
	background: #FF1F1F;
}

@media (max-width: 768px) {
	.embroidery-showcase-container {
		padding: 20px;
	}

	.showcase-title {
		font-size: 36px;
	}

	.gallery-slider-container {
		height: 250px;
	}

	.band-thumbnails-row {
		gap: 10px;
	}

	.band-thumb-item {
		width: 60px;
		height: 45px;
	}
}

.dark-work-section {
	max-width: 1200px;
	margin: 0 auto 20px;
	position: relative;
}

.work-section-title {
	text-align: center;
	font-size: 64px;
	font-weight: 900;
	color: #FF1F1F;
	margin-bottom: 60px;
	text-transform: uppercase;
	letter-spacing: 4px;
	position: relative;
	text-shadow: 0 0 20px rgba(255, 31, 31, 0.3);
}

.work-section-title::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, #333, transparent);
	z-index: -1;
}

.work-section-title::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 3px;
	background: linear-gradient(90deg, #FF1F1F, #C5B358);
	border-radius: 2px;
}

.work-gallery-container {
	position: relative;
	margin-bottom: 50px;
}

.work-images-strip {
	display: flex;
	height: 400px;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
	position: relative;
	background: #111;
}

.work-image-panel {
	position: relative;
	flex: 1;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	border-right: 2px solid rgba(197, 179, 88, 0.2);
}

.work-image-panel:last-child {
	border-right: none;
}

.work-image-panel:hover {
	flex: 4.2;
	transform: scale(1.02);
	z-index: 10;
	box-shadow: 0 0 40px rgba(255, 31, 31, 0.3);
}

.work-panel-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s ease;
    
	filter: brightness(0.8) contrast(1.1);
}

.work-panel-image-two {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s ease;
    border-radius: 50%;
	filter: brightness(0.8) contrast(1.1);
}

.work-panel-image-three {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease;
    filter: brightness(0.8) contrast(1.1);
}

.work-image-panel:hover .work-panel-image {
	filter: brightness(1) contrast(1.2);
	transform: scale(1.1);
}

.work-panel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(197, 179, 88, 0.1) 50%,
			rgba(255, 31, 31, 0.1) 100%);
	opacity: 0.7;
	transition: opacity 0.4s ease;
}

.work-image-panel:hover .work-panel-overlay {
	opacity: 0.3;
}

.work-panel-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px 20px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	transform: translateY(20px);
	opacity: 0;
	transition: all 0.4s ease;
}

.work-image-panel:hover .work-panel-content {
	transform: translateY(0);
	opacity: 1;
}

.work-panel-title {
	color: #C5B358;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.work-panel-description {
	color: #ccc;
	font-size: 14px;
	line-height: 1.4;
}

.work-section-description {
	text-align: center;
	color: #fff;
	font-size: 18px;
	line-height: 1.8;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 30px;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 10px;
	border: 1px solid rgba(197, 179, 88, 0.1);
	backdrop-filter: blur(10px);
}

.work-section-description::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: 20px;
	font-size: 60px;
	color: #C5B358;
	opacity: 0.3;
}

.work-section-description::after {
	content: '"';
	position: absolute;
	bottom: -30px;
	right: 20px;
	font-size: 60px;
	color: #C5B358;
	opacity: 0.3;
}

.work-accent-line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, #FF1F1F, #C5B358, #FF1F1F);
	opacity: 0.6;
}

.work-floating-elements {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	overflow: hidden;
}

.work-floating-dot {
	position: absolute;
	width: 4px;
	height: 4px;
	background: #C5B358;
	border-radius: 50%;
	opacity: 0.3;
	animation: workFloatAnimation 8s infinite ease-in-out;
}

.work-floating-dot:nth-child(1) {
	top: 20%;
	left: 10%;
	animation-delay: 0s;
}

.work-floating-dot:nth-child(2) {
	top: 60%;
	right: 15%;
	animation-delay: 2s;
}

.work-floating-dot:nth-child(3) {
	bottom: 30%;
	left: 20%;
	animation-delay: 4s;
}

@keyframes workFloatAnimation {

	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}

	50% {
		transform: translateY(-20px) rotate(180deg);
	}
}

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

	.work-images-strip {
		height: 480px;
		flex-direction: column;
	}

	.work-image-panel {
		border-right: none;
		border-bottom: 2px solid rgba(197, 179, 88, 0.2);
	}

	.work-image-panel:hover {
		flex: 8;
	}

	.work-section-description {
		font-size: 16px;
		padding: 20px;
	}
}

@media (max-width: 480px) {
	.work-section-title {
		font-size: 36px;
	}

	.work-images-strip {
		height: 380px;
	}
}

.luxebannerttop-slider-container {
	position: relative;
	width: 100%;
	height: 80vh;
	overflow: hidden;
}

.luxebannerttop-slide-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.luxebannerttop-slide-wrapper.luxebannerttop-active {
	opacity: 1;
}

.luxebannerttop-slide-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg,
			rgba(0, 0, 0, 0.7) 0%,
			rgba(197, 179, 88, 0.15) 50%,
			rgba(255, 31, 31, 0.1) 100%);
	z-index: 1;
}

.luxebannerttop-slide-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at center,
			transparent 0%,
			rgba(0, 0, 0, 0.3) 70%,
			rgba(0, 0, 0, 0.8) 100%);
	z-index: 2;
}

.luxebannerttop-content-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 3;
	color: white;
	max-width: 900px;
	padding: 40px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 15px;
	backdrop-filter: blur(20px);
	border: 2px solid rgba(197, 179, 88, 0.3);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	animation: luxebannerttop-content-fade-in 1s ease-out;
}

@keyframes luxebannerttop-content-fade-in {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.9);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.luxebannerttop-main-title {
	font-size: 3.5rem;
	font-weight: 900;
	margin-bottom: 25px;
	text-shadow: 0 0 30px rgba(197, 179, 88, 0.6);
	letter-spacing: 2px;
	background: linear-gradient(135deg, #C5B358 0%, #ffffff 50%, #C5B358 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: luxebannerttop-glow 3s ease-in-out infinite alternate;
}

@keyframes luxebannerttop-glow {
	0% {
		text-shadow: 0 0 20px rgba(197, 179, 88, 0.4);
	}

	100% {
		text-shadow: 0 0 40px rgba(197, 179, 88, 0.8);
	}
}

.luxebannerttop-subtitle {
	font-size: 1.3rem;
	margin-bottom: 30px;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
	letter-spacing: 0.5px;
	line-height: 1.6;
	font-weight: 300;
}

.luxebannerttop-nav-dots {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	z-index: 4;
}

.luxebannerttop-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.4s ease;
	border: 2px solid transparent;
	position: relative;
	overflow: hidden;
}

.luxebannerttop-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	background: #C5B358;
	border-radius: 50%;
	transition: all 0.4s ease;
}

.luxebannerttop-dot.luxebannerttop-dot-active {
	background: #C5B358;
	border-color: #FF1F1F;
	box-shadow: 0 0 20px rgba(197, 179, 88, 0.6);
}

.luxebannerttop-dot.luxebannerttop-dot-active::before {
	width: 100%;
	height: 100%;
}

.luxebannerttop-nav-arrows {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
}

.luxebannerttop-arrow {
	width: 60px;
	height: 60px;
	background: rgba(0, 0, 0, 0.5);
	border: 2px solid rgba(197, 179, 88, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.luxebannerttop-arrow:hover {
	background: rgba(197, 179, 88, 0.2);
	border-color: #C5B358;
	transform: scale(1.1);
	box-shadow: 0 0 25px rgba(197, 179, 88, 0.4);
}

.luxebannerttop-arrow-left {
	left: 30px;
}

.luxebannerttop-arrow-right {
	right: 30px;
}

.luxebannerttop-arrow svg {
	width: 24px;
	height: 24px;
	fill: #C5B358;
}

.luxebannerttop-progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	background: linear-gradient(90deg, #C5B358, #FF1F1F);
	transform-origin: left;
	animation: luxebannerttop-progress 5s linear infinite;
	z-index: 4;
}

@keyframes luxebannerttop-progress {
	0% {
		transform: scaleX(0);
	}

	100% {
		transform: scaleX(1);
	}
}



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

	.luxebannerttop-subtitle {
		font-size: 1rem;
	}

	.luxebannerttop-content-overlay {
		padding: 25px;
		max-width: 95%;
	}

	.luxebannerttop-arrow {
		width: 50px;
		height: 50px;
	}

	.luxebannerttop-arrow-left {
		left: 15px;
	}

	.luxebannerttop-arrow-right {
		right: 15px;
	}
}

.bannerbadgesdesign-customization-container {
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 20px;
	padding: 50px 40px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(197, 179, 88, 0.3);
}

.bannerbadgesdesign-section-title {
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
	color: #FF1F1F;
	margin-bottom: 30px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.bannerbadgesdesign-description-text {
	text-align: center;
	color: #e0e0e0;
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 15px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.bannerbadgesdesign-cost-notice {
	text-align: center;
	color: #C5B358;
	font-size: 1rem;
	margin-bottom: 25px;
}

.bannerbadgesdesign-info-link {
	text-align: center;
	margin-bottom: 50px;
}

.bannerbadgesdesign-info-link a {
	color: #C5B358;
	text-decoration: underline;
	font-size: 1rem;
	transition: color 0.3s ease;
}

.bannerbadgesdesign-info-link a:hover {
	color: #FF1F1F;
}

.bannerbadgesdesign-options-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
	margin-bottom: 60px;
}

.bannerbadgesdesign-option-item {
	text-align: center;
	transition: transform 0.3s ease;
}

.bannerbadgesdesign-option-item:hover {
	transform: translateY(-10px);
}

.bannerbadgesdesign-option-icon {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: white;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	/* border: 3px solid rgba(197, 179, 88, 0.5); */
	transition: all 0.3s ease;
}

.bannerbadgesdesign-option-icon img {
	width: 100%;
	height: 100%;
	border-radius: 50%;

}

.bannerbadgesdesign-option-item:hover .bannerbadgesdesign-option-item {
	border-color: #C5B358;
	box-shadow: 0 15px 40px rgba(197, 179, 88, 0.3);
}

.magnetic-strip-icon {
	background: linear-gradient(45deg, #4169E1, #6495ED);
}

.board-filling-icon {
	background: linear-gradient(45deg, #20B2AA, #48D1CC);
}

.large-bannerbadgesdesign-icon {
	background: linear-gradient(45deg, #2E4BC6, #4169E1);
}

.waterproof-icon {
	background: linear-gradient(45deg, #1E90FF, #87CEEB);
}

.envelope-icon {
	background: linear-gradient(45deg, #6A5ACD, #9370DB);
}

.tassels-icon {
	background: linear-gradient(45deg, #191970, #4169E1);
}

.dowel-icon {
	background: linear-gradient(45deg, #2F4F4F, #708090);
}

.braid-icon {
	background: linear-gradient(45deg, #DAA520, #FFD700);
}

.velcro-icon {
	background: linear-gradient(45deg, #2F2F2F, #696969);
}

.elastic-icon {
	background: linear-gradient(45deg, #C0C0C0, #F5F5F5);
}

.bannerbadgesdesign-option-label {
	font-size: 1.2rem;
	font-weight: 600;
	color: #e0e0e0;
	margin-bottom: 10px;
}

.bannerbadgesdesign-arrows-container {
	display: flex;
	justify-content: center;
	gap: 80px;
	margin: 40px 0;
}

.bannerbadgesdesign-arrow-icon {
	font-size: 3rem;
	color: #C5B358;
	animation: bounce 2s infinite;
}

.rotaeright {
    transform: rotate(30deg);
}

.rotaeleft {
    transform: rotate(-30deg);
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-10px);
	}

	60% {
		transform: translateY(-5px);
	}
}

.bannerbadgesdesign-examples-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 40px;
}

.bannerbadgesdesign-example-card {
	background: rgba(30, 30, 30, 0.8);
	border-radius: 15px;
	overflow: hidden;
	border: 2px solid rgba(197, 179, 88, 0.3);
	transition: all 0.3s ease;
}

.bannerbadgesdesign-example-card:hover {
	border-color: #C5B358;
	box-shadow: 0 10px 30px rgba(197, 179, 88, 0.2);
}

.bannerbadgesdesign-example-image {
	width: 100%;
	height: 200px;
	background: linear-gradient(45deg, #2d2d2d, #1a1a1a);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.russia-mylar-bg {
	background: linear-gradient(45deg, #DAA520, #FFD700);
	position: relative;
}

.russia-mylar-bg::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	background: repeating-linear-gradient(90deg,
			#DAA520 0px,
			#DAA520 3px,
			transparent 3px,
			transparent 6px);
}

.standard-braid-bg {
	background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
	position: relative;
}

/* .standard-braid-bg::after {
	content: '';
	position: absolute;
	inset: 20px;
	background: repeating-linear-gradient(45deg,
			#333 0px,
			#333 10px,
			#555 10px,
			#555 20px);
	border-radius: 10px;
} */

.cord-braid-bg {
	background: linear-gradient(45deg, #2d2d2d, #1a1a1a);
	position: relative;
}

.cord-braid-bg::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	background: repeating-linear-gradient(90deg,
			#DAA520 0px,
			#DAA520 2px,
			transparent 2px,
			transparent 4px);
}

.bannerbadgesdesign-example-description {
	padding: 25px;
	text-align: center;
}

.bannerbadgesdesign-example-description p {
	color: #e0e0e0;
	font-size: 1rem;
	line-height: 1.6;
}

.bannerbadgesdesign-placeholder-icon {
	font-size: 4rem;
	color: #C5B358;
	opacity: 0.7;
}

@media (max-width: 768px) {
	.bannerbadgesdesign-options-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.bannerbadgesdesign-examples-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.bannerbadgesdesign-arrows-container {
		gap: 40px;
	}
}

@media (max-width: 480px) {
	.bannerbadgesdesign-customization-container {
		padding: 30px 20px;
	}

	.bannerbadgesdesign-section-title {
		font-size: 2rem;
	}

	.bannerbadgesdesign-option-icon {
		width: 80px;
		height: 80px;
		font-size: 2rem;
	}
}

.secmusicband {
        /* background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 100%); */
        color: #ffffff;
}

        .banner-options-main-container {
            
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(197, 179, 88, 0.3);
            border-radius: 16px;
            padding: 2rem 0;
            color: #ffffff;
        }

        .banner-options-content-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .banner-options-main-title {
            text-align: center;
            font-size: 4rem;
            font-weight: bold;
            color: #FF1F1F;
            margin-bottom: 2rem;
            text-shadow: 3px 3px 6px rgba(255, 31, 31, 0.3);
            letter-spacing: 2px;
        }

        .banner-options-intro-text {
            text-align: center;
            font-size: 1.2rem;
            color: #cccccc;
            line-height: 1.8;
            margin-bottom: 4rem;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .banner-application-main-section {
            margin-bottom: 4rem;
        }

        .banner-application-header-title {
            text-align: center;
            font-size: 3rem;
            font-weight: bold;
            color: #FF1F1F;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(255, 31, 31, 0.3);
        }

        .banner-application-sub-description {
            text-align: center;
            font-size: 1.1rem;
            color: #cccccc;
            margin-bottom: 3rem;
            line-height: 1.6;
        }

        .banner-methods-grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .banner-method-item-card {
            background: linear-gradient(145deg, #2a2a2a5c, #2a2a2a5c);
            border-radius: 15px;
            padding: 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            transition: all 0.3s ease;
            border: 2px solid #333;
            overflow: hidden;
            position: relative;
        }

        .banner-method-item-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(197, 179, 88, 0.3);
            border-color: #C5B358;
        }

        .banner-method-text-content {
            padding: 1.5rem;
        }

        .banner-method-side-text {
            font-size: 0.9rem;
            color: #aaaaaa;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .banner-method-image-container {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            overflow: hidden;
            border: 4px solid #C5B358;
            box-shadow: 0 8px 25px rgba(197, 179, 88, 0.4);
            transition: all 0.3s ease;
        }

        .banner-method-image-container:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(197, 179, 88, 0.6);
        }

        .banner-method-dummy-image {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #C5B358, #d4c869);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: #1a1a1a;
            position: relative;
            overflow: hidden;
        }

        .banner-method-dummy-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .banner-method-title-label {
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: #C5B358;
            margin-bottom: 0.5rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

        .banner-applique-special-section {
            background: linear-gradient(145deg, #2a2a2a, #1f1f1f);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6);
            border: 3px solid #C5B358;
            position: relative;
            overflow: hidden;
        }

        .banner-applique-special-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(197, 179, 88, 0.1) 0%, transparent 70%);
            animation: rotate-glow 15s linear infinite;
        }

        @keyframes rotate-glow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .banner-applique-content-layout {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 2.5rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .banner-applique-content-layout-two {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 2rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

                .banner-applique-content-layout-two .banner-applique-image-wrapper {
                    width: 250px;
                    height: 250px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: none; 
                    box-shadow: none;
                    transition: all 0.3s ease;
                }

                .banner-applique-content-layout-two .banner-applique-dummy-image {
                    background: none;
                }

        .banner-applique-image-wrapper {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid #C5B358;
            box-shadow: 0 12px 35px rgba(197, 179, 88, 0.4);
            transition: all 0.3s ease;
        }

        .banner-applique-image-wrapper:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 45px rgba(197, 179, 88, 0.6);
        }

        .banner-applique-dummy-image {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #1a1a1a, #333);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: #C5B358;
            position: relative;
            overflow: hidden;
        }

        .banner-applique-dummy-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(197, 179, 88, 0.1) 50%, transparent 70%);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .banner-applique-text-content {
            position: relative;
        }

        .banner-applique-main-title {
            font-size: 2.5rem;
            font-weight: bold;
            color: #C5B358;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .banner-applique-description-text {
            font-size: 1.1rem;
            color: #cccccc;
            line-height: 1.8;
        }

        .banner-highlight-golden-text {
            color: #C5B358;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

        .banner-accent-separator-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: linear-gradient(45deg, #FF1F1F, #ff4444);
            border-radius: 50%;
            margin: 0 0.8rem;
            animation: pulse-glow 2s infinite;
            box-shadow: 0 0 10px rgba(255, 31, 31, 0.5);
        }

        @keyframes pulse-glow {
            0%, 100% { 
                opacity: 1; 
                transform: scale(1);
                box-shadow: 0 0 10px rgba(255, 31, 31, 0.5);
            }
            50% { 
                opacity: 0.7; 
                transform: scale(1.2);
                box-shadow: 0 0 20px rgba(255, 31, 31, 0.8);
            }
        }

        .banner-watermark-overlay {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: rgba(255, 255, 255, 0.1);
            font-size: 0.8rem;
            pointer-events: none;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .banner-methods-grid-container {
                grid-template-columns: 1fr;
            }
            
            .banner-applique-content-layout {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .banner-options-main-title {
                font-size: 2.5rem;
            }
            
            .banner-application-header-title {
                font-size: 2rem;
            }
        }

        /* Enhanced Dark Theme Effects */
        .banner-method-item-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #C5B358, #FF1F1F, #C5B358);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .banner-method-item-card:hover::before {
            opacity: 1;
        }

        .banner-glow-effect {
            position: relative;
        }

        .banner-glow-effect::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(197, 179, 88, 0.1) 0%, transparent 70%);
            pointer-events: none;
        }

                                .msfx-dark-container {
                                    
                                    background: rgba(255, 255, 255, 0.02);
                                    border: 1px solid rgba(197, 179, 88, 0.3);
                                    border-radius: 16px;
                                    padding: 40px 20px;
                                    color: #e0e0e0;
                                }
                
                                .msfx-dark-main-title {
                                    text-align: center;
                                    font-size: 52px;
                                    font-weight: 700;
                                    color: #FF1F1F;
                                    margin-bottom: 60px;
                                    text-shadow: 0 0 20px rgba(255, 31, 31, 0.3);
                                    letter-spacing: 2px;
                                }
                
                                .msfx-dark-stands-wrapper {
                                    max-width: 1400px;
                                    margin: 0 auto;
                                    display: grid;
                                    grid-template-columns: 1fr 1fr;
                                    gap: 80px;
                                    margin-bottom: 80px;
                                }
                
                                .msfx-dark-stand-card {
                                    background: linear-gradient(145deg, #121111 0%, #121111 100%);
                                    border-radius: 20px;
                                    padding: 40px;
                                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                                        0 0 0 1px rgba(197, 179, 88, 0.2);
                                    border: 2px solid #C5B358;
                                    transition: all 0.4s ease;
                                    position: relative;
                                    overflow: hidden;
                                }
                
                                .msfx-dark-stand-card::before {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    left: -100%;
                                    width: 100%;
                                    height: 100%;
                                    background: linear-gradient(90deg, transparent, rgba(197, 179, 88, 0.05), transparent);
                                    transition: left 0.6s ease;
                                }
                
                                .msfx-dark-stand-card:hover::before {
                                    left: 100%;
                                }
                
                                .msfx-dark-stand-card:hover {
                                    transform: translateY(-10px);
                                    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5),
                                        0 0 0 1px rgba(197, 179, 88, 0.4);
                                }
                
                                .msfx-dark-stand-header {
                                    text-align: center;
                                    font-size: 28px;
                                    font-weight: 600;
                                    color: #C5B358;
                                    margin-bottom: 30px;
                                    text-decoration: underline;
                                    text-decoration-color: #C5B358;
                                    text-underline-offset: 8px;
                                }
                
                                .msfx-dark-stand-layout {
                                    display: flex;
                                    align-items: center;
                                    gap: 30px;
                                }
                
                                .msfx-dark-stand-info {
                                    flex: 1;
                                    color: #c0c0c0;
                                    line-height: 1.8;
                                    font-size: 16px;
                                }
                
                                .msfx-dark-stand-info p {
                                    margin-bottom: 18px;
                                }
                
                                .msfx-dark-stand-visual {
                                    flex: 0 0 220px;
                                    height: 200px;
                                    /* background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%); */
                                    border-radius: 15px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    border: 2px solid #C5B358;
                                    position: relative;
                                    overflow: hidden;
                                    /* box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); */
                                }
                
                                .msfx-dark-stand-visual img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    border-radius: 13px;
                                }
                
                                .msfx-dark-solid-stand {
                                    background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
                                    position: relative;
                                }
                
                                
                                .msfx-dark-hollow-stand {
                                    background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
                                    position: relative;
                                }
                
                
                                .msfx-dark-options-wrapper {
                                    max-width: 1400px;
                                    margin: 0 auto;
                                    background: linear-gradient(145deg, #1a1a1a 0%, #161515 100%);
                                    border-radius: 25px;
                                    padding: 34px;
                                    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4),
                                        0 0 0 1px rgba(197, 179, 88, 0.2);
                                    border: 2px solid #C5B358;
                                    position: relative;
                                    overflow: hidden;
                                }
                
                                .msfx-dark-options-wrapper::before {
                                    content: '';
                                    position: absolute;
                                    top: -50%;
                                    left: -50%;
                                    width: 200%;
                                    height: 200%;
                                    background: radial-gradient(circle, rgba(197, 179, 88, 0.05) 0%, transparent 70%);
                                    animation: msfx-dark-rotate 20s linear infinite;
                                }
                
                                @keyframes msfx-dark-rotate {
                                    0% {
                                        transform: rotate(0deg);
                                    }
                
                                    100% {
                                        transform: rotate(360deg);
                                    }
                                }
                
                                .msfx-dark-options-grid {
                                    display: flex;
                                    justify-content: center;
                                    gap: 16px;
                                    margin-bottom: 20px;
                                    position: relative;
                                    z-index: 1;
                                }
                
                                .msfx-dark-option-block {
                                    width: 60%;
                                    text-align: center;
                                }

                                .msfx-dark-option-blocksecond {
                                    width: 38%;
                                    text-align: center;
                                }
                
                                .msfx-dark-option-heading {
                                    font-size: 32px;
                                    font-weight: 700;
                                    text-align: left;
                                    color: #C5B358;
                                    margin-bottom: 16px;`
                                    text-shadow: 0 0 10px rgba(197, 179, 88, 0.3);
                                }
                
                                .msfx-dark-option-display {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    gap: 25px;
                                }
                
                                .msfx-dark-option-preview {
                                    width: 180px;
                                    height: 180px;
                                    border-radius: 20px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    border: 3px solid #C5B358;
                                    margin-bottom: 20px;
                                    position: relative;
                                    overflow: hidden;
                                    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
                                    transition: transform 0.3s ease;
                                }
                
                                .msfx-dark-option-preview:hover {
                                    transform: scale(1.05);
                                }
                
                                .msfx-dark-option-preview img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    border-radius: 17px;
                                }
                
                                .msfx-dark-envelope-preview {
                                    background: linear-gradient(135deg, #8e44ad 0%, #6a1b9a 100%);
                                    position: relative;
                                }
                
                                .msfx-dark-envelope-preview::before {
                                    content: '';
                                    position: absolute;
                                    top: 30%;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    width: 100px;
                                    height: 70px;
                                    background: #e8e8e8;
                                    border-radius: 8px;
                                    border: 2px solid #C5B358;
                                }
                
                                .msfx-dark-envelope-preview::after {
                                    content: '';
                                    position: absolute;
                                    top: 30%;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    width: 100px;
                                    height: 35px;
                                    background: linear-gradient(135deg, #9b59b6 0%, transparent 100%);
                                    border-radius: 8px 8px 0 0;
                                }
                
                                .msfx-dark-velcro-preview {
                                    background: linear-gradient(135deg, #FF1F1F 0%, #c62828 100%);
                                    position: relative;
                                }
                
                                .msfx-dark-velcro-preview::before {
                                    content: '';
                                    position: absolute;
                                    top: 40%;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    width: 80px;
                                    height: 60px;
                                    background: #e8e8e8;
                                    border-radius: 8px;
                                    border: 2px solid #C5B358;
                                }
                
                                .msfx-dark-velcro-preview::after {
                                    content: '';
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    width: 60px;
                                    height: 8px;
                                    background: #333;
                                    border-radius: 4px;
                                }
                
                                .msfx-dark-option-description {
                                    color: #c0c0c0;
                                    line-height: 1.7;
                                    font-size: 16px;
                                    text-align: center;
                                    max-width: 350px;
                                    margin: 0 auto;
                                }
                
                                .msfx-dark-velcro-samples {
                                    display: flex;
                                    gap: 25px;
                                    justify-content: center;
                                    margin-top: 25px;
                                }
                
                                .msfx-dark-velcro-sample {
                                    width: 90px;
                                    height: 45px;
                                    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
                                    border-radius: 8px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    color: #e0e0e0;
                                    font-size: 11px;
                                    text-align: center;
                                    position: relative;
                                    border: 1px solid #C5B358;
                                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                                }
                
                                .msfx-dark-velcro-sample.msfx-dark-vertical {
                                    writing-mode: vertical-lr;
                                    text-orientation: mixed;
                                }
                
                                .msfx-dark-velcro-sample.msfx-dark-horizontal {
                                    writing-mode: horizontal-tb;
                                }
                
                                .msfx-dark-banner-gallery {
                                    display: flex;
                                    justify-content: space-around;
                                    align-items: center;
                                    margin-top: 35px;
                                    gap: 20px;
                                }
                
                                .msfx-dark-banner-sample {
                                    width: 110px;
                                    height: 110px;
                                    background: linear-gradient(135deg, #FF1F1F 0%, #8B0000 100%);
                                    border-radius: 12px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    position: relative;
                                    overflow: hidden;
                                    border: 2px solid #C5B358;
                                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                                    transition: transform 0.3s ease;
                                }
                
                                .msfx-dark-banner-sample:hover {
                                    transform: scale(1.1);
                                }
                
                                .msfx-dark-banner-sample i {
                                    font-size: 45px;
                                    color: #fff;
                                    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
                                }
                
                                .msfx-dark-banner-sample::before {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
                                    animation: msfx-dark-shimmer 2s ease-in-out infinite;
                                }
                
                                @keyframes msfx-dark-shimmer {
                
                                    0%,
                                    100% {
                                        transform: translateX(-100%);
                                    }
                
                                    50% {
                                        transform: translateX(100%);
                                    }
                                }
                
                                .msfx-dark-footer-section {
                                    max-width: 1400px;
                                    margin: 80px auto 0;
                                    text-align: center;
                                    background: linear-gradient(145deg, #2a2a2a 0%, #1f1f1f 100%);
                                    border-radius: 25px;
                                    padding: 50px;
                                    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4),
                                        0 0 0 1px rgba(197, 179, 88, 0.2);
                                    border: 2px solid #C5B358;
                                    position: relative;
                                    z-index: 1;
                                }
                
                                .msfx-dark-footer-content {
                                    color: #c0c0c0;
                                    line-height: 1.9;
                                    font-size: 19px;
                                    margin-bottom: 20px;
                                }
                
                                .msfx-dark-accent-text {
                                    color: #FF1F1F;
                                    font-weight: 700;
                                    text-shadow: 0 0 10px rgba(255, 31, 31, 0.3);
                                }
                
                                .msfx-dark-separator {
                                    width: 120px;
                                    height: 4px;
                                    background: linear-gradient(90deg, #C5B358 0%, #FFD700 100%);
                                    margin: 25px auto;
                                    border-radius: 2px;
                                    box-shadow: 0 0 10px rgba(197, 179, 88, 0.3);
                                }
                
                                @media (max-width: 768px) {
                                    .msfx-dark-option-display {
                                        flex-direction: column;
                                    }
                                    .msfx-dark-stands-wrapper {
                                        grid-template-columns: 1fr;
                                        gap: 40px;
                                    }
                
                                    .msfx-dark-stand-layout {
                                        flex-direction: column;
                                    }
                
                                    .msfx-dark-stand-visual {
                                        flex: none;
                                        width: 100%;
                                        height: 180px;
                                    }
                
                                    .msfx-dark-options-grid {
                                        flex-direction: column;
                                        gap: 40px;
                                    }
                                    .msfx-dark-option-heading{
                                        text-align: center;
                                    }
                                    .msfx-dark-option-block {
                                        width: 100%;
                                    }

                                    .msfx-dark-option-blocksecond {
                                            width: 100%;
                                        }
                
                                    .msfx-dark-main-title {
                                        font-size: 40px;
                                    }
                
                                    .msfx-dark-banner-gallery {
                                        flex-wrap: wrap;
                                    }
                                }
                                
                                                                                .reelssection {
                                                                                    position: relative;
                                                                                    overflow: hidden;
                                                                                    width: 100%;
                                                                                    height: max-content;
                                                                                }
                                        
                                                                                .Reelsbackground-container {
                                                                                    position: absolute;
                                                                                    top: 0;
                                                                                    left: 0;
                                                                                    width: 100%;
                                                                                    height: 100%;
                                                                                    z-index: 1;
                                                                                    overflow: hidden;
                                                                                }
                                        
                                                                                /* Animated gradient background */
                                                                                .gradient-bg {
                                                                                    position: absolute;
                                                                                    width: 100%;
                                                                                    height: 100%;
                                                                                    background: linear-gradient(45deg, #000000, #202020, #000000, #2d2d2d);
                                                                                    background-size: 400% 400%;
                                        
                                                                                    animation: gradientShift 8s ease infinite;
                                                                                }
                                        
                                                                                @keyframes gradientShift {
                                                                                    0% {
                                                                                        background-position: 0% 50%;
                                                                                    }
                                        
                                                                                    50% {
                                                                                        background-position: 100% 50%;
                                                                                    }
                                        
                                                                                    100% {
                                                                                        background-position: 0% 50%;
                                                                                    }
                                                                                }
                                        
                                                                                /* Geometric Reelsshapes animation */
                                                                                .geometric-Reelsshapes {
                                                                                    position: absolute;
                                                                                    width: 100%;
                                                                                    height: 100%;
                                                                                    opacity: 0.1;
                                                                                }
                                        
                                                                                .Reelsshape {
                                                                                    position: absolute;
                                                                                    animation: float 6s ease-in-out infinite;
                                                                                }
                                        
                                                                                .Reelsshape::before {
                                                                                    content: '';
                                                                                    position: absolute;
                                                                                    width: 100px;
                                                                                    height: 100px;
                                                                                    background: linear-gradient(45deg, #d3701e, #ffdc63);
                                                                                    border-radius: 50%;
                                                                                    animation: pulse 4s ease-in-out infinite;
                                                                                }
                                        
                                                                                .Reelsshape:nth-child(1) {
                                                                                    top: 10%;
                                                                                    left: 10%;
                                                                                    animation-delay: 0s;
                                                                                }
                                        
                                                                                .Reelsshape:nth-child(2) {
                                                                                    top: 20%;
                                                                                    right: 10%;
                                                                                    animation-delay: 1s;
                                                                                }
                                        
                                                                                .Reelsshape:nth-child(3) {
                                                                                    bottom: 20%;
                                                                                    left: 20%;
                                                                                    animation-delay: 2s;
                                                                                }
                                        
                                                                                .Reelsshape:nth-child(4) {
                                                                                    bottom: 10%;
                                                                                    right: 20%;
                                                                                    animation-delay: 3s;
                                                                                }
                                        
                                                                                .Reelsshape:nth-child(5) {
                                                                                    top: 50%;
                                                                                    left: 5%;
                                                                                    animation-delay: 4s;
                                                                                }
                                        
                                                                                .Reelsshape:nth-child(6) {
                                                                                    top: 60%;
                                                                                    right: 5%;
                                                                                    animation-delay: 5s;
                                                                                }
                                        
                                                                                @keyframes float {
                                        
                                                                                    0%,
                                                                                    100% {
                                                                                        transform: translateY(0px) rotate(0deg);
                                                                                    }
                                        
                                                                                    50% {
                                                                                        transform: translateY(-20px) rotate(180deg);
                                                                                    }
                                                                                }
                                        
                                                                                @keyframes pulse {
                                        
                                                                                    0%,
                                                                                    100% {
                                                                                        transform: scale(1);
                                                                                        opacity: 0.5;
                                                                                    }
                                        
                                                                                    50% {
                                                                                        transform: scale(1.2);
                                                                                        opacity: 0.8;
                                                                                    }
                                                                                }
                                        
                                                                                /* Animated lines */
                                                                                .animated-lines {
                                                                                    position: absolute;
                                                                                    width: 100%;
                                                                                    height: 100%;
                                                                                    opacity: 0.3;
                                                                                }
                                        
                                                                                .lineReelsline {
                                                                                    position: absolute;
                                                                                    height: 2px;
                                                                                    background: linear-gradient(90deg, transparent, #d3701e, #ffdc63, transparent);
                                                                                    animation: moveLine 10s linear infinite;
                                                                                }
                                        
                                                                                .lineReelsline:nth-child(1) {
                                                                                    top: 20%;
                                                                                    width: 300px;
                                                                                    animation-delay: 0s;
                                                                                }
                                        
                                                                                .lineReelsline:nth-child(2) {
                                                                                    top: 40%;
                                                                                    width: 200px;
                                                                                    animation-delay: 2s;
                                                                                }
                                        
                                                                                .lineReelsline:nth-child(3) {
                                                                                    top: 60%;
                                                                                    width: 250px;
                                                                                    animation-delay: 4s;
                                                                                }
                                        
                                                                                .lineReelsline:nth-child(4) {
                                                                                    top: 80%;
                                                                                    width: 180px;
                                                                                    animation-delay: 6s;
                                                                                }
                                        
                                                                                @keyframes moveLine {
                                                                                    0% {
                                                                                        transform: translateX(-100%);
                                                                                    }
                                        
                                                                                    100% {
                                                                                        transform: translateX(100vw);
                                                                                    }
                                                                                }
                                        
                                                                                .content-wrapper {
                                                                                    position: relative;
                                                                                    z-index: 10;
                                                                                    /* min-height: 100vh; */
                                                                                    display: flex;
                                                                                    flex-direction: column;
                                                                                    align-items: center;
                                                                                    justify-content: center;
                                                                                    padding: 2rem;
                                                                                    text-align: center;
                                                                                }
                                        
                                                                                .main-content {
                                                                                    /* background: rgb(0 0 0 / 64%); */
                                                                                    background: rgb(0 0 0 / 86%);
                                                                                    backdrop-filter: blur(4px);
                                                                                    border-radius: 25px;
                                                                                    padding: 3rem;
                                                                                    max-width: 900px;
                                                                                    border: 1px solid rgba(211, 112, 30, 0.3);
                                                                                    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
                                                                                    margin-bottom: 2rem;
                                                                                    position: relative;
                                                                                    overflow: hidden;
                                                                                }
                                        
                                                                                .main-content::before {
                                                                                    content: '';
                                                                                    position: absolute;
                                                                                    top: 0;
                                                                                    left: 0;
                                                                                    right: 0;
                                                                                    height: 1px;
                                                                                    background: linear-gradient(90deg, transparent, #d3701e, #ffdc63, transparent);
                                                                                    animation: shimmer 3s ease-in-out infinite;
                                                                                }
                                        
                                                                                @keyframes shimmer {
                                                                                    0% {
                                                                                        transform: translateX(-100%);
                                                                                    }
                                        
                                                                                    100% {
                                                                                        transform: translateX(100%);
                                                                                    }
                                                                                }
                                        
                                                                                .Reels-hero-title {
                                                                                    font-size: 3.5rem;
                                                                                    font-weight: bold;
                                                                                    background: linear-gradient(45deg, #d3701e, #ffdc63, #d3701e);
                                                                                    background-size: 200% 200%;
                                                                                    -webkit-background-clip: text;
                                                                                    -webkit-text-fill-color: transparent;
                                                                                    background-clip: text;
                                                                                    margin-bottom: 1rem;
                                                                                    animation: titleGlow 3s ease-in-out infinite;
                                                                                }
                                        
                                                                                @keyframes titleGlow {
                                        
                                                                                    0%,
                                                                                    100% {
                                                                                        background-position: 0% 50%;
                                                                                    }
                                        
                                                                                    50% {
                                                                                        background-position: 100% 50%;
                                                                                    }
                                                                                }
                                        
                                                                                .Reels-hero-subtitle {
                                                                                    font-size: 1.5rem;
                                                                                    color: #ffdc63;
                                                                                    margin-bottom: 2rem;
                                                                                    opacity: 0.9;
                                                                                    animation: fadeInUp 1s ease-out;
                                                                                }
                                        
                                                                                .Reels-hero-description {
                                                                                    font-size: 1.1rem;
                                                                                    color: #ffffff;
                                                                                    line-height: 1.6;
                                                                                    margin-bottom: 2rem;
                                                                                    opacity: 0.8;
                                                                                    animation: fadeInUp 1s ease-out 0.2s both;
                                                                                }
                                        
                                                                                .cta-button {
                                                                                    background: linear-gradient(45deg, #d3701e, #ffdc63);
                                                                                    color: #1a1a1a;
                                                                                    padding: 1rem 2rem;
                                                                                    font-size: 1.1rem;
                                                                                    font-weight: bold;
                                                                                    border: none;
                                                                                    border-radius: 50px;
                                                                                    cursor: pointer;
                                                                                    transition: all 0.3s ease;
                                                                                    text-transform: uppercase;
                                                                                    letter-spacing: 1px;
                                                                                    position: relative;
                                                                                    overflow: hidden;
                                                                                    animation: fadeInUp 1s ease-out 0.4s both;
                                                                                }
                                        
                                                                                .cta-button::before {
                                                                                    content: '';
                                                                                    position: absolute;
                                                                                    top: 0;
                                                                                    left: -100%;
                                                                                    width: 100%;
                                                                                    height: 100%;
                                                                                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                                                                                    transition: left 0.5s;
                                                                                }
                                        
                                                                                .cta-button:hover::before {
                                                                                    left: 100%;
                                                                                }
                                        
                                                                                .cta-button:hover {
                                                                                    transform: translateY(-2px) scale(1.05);
                                                                                    box-shadow: 0 15px 30px rgba(211, 112, 30, 0.4);
                                                                                }
                                        
                                                                                @keyframes fadeInUp {
                                                                                    from {
                                                                                        opacity: 0;
                                                                                        transform: translateY(30px);
                                                                                    }
                                        
                                                                                    to {
                                                                                        opacity: 1;
                                                                                        transform: translateY(0);
                                                                                    }
                                                                                }
                                        
                                                                                /* --- Floating Social Icons Styles --- */
                                                                                .social-icon {
                                                                                    position: absolute;
                                                                                    font-size: 2.5rem;
                                                                                    animation: float-up 12s infinite linear;
                                                                                    opacity: 0;
                                                                                    filter: drop-shadow(0 0 10px rgba(211, 112, 30, 0.5));
                                                                                    z-index: 9999999;
                                                                                    pointer-events: none;
                                                                                }
                                        
                                                                                @keyframes float-up {
                                                                                    0% {
                                                                                        transform: translateY(150vh) rotate(0deg) scale(0.8);
                                                                                        opacity: 0;
                                                                                    }
                                        
                                                                                    5% {
                                                                                        opacity: 0.8;
                                                                                    }
                                        
                                                                                    95% {
                                                                                        opacity: 0.8;
                                                                                    }
                                        
                                                                                    100% {
                                                                                        transform: translateY(-100px) rotate(360deg) scale(1.2);
                                                                                        opacity: 0;
                                                                                    }
                                                                                }
                                        
                                                                                .fa-tiktok {
                                                                                    color: #fe2c55;
                                                                                    animation-duration: 10s;
                                                                                }
                                        
                                                                                .fa-instagram {
                                                                                    color: #e4405f;
                                                                                    animation-duration: 14s;
                                                                                }
                                        
                                                                                .fa-youtube {
                                                                                    color: #ff0000;
                                                                                    animation-duration: 11s;
                                                                                }
                                        
                                                                                .fa-facebook {
                                                                                    color: #1877f2;
                                                                                    animation-duration: 9s;
                                                                                }
                                        
                                                                                .fa-twitter {
                                                                                    color: #1da1f2;
                                                                                    animation-duration: 13s;
                                                                                }
                                        
                                                                                /* --- End Floating Social Icons Styles --- */
                                        
                                                                                /* .floating-particles {
                                                    position: absolute;
                                                    width: 6px;
                                                    height: 6px;
                                                    background: #ffdc63;
                                                    border-radius: 50%;
                                                    animation: particle-float 15s infinite linear;
                                                    box-shadow: 0 0 10px #ffdc63;
                                                } */
                                        
                                                                                @keyframes particle-float {
                                                                                    0% {
                                                                                        transform: translateY(100vh) translateX(0) scale(0);
                                                                                        opacity: 0;
                                                                                    }
                                        
                                                                                    5% {
                                                                                        opacity: 1;
                                                                                        transform: scale(1);
                                                                                    }
                                        
                                                                                    95% {
                                                                                        opacity: 1;
                                                                                    }
                                        
                                                                                    100% {
                                                                                        transform: translateY(-50px) translateX(200px) scale(0);
                                                                                        opacity: 0;
                                                                                    }
                                                                                }
                                        
                                                                                .stats-container {
                                                                                    display: flex;
                                                                                    justify-content: space-around;
                                                                                    margin-top: 2rem;
                                                                                    flex-wrap: wrap;
                                                                                    animation: fadeInUp 1s ease-out 0.6s both;
                                                                                }
                                        
                                                                                .stat-item {
                                                                                    text-align: center;
                                                                                    margin: 1rem;
                                                                                    padding: 1rem;
                                                                                    border-radius: 15px;
                                                                                    background: rgba(211, 112, 30, 0.1);
                                                                                    backdrop-filter: blur(10px);
                                                                                    transition: transform 0.3s ease;
                                                                                }
                                        
                                                                                .stat-item:hover {
                                                                                    transform: translateY(-5px);
                                                                                }
                                        
                                                                                .stat-number {
                                                                                    font-size: 2.5rem;
                                                                                    font-weight: bold;
                                                                                    color: #d3701e;
                                                                                    display: block;
                                                                                    text-shadow: 0 0 20px rgba(211, 112, 30, 0.5);
                                                                                }
                                        
                                                                                .stat-label {
                                                                                    color: #ffdc63;
                                                                                    font-size: 1rem;
                                                                                    margin-top: 0.5rem;
                                                                                }
                                        
                                                                                @media (max-width: 768px) {
                                                                                    .Reels-hero-title {
                                                                                        font-size: 2.5rem;
                                                                                    }
                                        
                                                                                    .main-content {
                                                                                        padding: 2rem;
                                                                                        margin: 1rem;
                                                                                    }
                                        
                                                                                    .stats-container {
                                                                                        flex-direction: column;
                                                                                        align-items: center;
                                                                                    }
                                        
                                                                                    .social-icon {
                                                                                        font-size: 2rem;
                                                                                    }
                                                                                }
                                        
                                                                                .reels-showcase-container {
                                                                                    /* background: linear-gradient(145deg, #1a1a1a, #2d2d2d); */
                                                                                    /* min-height: 100vh; */
                                                                                    padding: 40px 20px;
                                        
                                                                                    position: relative;
                                                                                    overflow: hidden;
                                                                                }
                                        
                                                                                .reels-showcase-container::before {
                                                                                    content: '';
                                                                                    position: absolute;
                                                                                    top: 0;
                                                                                    left: 0;
                                                                                    right: 0;
                                                                                    bottom: 0;
                                                                                    background: radial-gradient(circle at 20% 50%, rgba(229, 26, 35, 0.1) 0%, transparent 50%),
                                                                                        radial-gradient(circle at 80% 20%, rgba(197, 179, 88, 0.1) 0%, transparent 50%);
                                                                                    pointer-events: none;
                                                                                }
                                        
                                                                                .reels-showcase-header {
                                                                                    text-align: center;
                                                                                    margin-bottom: 50px;
                                                                                    position: relative;
                                                                                    z-index: 2;
                                                                                }
                                        
                                                                                .reels-showcase-title {
                                                                                    font-size: 3.5rem;
                                                                                    font-weight: 700;
                                                                                    background: linear-gradient(30deg, #d3701e, #ffdc63);
                                                                                    -webkit-background-clip: text;
                                                                                    -webkit-text-fill-color: transparent;
                                                                                    background-clip: text;
                                                                                    margin-bottom: 15px;
                                                                                    text-shadow: 0 0 30px rgba(255, 220, 99, 0.3);
                                                                                }
                                        
                                                                                .reels-showcase-subtitle {
                                                                                    /* color: #c0c0c0; */
                                                                                    color: #000000;
                                                                                    font-size: 1.2rem;
                                                                                    font-weight: 300;
                                                                                    opacity: 0.9;
                                                                                }
                                        
                                                                                .reels-showcase-main {
                                                                                    max-width: 1400px;
                                                                                    margin: 0 auto;
                                                                                    position: relative;
                                                                                    z-index: 2;
                                                                                }
                                        
                                                                                .reels-showcase-carousel {
                                                                                    position: relative;
                                                                                    overflow: hidden;
                                                                                    border-radius: 20px;
                                                                                    /* background: rgba(255, 255, 255, 0.05); */
                                                                                    background: #00000085;
                                                                                    backdrop-filter: blur(10px);
                                                                                    border: 1px solid rgba(255, 255, 255, 0.1);
                                                                                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
                                                                                }
                                        
                                                                                .reels-showcase-track {
                                                                                    display: flex;
                                                                                    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                                                                    will-change: transform;
                                                                                }
                                        
                                                                                .reels-showcase-slide {
                                                                                    min-width: 100%;
                                                                                    display: grid;
                                                                                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                                                                                    gap: 30px;
                                                                                    padding: 56px 40px;
                                                                                }
                                        
                                                                                .reels-showcase-card {
                                                                                    background: linear-gradient(145deg, rgba(229, 26, 35, 0.1), rgba(197, 179, 88, 0.1));
                                                                                    border-radius: 15px;
                                                                                    padding: 20px;
                                                                                    position: relative;
                                                                                    overflow: hidden;
                                                                                    transition: all 0.4s ease;
                                                                                    border: 1px solid rgba(255, 255, 255, 0.1);
                                                                                    backdrop-filter: blur(5px);
                                                                                }
                                        
                                                                                .reels-showcase-card:hover {
                                                                                    transform: translateY(-10px);
                                                                                    box-shadow: 0 25px 50px rgba(229, 26, 35, 0.2);
                                                                                    border-color: rgba(229, 26, 35, 0.3);
                                                                                }
                                        
                                                                                .reels-showcase-card::before {
                                                                                    content: '';
                                                                                    position: absolute;
                                                                                    top: 0;
                                                                                    left: 0;
                                                                                    right: 0;
                                                                                    height: 3px;
                                                                                    background: linear-gradient(90deg, #e51a23, #C5B358);
                                                                                    opacity: 0;
                                                                                    transition: opacity 0.3s ease;
                                                                                }
                                        
                                                                                .reels-showcase-card:hover::before {
                                                                                    opacity: 1;
                                                                                }
                                        
                                                                                .reels-showcase-platform {
                                                                                    display: flex;
                                                                                    align-items: center;
                                                                                    justify-content: space-between;
                                                                                    margin-bottom: 15px;
                                                                                }
                                        
                                                                                .reels-showcase-platform-info {
                                                                                    display: flex;
                                                                                    align-items: center;
                                                                                    gap: 10px;
                                                                                }
                                        
                                                                                .reels-showcase-platform-icon {
                                                                                    width: 30px;
                                                                                    height: 30px;
                                                                                    border-radius: 50%;
                                                                                    display: flex;
                                                                                    align-items: center;
                                                                                    justify-content: center;
                                                                                    color: white;
                                                                                    font-size: 14px;
                                                                                }
                                        
                                                                                .reels-showcase-platform-icon i {
                                                                                    color: #fff;
                                                                                }
                                        
                                                                                .reels-showcase-platform-icon.instagram {
                                                                                    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
                                                                                }
                                        
                                                                                .reels-showcase-platform-icon.tiktok {
                                                                                    background: linear-gradient(45deg, #ff0050, #00f2ea);
                                                                                }
                                        
                                                                                .reels-showcase-platform-icon.youtube {
                                                                                    background: linear-gradient(45deg, #ff0000, #cc0000);
                                                                                }
                                        
                                                                                .reels-showcase-platform-name {
                                                                                    color: #fff;
                                                                                    font-weight: 600;
                                                                                    font-size: 0.9rem;
                                                                                }
                                        
                                                                                .reels-showcase-video-container {
                                                                                    position: relative;
                                                                                    width: 100%;
                                                                                    height: 380px;
                                                                                    border-radius: 12px;
                                                                                    overflow: hidden;
                                                                                    margin-bottom: 15px;
                                                                                    background: #000;
                                                                                }
                                        
                                                                                .reels-showcase-video {
                                                                                    width: 100%;
                                                                                    height: 100%;
                                                                                    object-fit: cover;
                                                                                    border: none;
                                                                                    transition: transform 0.3s ease;
                                                                                }
                                        
                                                                                .reels-showcase-card:hover .reels-showcase-video {
                                                                                    transform: scale(1.05);
                                                                                }
                                        
                                                                                .reels-showcase-play-overlay {
                                                                                    position: absolute;
                                                                                    top: 50%;
                                                                                    left: 50%;
                                                                                    transform: translate(-50%, -50%);
                                                                                    background: rgba(0, 0, 0, 0.7);
                                                                                    border-radius: 50%;
                                                                                    width: 60px;
                                                                                    height: 60px;
                                                                                    display: flex;
                                                                                    align-items: center;
                                                                                    justify-content: center;
                                                                                    color: white;
                                                                                    font-size: 20px;
                                                                                    transition: all 0.3s ease;
                                                                                    opacity: 0;
                                                                                }
                                        
                                                                                .reels-showcase-video-container:hover .reels-showcase-play-overlay {
                                                                                    opacity: 1;
                                                                                    background: rgba(229, 26, 35, 0.9);
                                                                                }
                                        
                                                                                .reels-showcase-video-info {
                                                                                    color: #fff;
                                                                                }
                                        
                                                                                .reels-showcase-video-title {
                                                                                    font-size: 1.1rem;
                                                                                    font-weight: 600;
                                                                                    margin-bottom: 8px;
                                                                                    line-height: 1.3;
                                                                                }
                                        
                                                                                .reels-showcase-video-stats {
                                                                                    display: flex;
                                                                                    gap: 20px;
                                                                                    color: #c0c0c0;
                                                                                    font-size: 0.9rem;
                                                                                }
                                        
                                                                                .reels-showcase-stat {
                                                                                    display: flex;
                                                                                    align-items: center;
                                                                                    gap: 5px;
                                                                                }
                                        
                                                                                .reels-showcase-controls {
                                                                                    display: flex;
                                                                                    justify-content: center;
                                                                                    align-items: center;
                                                                                    gap: 20px;
                                                                                    margin-top: 40px;
                                                                                }
                                        
                                                                                .reels-showcase-nav-btn {
                                                                                    background: linear-gradient(45deg, #e51a23, #C5B358);
                                                                                    border: none;
                                                                                    color: white;
                                                                                    width: 50px;
                                                                                    height: 50px;
                                                                                    border-radius: 50%;
                                                                                    display: flex;
                                                                                    align-items: center;
                                                                                    justify-content: center;
                                                                                    cursor: pointer;
                                                                                    font-size: 16px;
                                                                                    transition: all 0.3s ease;
                                                                                    box-shadow: 0 5px 15px rgba(229, 26, 35, 0.3);
                                                                                }
                                        
                                                                                .reels-showcase-nav-btn:hover {
                                                                                    transform: translateY(-2px);
                                                                                    box-shadow: 0 10px 25px rgba(229, 26, 35, 0.5);
                                                                                }
                                        
                                                                                .reels-showcase-nav-btn:active {
                                                                                    transform: translateY(0);
                                                                                }
                                        
                                                                                .reels-showcase-nav-btn:disabled {
                                                                                    opacity: 0.5;
                                                                                    cursor: not-allowed;
                                                                                }
                                        
                                                                                .reels-showcase-indicators {
                                                                                    display: flex;
                                                                                    gap: 10px;
                                                                                    align-items: center;
                                                                                }
                                        
                                                                                .reels-showcase-indicator {
                                                                                    width: 12px;
                                                                                    height: 12px;
                                                                                    border-radius: 50%;
                                                                                    background: rgba(255, 255, 255, 0.3);
                                                                                    cursor: pointer;
                                                                                    transition: all 0.3s ease;
                                                                                }
                                        
                                                                                .reels-showcase-indicator.active {
                                                                                    background: linear-gradient(45deg, #e51a23, #C5B358);
                                                                                    transform: scale(1.2);
                                                                                }
                                        
                                                                                .reels-showcase-auto-play-toggle {
                                                                                    position: absolute;
                                                                                    top: 10px;
                                                                                    right: 20px;
                                                                                    background: rgba(0, 0, 0, 0.7);
                                                                                    border: none;
                                                                                    color: white;
                                                                                    padding: 10px 15px;
                                                                                    border-radius: 20px;
                                                                                    cursor: pointer;
                                                                                    font-size: 14px;
                                                                                    display: flex;
                                                                                    align-items: center;
                                                                                    gap: 8px;
                                                                                    transition: all 0.3s ease;
                                        
                                                                                }
                                        
                                                                                .reels-showcase-auto-play-toggle:hover {
                                                                                    background: rgba(229, 26, 35, 0.8);
                                                                                }
                                        
                                                                                .reels-showcase-auto-play-toggle.active {
                                                                                    background: linear-gradient(45deg, #e51a23, #C5B358);
                                                                                }
                                        
                                                                                @media (max-width: 768px) {
                                                                                    .reels-showcase-title {
                                                                                        font-size: 2.5rem;
                                                                                    }
                                        
                                                                                    .reels-showcase-slide {
                                                                                        grid-template-columns: 1fr;
                                                                                        padding: 20px;
                                                                                    }
                                        
                                                                                    .reels-showcase-controls {
                                                                                        flex-direction: column;
                                                                                        gap: 15px;
                                                                                    }
                                                                                }
                                        
                                                                                @keyframes pulse {
                                        
                                                                                    0%,
                                                                                    100% {
                                                                                        opacity: 1;
                                                                                    }
                                        
                                                                                    50% {
                                                                                        opacity: 0.7;
                                                                                    }
                                                                                }
                                        
                                                                                .reels-showcase-loading {
                                                                                    animation: pulse 2s infinite;
                                                                                }
.logo-carousel{
    background: aliceblue;
}

/* Overlay Background */
.policy-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    overflow: auto;
    animation: policy-fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal Content */
.policy-modal-content {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    color: #2d3748;
    margin: 2% auto;
    padding: 0;
    border-radius: 24px;
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    border: none;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(230, 159, 60, 0.1);
    position: relative;
    animation: policy-slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header Section */
.policy-header {
    background: linear-gradient(135deg, #E69F3C, #F4B942);
    padding: 30px 30px 60px;
    color: white;
    position: relative;
    overflow: hidden;
}

.policy-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Main Title */
.policy-main-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.policy-subtitle {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

/* Scrollable Content */
.policy-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Section Titles */
.policy-title {
    font-size: 22px;
    font-weight: 700;
    color: #2d3748;
    margin: 30px 30px 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #E69F3C;
    position: relative;
}

.policy-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #E69F3C, #F4B942);
    border-radius: 2px;
}

.policy-title-subtitle {
    font-weight: 600;
    color: #E69F3C;
    font-size: 16px;
}

/* Text Sections */
.policy-text {
    padding: 0 30px;
    font-size: 15px;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 20px;
}

.policy-text p {
    margin-bottom: 16px;
}

.policy-text ul {
    margin: 16px 0;
    padding-left: 20px;
}

.policy-text li {
    margin-bottom: 8px;
    position: relative;
}

.policy-text li::marker {
    color: #E69F3C;
}

/* Custom Scrollbar */
.policy-content::-webkit-scrollbar {
    width: 8px;
}

.policy-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.policy-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #E69F3C, #F4B942);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.policy-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d4851f, #E69F3C);
}

/* Close Button */
.policy-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.policy-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Progress Bar */
.scroll-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #E69F3C, #F4B942);
    transition: width 0.1s ease;
    border-radius: 0 2px 0 0;
}

/* Animations */
@keyframes policy-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes policy-slideUp {
    from {
        transform: translateY(50px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .policy-modal-content {
        margin: 5% auto;
        width: 98%;
        max-height: 90vh;
        border-radius: 20px;
    }

    .policy-header {
        padding: 25px 20px;
    }

    .policy-main-title {
        font-size: 24px;
    }

    .policy-title {
        font-size: 20px;
        margin: 25px 20px 15px;
    }

    .policy-text {
        padding: 0 20px;
        font-size: 14px;
    }
}

/* Hover effects for better interactivity */
.policy-text p:hover {
    color: #2d3748;
    transition: color 0.3s ease;
}

/* Add subtle animations to sections */
.policy-text {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.policy-text:nth-child(even) {
    animation-delay: 0.1s;
}

.policy-text:nth-child(odd) {
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
        
                .terms-modal {
                    display: none;
                    position: fixed;
                    z-index: 9999;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7);
                    backdrop-filter: blur(10px);
                    animation: fadeIn 0.3s ease;
                }
        
                .terms-modal-content {
                    background: #ffffff;
                    margin: 3% auto;
                    padding: 0;
                    border-radius: 12px;
                    max-width: 900px;
                    width: 90%;
                    max-height: 80vh;
                    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                    position: relative;
                    animation: slideIn 0.4s ease;
                    overflow-y: scroll;
                }
        
                .terms-header {
                    background: #ffffff;
                    padding: 40px 50px 30px;
                    text-align: center;
                    border-bottom: 2px solid #e2e8f0;
                    position: relative;
                }
        
                .terms-title {
                    font-size: 32px;
                    font-weight: 700;
                    color: #2d3748;
                    margin-bottom: 15px;
                    letter-spacing: -0.5px;
                }
        
                .terms-subtitle {
                    font-size: 16px;
                    color: #718096;
                    line-height: 1.6;
                    max-width: 600px;
                    margin: 0 auto;
                }
        
                .terms-close {
                    position: absolute;
                    top: 20px;
                    right: 25px;
                    width: 35px;
                    height: 35px;
                    background: #f7fafc;
                    border: none;
                    border-radius: 50%;
                    color: #4a5568;
                    font-size: 18px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.3s ease;
                }
        
                .terms-close:hover {
                    background: #e2e8f0;
                    color: #2d3748;
                }
        
                .terms-content {
                    padding: 40px 50px;
                    text-align: center;
                    background: #f8fafc;
                }
        
                .pdf-container {
                    background: #ffffff;
                    border: 2px dashed #cbd5e0;
                    border-radius: 12px;
                    padding: 30px 40px;
                    margin: 0px 0px;
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                }
        
                .pdf-container::before {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: radial-gradient(circle, rgba(102, 126, 234, 0.03) 0%, transparent 70%);
                    animation: rotate 15s linear infinite;
                }
        
                .pdf-container:hover {
                    border-color: #667eea;
                    transform: translateY(-2px);
                    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
                }
        
                .pdf-icon {
                    width: 100%;
                    height: 100%;
                    margin: 0 auto 25px;
                    position: relative;
                    z-index: 2;
                }
        
                .pdf-icon img {
                    width: 100%;
                    height: 100%;
                    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
                }
        
                .pdf-icon svg {
                    width: 100%;
                    height: 100%;
                    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
                }
        
                .pdf-text {
                    font-size: 18px;
                    font-weight: 600;
                    color: #2d3748;
                    margin-bottom: 8px;
                    position: relative;
                    z-index: 2;
                }
        
                .pdf-description {
                    font-size: 14px;
                    color: #718096;
                    margin-bottom: 25px;
                    position: relative;
                    z-index: 2;
                }
        
                .download-btn {
                    background: linear-gradient(135deg, #EBAF3D, #cf8f17);
                    color: white;
                    border: none;
                    padding: 12px 30px;
                    border-radius: 8px;
                    font-size: 16px;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
                    position: relative;
                    z-index: 2;
                }
        
                .download-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px #f7a102;
                }
        
                .download-icon {
                    width: 18px;
                    height: 18px;
                }
        
                .terms-footer {
                    background: #ffffff;
                    padding: 25px 50px;
                    border-top: 1px solid #e2e8f0;
                    text-align: center;
                }
        
                .footer-text {
                    font-size: 13px;
                    color: #a0aec0;
                    line-height: 1.5;
                }
        
                @keyframes fadeIn {
                    from {
                        opacity: 0;
                    }
        
                    to {
                        opacity: 1;
                    }
                }
        
                @keyframes slideIn {
                    from {
                        transform: translateY(-50px) scale(0.95);
                        opacity: 0;
                    }
        
                    to {
                        transform: translateY(0) scale(1);
                        opacity: 1;
                    }
                }
        
                @keyframes rotate {
                    0% {
                        transform: rotate(0deg);
                    }
        
                    100% {
                        transform: rotate(360deg);
                    }
                }
        
                @media (max-width: 768px) {
                    .terms-modal-content {
                        width: 95%;
                        margin: 5% auto;
                    }
        
                    .terms-header,
                    .terms-content,
                    .terms-footer {
                        padding-left: 25px;
                        padding-right: 25px;
                    }
        
                    .terms-title {
                        font-size: 26px;
                    }
        
                    .pdf-container {
                        padding: 40px 20px;
                    }
        
                    .pdf-icon {
                        width: 60px;
                        height: 60px;
                    }
                }