/* Critical CSS - Inline for immediate rendering */
body{margin:0;font-family:'Hind',Arial,sans-serif}
h2{color:#333;font-family:"Josefin Sans";font-size:50px;font-weight:700;line-height:50px;text-transform:uppercase;padding-bottom:50px}
h2 span{color:#888}
#home-bg .home-bg{height:100vh;background-color:rgba(0,0,0,0.34)}
#home-bg .video-container{position:absolute;top:-4%;left:0;width:100%;height:105%;overflow:hidden;z-index:-1}
#home-bg .video-container video{width:100%;height:100%;object-fit:cover}
#home-bg .content{width:80%;font-family:"Hind",Arial,sans-serif;position:relative;z-index:1;color:white;text-align:center;padding:20px 0 20px 40px;top:35%;left:17%;font-size:35px;font-weight:600}
.text-container,.text-content,.text-details{font-size:31px;font-weight:400;font-family:"Josefin Sans";text-align:center;opacity:0;transition:opacity 1s ease-in-out;display:none;text-transform:uppercase}
.text-content{font-size:43px!important;font-weight:700!important}
.content-pair{width:89%}

/* Prevent layout shift */
.about-section-bg{min-height:600px}
.owl-carousel{min-height:400px}
.modal{display:none}
#particles-js{position:absolute;z-index:2;width:100%;height:50rem;background-color:transparent}

/* Team Section */
#team{background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important}
.custom-padd-team{padding-top:5rem;padding-bottom:10rem}
.slick-slide{padding:0;transition:transform .3s ease,filter .3s ease}
.slick-slide img{display:block;margin:auto}
.slick-center img{filter:none}
.slick-slide:not(.slick-center) img{transform:scale(0.6);filter:grayscale(100%)}
.team-carousel-section{margin:0 auto;width:100%}
#active-image-text{margin-top:10px;color:#000;text-align:center;font-family:"Dosis",Arial,sans-serif;font-size:18px;font-weight:600;line-height:22px;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:0}
#active-image-designation{color:#828282;font-family:"Hind",Arial,sans-serif;font-size:17px;font-weight:300;line-height:29px;letter-spacing:1.7px;margin-bottom:30px}
#active-image-description{color:#828282;text-align:center;font-family:"Hind",Arial,sans-serif;font-size:18px;font-weight:300;line-height:22px;letter-spacing:1.8px}
.top-border-container{position:relative;border-top:1rem solid;width:18%;top:0;left:50%;transform:translateX(-50%)}

/* About Section */
.about-section-bg{margin-top:3rem;background-image:url('/assets/images/Home/about_cbd_home_img.avif');background-size:cover;background-position:right;background-repeat:no-repeat;position:relative;z-index:1;height:max-content}
.custom-padd{padding-left:13rem}
.custom-padd .margin-top-section{margin-top:1rem!important}
.custom-padd .custom-heading-cbd{font-family:"Josefin Sans";font-size:50px;font-weight:700;line-height:50px;text-transform:uppercase;padding-bottom:50px;color:#FFF;margin-top:1rem}
.custom-padd .custom-heading-aboutus{color:#FFF;font-family:"Hind",Arial,sans-serif;font-size:40px;font-weight:300;line-height:29px;text-transform:uppercase}
.custom-padd p{text-align:justify;font-family:"Hind",Arial,sans-serif;font-size:18px;font-weight:300;line-height:29px;letter-spacing:1.8px;color:white;margin-top:1rem}
.about-us-logo1-wrapper,.about-us-logo2-wrapper{padding:2rem}
.aboust-section-pt{padding:3rem 0!important}
.about-section-logo-imgs{margin-top:-9rem}

/* Message Section */
.message-section h2{color:#333;text-align:center;font-family:"Josefin Sans";font-weight:700;font-size:50px}
.message-section h4{color:#000;text-align:left;font-family:"Dosis",Arial,sans-serif;font-size:18px;font-weight:600;line-height:22px;letter-spacing:1.8px;text-transform:uppercase}
#message .message{color:#000;cursor:pointer;font-family:'Hind';font-weight:500;font-size:18px;line-height:28px}
#message p,.desc{color:#828282;font-family:"Hind",Arial,sans-serif;font-size:18px;font-weight:300;line-height:29px;letter-spacing:1.8px;text-align:justify}

/* Business Section */
#business{display:flex;align-items:flex-start}
#business h2{color:#333;font-family:"Josefin Sans";font-size:50px;font-weight:700;line-height:50px;text-transform:uppercase;padding-bottom:50px;margin-top:7rem;padding-left:2rem}
#business h2 span{color:#888;font-family:"Josefin Sans";font-size:50px;font-weight:700!important;position:relative;line-height:29px;text-transform:uppercase}
#business h3{color:#333;font-family:"Hind",Arial,sans-serif;font-size:28px;font-weight:300;line-height:29px;text-transform:uppercase}
#business p{color:#828282;font-family:"Hind",Arial,sans-serif;font-size:18px;font-weight:300;line-height:29px;letter-spacing:1.8px;text-align:justify;padding-top:1rem}
#business .padding-tab{padding-left:8rem}
#business .tabs{display:flex;align-items:flex-start}
#business .tab-buttons{position:relative;display:flex;flex-direction:column;align-items:center;margin-right:20px;z-index:1;padding-left:2rem;margin-bottom:7rem}
#business .tab-buttons::before{content:'';position:absolute;top:40px;bottom:40px;left:67%;width:1px;background-color:#d6d6d6;z-index:-1}
#business .tab-button{display:flex;align-items:center;justify-content:center;padding:10px;border:2px solid #d6d6d6;text-align:left;cursor:pointer;font-size:16px;transition:background-color .3s,color .3s;border-radius:50%;margin-bottom:20px;margin-top:10px;height:70px;width:70px;background-color:#fff}
#business .tab-button .icon{font-size:24px;color:#d6d6d6}
#business .tab-button.active{background-color:#000;color:#fff;border-color:#000}
#business .tab-button.active .icon{color:#fff}
#business .tab-content{flex:1}
#business .tab-pane1{display:none;opacity:0;transition:opacity .5s ease-in-out,transform .5s ease-in-out}
#business .tab-pane1.active{display:block;animation:fadeUp .5s ease-in-out forwards}
.businessbg{background-color:#7b7b7b;box-shadow:inset -27px -21px 26px -27px rgba(0,0,0,0.75)}

/* Design Section */
#design h3{margin:0!important;width:100%;color:black;text-align:left;font-family:"Josefin Sans";font-weight:600;font-size:27px;line-height:45px;letter-spacing:1.98px;text-transform:uppercase}
#design .design-buttons .design-button{margin:0!important;width:100%;color:#a6a1a1;text-align:right;font-family:"Josefin Sans";font-size:18px;font-weight:300;line-height:45px;letter-spacing:1.98px;text-transform:uppercase}
#design .design-buttons .design-button.active{color:#000;font-weight:500;border:none!important}
#design .container-fluid{height:100%;background-size:cover;background-image:url('/assets/images/Home/infrastructure.png');background-position:right;background-attachment:fixed;padding-bottom:4rem}
#design .design-buttons{display:flex;flex-direction:column;justify-content:flex-end;align-items:end;padding-right:2rem}
#design p{color:#828282;font-family:'Hind',Arial,sans-serif;font-weight:200;font-size:18px;margin-top:20px}
.design-btn-row{padding-top:8rem}
.progress{height:42px;background-color:#ddd;border-radius:0;overflow:hidden}
.progress-bar{height:100%;background-color:#6e6e6e;position:relative;width:0;transition:width 2s ease}
.progress-text,.progress-value{position:absolute;top:30%;transform:translateY(-50%);color:white}
.progress-text{top:34%;left:10px}
.progress-value{right:10px}

/* Projects Section */
#projects{background-color:white}
#projects h2{color:#333;font-family:"Josefin Sans";font-size:50px;font-weight:700;line-height:50px;text-transform:uppercase;padding-bottom:50px;margin-top:7rem;padding-left:2rem}
#projects h2 span{color:#888;font-family:"Josefin Sans";font-size:50px;font-weight:700!important;position:relative;line-height:29px;text-transform:uppercase}
#projects .card{width:100%;height:100%;margin:0!important;background:transparent;border:none}
#projects .card img{height:300px}
#projects .card-text{color:#333!important;font-family:'Hind',Arial,sans-serif!important;font-size:20px!important;font-weight:300!important;line-height:29px!important;text-transform:uppercase!important;padding:0!important;margin:20px 0!important;text-align:center;background:transparent}
.custom-card-padd{padding:0 2rem}
.card{margin-top:5%;border-radius:0;line-height:1.3}
.card-body{position:relative;padding:0;z-index:0;transition:all .35s ease}
.card-body::after{height:0;left:0;bottom:0;width:100%;transition:all .35s}
.card-body::before,.card-body::after{padding:0;background:#2a2929;content:'';position:absolute;z-index:1}
.card:hover{color:#2a2929}
.card:hover .card-body:after{height:100%;color:#fff}
.card-img,.card-img-top{z-index:1}
.background-content{position:absolute;top:40%;left:45%;transform:translate(-50%,-50%);display:none;transition:left .4s cubic-bezier(.19,1,.22,1)}
.background-content .btn{border-radius:0}
.background-content a{color:#FFF;background-color:transparent;font-size:11px;font-family:Nunito;font-weight:600;line-height:30px;text-align:center;text-transform:capitalize;padding:0 10px;margin:10px 10px 4px;letter-spacing:4px}
.card:hover .background-content{display:block}
#projects .custom-card-padd .card .card-body img{transition:transform .3s ease-in-out}
#projects .custom-card-padd .card .card-body:hover img{transform:translateY(-280px)}
.owl-carousel .owl-dots{margin-top:0!important}
.owl-carousel .owl-dots .owl-dot{height:10px!important;width:10px!important;margin-bottom:2rem}
.owl-carousel .owl-dots .owl-dot .active{background:#686161!important}

/* Modal Styles */
.modal-message{top:-1rem}
.modal-header{border-bottom:2px solid #e5e5e5}
.custom-modal{width:60%;max-width:70%;height:70%}
.custom-modal h5{color:#000;text-align:left;font-family:"Dosis",Arial,sans-serif;font-size:24px;font-weight:600;line-height:22px;letter-spacing:1.8px;text-transform:uppercase}
.custom-modal p{padding:30px 0;font-size:18px;font-family:"Hind",sans-serif;font-weight:300;color:#000;letter-spacing:1px}
.custom-modal-independance{width:100vw;max-width:95%}
.custom-modal-independance .modal-content{background-color:transparent;border:none;box-shadow:none}
.custom-modal-independance .modal-body{background-color:transparent}
.image-container{position:relative;text-align:center;height:100%}
.image-container img{height:auto}
.cross{position:absolute;top:-10px;right:-10px;font-size:2rem;color:#fff;z-index:1050}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in-home{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fade-in-home-bottom{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}

.fade-in-home-effect{opacity:1;display:block}
.letter{display:inline-block;opacity:0;transform:translateY(20px);animation:fade-in-home 1s ease forwards;letter-spacing:2px}
.fade-up{opacity:1;transform:translateY(0)}
.tab-pane{transform:translateY(50px);transition:opacity 1s ease-in-out,transform 1s ease-in-out}

/* Utility Classes */
.w-80{width:80%!important}
.myCls,#more1,#more2,#more3,#more4,#more5,#more6{display:none}
canvas{display:block;vertical-align:bottom}

/* Responsive Styles */
@media (max-width:767px){#myModal .modal-content{height:300px}}
@media only screen and (max-width:600px){#myModal .modal-body a.pre-order-btn{width:120px;font-size:11px;margin-top:130px}}
@media (max-width:575.98px){.owl-carousel.owl-dots-overlay .owl-dots{bottom:-50px;background:0 0}.owl-carousel .owl-dots .owl-dot{width:24px;height:24px}.custom-modal-independance{max-width:100%!important}.cross{right:30px!important}}
@media (max-width:576px){.modal-message{top:6rem}.custom-modal-independance .first-img{width:unset!important;position:unset!important}}
@media only screen and (min-width:1501px){.custom-modal-independance .first-img{width:370px!important;position:relative!important;left:80px!important;height:100%!important}}
@media only screen and (min-width:1536px){.custom-modal-independance .first-img{width:321px!important;position:relative!important;left:80px!important;height:100%!important}}