/*==================================================
 Metal Craft Website
 Main Stylesheet
==================================================*/

/* Google Fonts */
:root{
    --primary:#19A8E8;
    --primary-hover:#021826;
    --dark-blue:#087CB8;
    --navy:#021826;
    --white:#ffffff;
    --light:#F7FAFC;
    --text:#333333;
    --gray:#6B7280;
    --border:#E5E7EB;
    --accent:#F59E0B;

    --radius:12px;
    --transition:.35s ease;
    --shadow:0 15px 40px rgba(0,0,0,.08);
}

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

html {
    overflow-x: clip;
}

body {
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.7;
    position: relative;
    width: 100%;
    max-width: 100%;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

section{
    padding:60px 0;
}

.container{
    max-width:1320px;
}

/*==========================
Typography
==========================*/

h1,h2,h3,h4,h5,h6{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    color:#014171;
}

h1{
    font-size:58px;
    line-height:1.15;
}

h2{
    font-size:42px;
}

p{
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
}

.text-center p,
p.text-center,
.counter-section p,
.counter-box p {
    text-align: center !important;
    text-align-last: center !important;
}
/*==========================
Header & Topbar
==========================*/
.header {
    width: 100%;
    z-index: 1030;
}

.top-bar {
    background: var(--navy);
    color: #e5e5e5;
    padding: 7px 0;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.top-bar-item {
    color: #e5e5e5;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.top-bar-item i {
    color: var(--primary);
    font-size: 14px;
}

.top-bar-item:hover {
    color: var(--primary);
}

.top-bar-divider {
    color: rgba(255, 255, 255, 0.3);
}

.top-bar-badge {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
}

.top-bar-badge i {
    color: #19a8eb !important;
    font-size: 14px;
}

.navbar{
    transition:.4s;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    padding:10px 0;
}

.navbar.scrolled{
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    padding:10px 0;
}

.navbar-brand img{
    height:60px;
}

.nav-link{
    color: var(--navy);
    font-weight:600;
    margin:0 10px;
    transition:.3s;
}


.nav-link.active{
color: var(--primary) !important;
}

.navbar.scrolled .nav-link{
    color: var(--navy);
}

.nav-link:hover{
    color: var(--primary);
}

.dropdown-menu{
    border:none;
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:10px;
    margin-top:-2px;
    display:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.nav-item.dropdown:hover > .dropdown-menu,
.nav-item.dropdown:focus-within > .dropdown-menu,
.nav-item.dropdown > .dropdown-menu.show,
.dropdown-menu.show{
    display:block !important;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-item{
    padding:10px 18px;
    border-radius:6px;
    transition: background-color 0.25s ease, color 0.25s ease;
    color: var(--navy);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #19a8e8 !important;
    color: #ffffff !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: transparent !important;
    color: #19a8e8 !important;
    font-weight: 600;
}

/*==========================
Buttons
==========================*/

.btn{
    border-radius:50px;
    padding:13px 30px;
    font-weight:600;
    transition:var(--transition);
}

.btn-primary-custom{
    background:var(--primary);
    color:#fff;
}

.btn-primary-custom:hover{
    background:var(--primary-hover);
    transform:translateY(-3px);
    color:#fff;
}

.btn-outline-custom{
    border:2px solid var(--primary);
    color:var(--primary);
}

.btn-outline-custom:hover{
    background:var(--primary);
    color:#fff;
}

.btn-whatsapp{
    background:#25D366;
    color:#fff;
}

.btn-whatsapp:hover{
    background:#1EBE57;
    color:#fff;
}

/*==========================
 Redesigned Hero Slider Section
==========================*/

.hero-slider-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0e2639;
}

.mainHeroSwiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slide {
    position: relative;
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 8s ease;
}

.swiper-slide-active .hero-slide-bg {
    transform: scale(1.06);
}

.hero-slide .container {
    position: relative;
    z-index: 2;
    padding-top: 155px;
    padding-bottom: 80px;
}

.min-vh-hero {
    min-height: 62vh;
}

.hero-slide-content {
    max-width: 680px;
}

.hero-slide-content .hero-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 22px;
    margin-top: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.hero-slide-content h1 {
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hero-slide-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: left;
    max-width: 600px;
}

.hero-btns {
    display: flex;
    gap: 15px;
    align-items: center;
}

.hero-slide-card {
    position: relative;
    width: 100%;
    height: 380px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 12px;
    border: 6px solid #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: transform 0.5s ease;
    margin-top: 25px;
}

.hero-slide-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 50% !important; */
    border: none;
    display: block;
}

.hero-card-badge {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    white-space: nowrap;
    background: rgba(14, 38, 57, 0.9);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Main Hero Swiper Navigation (Left & Right) */
.main-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    background: rgba(14, 38, 57, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.main-hero-nav:hover {
    background: #014171;
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(1, 65, 113, 0.6);
}

.main-hero-prev {
    left: 25px;
}

.main-hero-next {
    right: 25px;
}

/* Main Hero Pagination Bullets */
.main-hero-pagination {
    bottom: 25px !important;
    z-index: 10;
}

.main-hero-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4);
    opacity: 0.8;
    width: 12px;
    height: 12px;
    margin: 0 6px !important;
    transition: all 0.3s ease;
}

.main-hero-pagination .swiper-pagination-bullet-active {
    background: #ffffff;
    opacity: 1;
    width: 32px;
    border-radius: 6px;
}    

@keyframes float{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

/*==========================
Section Title
==========================*/

.section-title{
    margin-bottom:60px;
}

.section-title span{
    color:var(--primary);
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-title h2{
    margin-top:12px;
}

.section-light{
    background:var(--light);
}

.section-light-2{
      background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}



/*=========================================
        ABOUT SECTION
=========================================*/

.about-section{

    position:relative;

}

.section-subtitle{

    color:var(--primary);

    font-weight:600;

    letter-spacing:2px;

    font-size:14px;

}

.section-heading{

    font-size:44px;

    color: #014171;

    margin:20px 0;

}

.section-text{

    font-size:16px;

    color:#000000;

    line-height:1.9;

}

.abt-img{
     border-left: 4px solid var(--dark-blue);
    
     border-bottom: 4px solid var(--dark-blue);
    border-radius: 20px;
}

.about-image{

    position:relative;

    width:100%;

}

.about-image img{

    border-radius:20px;

    border: 4px solid #d2e0e7;

    box-shadow:0 20px 50px rgba(0,0,0,.10);
    

}

.experience-box{

    position:absolute;

    bottom:-30px;

    right:-10px;

    background:#19A8E8;

    color:#fff;

    width:150px;

    padding:10px;

    border-radius:18px;

    border: 1px solid var(--navy);

    box-shadow:0 20px 40px rgba(0,0,0,.18);

    text-align: center;

}

.experience-box h2{

    color:#fff;

    font-size:28px;

    margin-bottom:8px;

}

.experience-box p{

    color:#fff;

    font-size: 13px;

    margin:0;
    text-align: center;

}

.about-feature{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

}

.about-feature i{

    color:var(--primary);

    font-size:20px;

}

/*=====================================
WHY CHOOSE US
=====================================*/

.why-choose{
    background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.choose-card{

    background:#fff;

    padding:20px 20px;

    border-radius:16px;

    border:1px solid var(--border);

    transition:.35s;

    height:100%;

  

}

.choose-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    border-color:var(--primary);

}

.choose-icon{

    width:60px;

    height:60px;

    margin:auto;

    border-radius:50%;

    background:var(--primary);
    

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    transition:.35s;

}

.choose-icon i{

    font-size:34px;

    color: var(--light);

}

.choose-card:hover .choose-icon{

    background:var(--primary);

}

.choose-card:hover .choose-icon i{

    color:#fff;

}

.choose-card h4{

    margin-bottom:18px;
    text-align: center;

    font-size:20px;

}

.choose-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:0;

    

}

/*=========================================
        SERVICES
=========================================*/

.services-section{

    background:#F7FAFC;

}

.services-section .btn-primary-custom{
    text-align: center;
}

.service-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    height:100%;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.service-img{

    overflow:hidden;

}

.service-img img{

    width:100%;

    height:180px;

    object-fit:cover;

    transition:.5s;

}

.service-card:hover img{

    transform:scale(1.08);

}

.service-content{

    padding:28px;

}





.service-content h4{

    font-size:18px;

    margin-bottom:15px;

}

.service-content p{

    color:#666;

    margin-bottom:25px;

    line-height:1.8;

}

.service-btn{

    color:var(--primary);

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.service-btn:hover{

    gap:18px;

    color:var(--primary-hover);

}

/*=========================================
        PRODUCTS
=========================================*/

.products-section{

    background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;

}

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

    transition:.35s;

    height:100%;

}

.product-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.product-img{

    position:relative;

    overflow:hidden;

}

.product-img img{

    width:100%;

    height:170px;

    object-fit:cover;

    transition:.5s;

}

.product-card:hover img{

    transform:scale(1.08);

}



.product-content{

    padding:28px;

}

.product-content h4{

    font-size:18px;
  
    margin-bottom:15px;

}

.product-content p{

    color:#666;
   

    line-height:1.8;

    margin-bottom:16px;

}

.product-content a{

    color:#19A8E8;

    text-decoration:none;

    font-weight:600;

    display:inline-flex;

    
    text-align: center;

    gap:10px;

    transition:.3s;

}

.product-content a:hover{

    gap:18px;

    color:#0D8FD0;

}
/*=====================================
PROCESS SECTION
=====================================*/
.process-section{
    
    background: var(--navy);
}

.process-card{

    background: var(--light);

    border-radius: 18px;

    padding:10px 10px;

    text-align:center;

    transition:.35s;

    border:1px solid var(--border);

    height:100%;
    border: 4px solid var(--primary);

}

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.process-icon{

    width:60px;

    height:60px;

    margin:auto;

    border-radius:50%;

    background:rgba(25,168,232,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

}

.process-icon i{

    font-size:34px;

    color:var(--primary);

}

.process-card p{
    font-size: 18px !important;
}

/*=====================================
COUNTER
=====================================*/

.counter-section{

    background:var(--navy);

    padding:10px 0;

}

.counter-box h2{

   
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-top: 15px;
}



.counter-box p{

    color:#fff;
    text-align: center;
    font-size: 13px;
    margin-top:10px;

}

/*=====================================
PREMIUM GALLERY
=====================================*/

/* .gallery-section{
      background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
} */




.gallery-card{

position:relative;

overflow:hidden;

border-radius:18px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

cursor:pointer;

}

.gallery-card img{

width:100%;

height:320px;

object-fit:cover;

transition:.6s;

}

.gallery-overlay{

position:absolute;

inset:0;

background:rgba(23, 107, 135, 0.85);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:#fff;

opacity:0;

transition:.4s;

padding:20px;

text-align:center;

gap:12px;

}

.gallery-overlay i{

font-size:24px;

width:54px;

height:54px;

background:rgba(255, 255, 255, 0.25);

backdrop-filter:blur(4px);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

transition:transform .3s ease, background .3s ease;

}

.gallery-card:hover .gallery-overlay i{

transform:scale(1.15);

background:rgba(255, 255, 255, 0.4);

}

.gallery-card:hover img{

transform:scale(1.12);

}

.gallery-card:hover .gallery-overlay{

opacity:1;

}

.gallery-section .btn-primary-custom{
    text-align: center !important;
}

/* Gallery Filter Tabs */
.gallery-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 45px;
}

.gallery-filter button {
    padding: 10px 24px;
    border-radius: 30px;
    background: #F0F4F8;
    color: var(--navy);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-filter button:hover,
.gallery-filter button.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(25, 168, 232, 0.28);
    border-color: var(--primary);
}


/* =========================================
   LIGHTBOX MODAL STYLING
   ========================================= */
.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.9);
    backdrop-filter: blur(8px);
}

.lightbox-dialog {
    position: relative;
    z-index: 100000;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 85vw;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.92);
    transition: transform 0.3s ease;
}

.gallery-lightbox.active .lightbox-content img {
    transform: scale(1);
}

.lightbox-caption {
    margin-top: 15px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.lightbox-close {
    position: absolute;
    top: -45px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 100001;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 100001;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: -70px;
}

.lightbox-next {
    right: -70px;
}

@media (max-width: 768px) {
    .lightbox-prev {
        left: -10px;
        width: 38px;
        height: 38px;
        font-size: 16px;
        margin-top: 95px;
    }
    .lightbox-next {
        right: -10px;
        width: 38px;
        height: 38px;
        font-size: 16px;
        margin-top: 95px;
    }
    .lightbox-close {
        top: -40px;
        right: 0px;
    }
}



/*=========================
      TESTIMONIAL
==========================*/

.testimonial-section{
    padding:60px 0;
    background:#f5fbff;
    
    background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.testimonial-section .section-subtitle{
    display: block;
    width: fit-content;
    margin: 0 auto 10px;
    text-align: center;
}


.testimonialSlider{
    padding:25px 10px 70px;
}

.testimonial-card{

    position:relative;
    background:#fff;
    min-height:365px;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);

}


/* Heading */

.testimonial-heading{

    position:absolute;
    top:40px;
    left:35px;
    z-index:20;

}

.testimonial-heading span{

    display:block;
    color:#7cb9ea;
    font-size:16px;
    letter-spacing:1px;
    font-weight:300;

}

.testimonial-heading h2{

    color:#19a8e8;
    font-size:32px;
    line-height:1;
    font-weight:800;
    margin-top:5px;

}



/* Top Shape */

.top-shape{

    position:absolute;
    top:0;
    right:0;
    width:50%;
    height:50px;
    background:#19a8e8;
    border-bottom-left-radius:80px;

}





/* Review */

.testimonial-content{

    position:relative;
    z-index:10;
    width:80%;
    margin:185px auto 0;
    text-align:center;

}

.testimonial-content p{

    font-size:15px;
    line-height:1.9;
    color:#666;
    font-style: italic;
    margin-top: -60px;
}



/* Bottom Area */

.testimonial-bottom{

    position:absolute;
    left:35px;
    bottom:35px;
    display:flex;
    align-items:center;
    gap:25px;
    z-index:20;

}


/* Client Image */

.client-img{

    width:90px;
    height:90px;
    border-radius:50%;
    overflow:hidden;
    border:8px solid #fff;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    flex-shrink:0;

}

.client-img img{

    width:100%;
    height:100%;
    object-fit:cover;

}



/* Client Info */

.client-info h3{

    margin-top:20px;
    font-size:20px;
    font-weight:600;
    color: var(--navy);

}

.client-info span{

    display:block;
    margin:8px 0;
    color:#777;
    font-size:15px;

}





/* Rating */

.rating{

    color:#f8a400;
    font-size:16px;

}

.rating i{

    margin-right:2px;

}



/* Swiper */

.swiper-slide{

    height:auto;

}






/* Left Blue Triangle */

.client-img::before{

    content:"";
    position:absolute;

    left:-55px;
    top:-18px;

    width:80px;
    height:80px;

    background:#19a8e8;

    clip-path:polygon(0 0,100% 50%,0 100%);

    z-index:-1;

}


/* Make image above wave */

.client-img{

    position:relative;
    z-index:25;

}


/* Client info */

.client-info{

    position:relative;
    z-index:25;

}


/* Text */

.testimonial-content{

    position:relative;
    z-index:25;

}


/* Heading */

.testimonial-heading{

    z-index:30;

}


/* Quote */

.quote-icon{

    z-index:30;

}


/* Hover */

.testimonial-card{

    transition:.45s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 60px rgba(0,0,0,.18);

}


/*==============================
      RESPONSIVE
===============================*/

@media(max-width:1200px){

.testimonial-heading h2{

    font-size:42px;

}

.client-info h3{

    font-size:24px;

}

}


@media(max-width:991px){

.testimonial-card{

    min-height:500px;

}

.testimonial-heading{

    left:25px;

}

.testimonial-heading h2{

    font-size:38px;

}

.testimonial-content{

    width:75%;
    margin-top:170px;

}

.client-img{

    width:105px;
    height:105px;

}

.client-info h3{

    font-size:22px;

}

}


@media(max-width:767px){

.testimonial-card{

    min-height:321px;

}

.top-shape{

    width:42%;
    height:58px;

}

.quote-icon{

    top:150px;
    right:30px;
    font-size:36px;

}

.testimonial-heading{

    top:28px;
    left:22px;

}

.testimonial-heading span{

    font-size:16px;

}

.testimonial-heading h2{

    font-size:32px;

}

.testimonial-content{

    width:82%;
    margin-top:145px;

}

.testimonial-content p{

    font-size:12px;
 

}

.testimonial-bottom{

    left:20px;
    bottom:25px;
    gap:15px;

}

.client-img{

    width:90px;
    height:90px;

}

.client-info h3{

    font-size:19px;

}

.client-info span{

    font-size:14px;

}

.rating{

    font-size:15px;

}

}


@media(max-width:480px){

.testimonial-heading h2{

    font-size:20px;

}

.testimonial-content{

    width:88%;

}

.client-img{

    width:80px;
    height:80px;

}

.client-info h3{

    font-size:17px;

}


.footer-logo img{
    width: 50%;
}

}

.clients-section{

padding:60px 0;

background: var(--navy);

overflow:hidden;

}

.client-slider{

overflow:hidden;

position:relative;

}

.client-track{

display:flex;

gap:80px;

width:max-content;

animation:scrollLogo 25s linear infinite;

align-items:center;

}

.client-track img{

height:100px;


transition:.3s;



}

.client-track img:hover{

opacity:1;

filter:none;

}

@keyframes scrollLogo{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

.cta-section{

padding:0;

}

.cta-box{

background:#19A8E8;

padding:40px;

border-radius:25px;

display:flex;

justify-content:space-between;

align-items:center;

color:#fff;



}

.cta-box h2{

color:#fff;

font-size:40px;

margin-bottom:15px;

}

.cta-btns{

display:flex;

gap:15px;

}
.cta-btns .btn:hover{
    background: var(--primary-hover);
    color:#fff !important;
}
.contact-section{
       background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}


.contact-card{

display:flex;

gap:20px;

margin-top:10px;

align-items:flex-start;

}

.contact-card i{

width:50px;

height:50px;

background:#19A8E8;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

border-radius:14px;

font-size:22px;

}

.contact-form-box{

background:#fff;

padding:45px;


border-radius:15px;

box-shadow:0 20px 50px rgba(0, 0, 0, 0.459);
border-left: 8px solid var(--primary);
border-bottom: 5px solid var(--primary);

}

.contact-form-box .form-control{

height:50px;

border-radius:12px;

}

.contact-form-box textarea{

height:auto !important;

}

.footer-logo img{
    width: 50%;
}

.footer{

background: var(--navy);

padding:60px 0 30px;

color:#fff;

}

.footer h5{

margin-bottom:25px;

color:#fff;

}

.footer ul{

padding:0;

}

.footer li{

list-style:none;

margin-bottom:14px;

}

.footer a{

color:#d6d6d6;

transition:.3s;

text-decoration:none;

}

.footer a:hover{

color:#19A8E8;

}

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:45px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:rgba(255,255,255,.08);

font-size:18px;

}

.footer hr{

margin:20px 0;

border-color:rgba(255,255,255,.15);

}

.copyright{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#b8c4d0;
}

.credit {
    text-align: right;
     color:#3476b9;
}

.credit a{
       color:#3476b9;
       font-size: 14px;
}

@media (max-width:991px){
    .footer {
        text-align: center !important;
    }

    .footer p,
    .footer-logo p,
    .footer div p {
        text-align: center !important;
        text-align-last: center !important;
    }

    .copyright{
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .credit{
        text-align: center;
    }

    .footer h5{
        margin-top: 0;
    }

    .footer-social a,
    .footer h5,
    .footer li a,
    .footer li
    {
        text-align: center;
    }
    .footer-social {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 25px;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-logo img {
        display: block;
        margin: 0 auto 20px auto;
    }
}

.whatsapp-btn{

position:fixed;

right:25px;

bottom:30px;

width:62px;

height:62px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:32px;

box-shadow:0 15px 35px rgba(0,0,0,.25);

z-index:999;

transition:.3s;

animation:whatsapp 2s infinite;

}

.whatsapp-btn:hover{

transform:translateY(-6px);

color:#fff;

}

@keyframes whatsapp{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.6);

}

70%{

box-shadow:0 0 0 18px transparent;

}

100%{

box-shadow:0 0 0 0 transparent;

}

}

#topBtn{

position:fixed;

right:25px;

bottom:105px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#19A8E8;

color:#fff;

font-size:22px;

display:none;

z-index:999;

cursor:pointer;

transition:.3s;

}

#topBtn:hover{

background:#087CB8;

}

#loader{

position:fixed;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.spinner{

width:70px;

height:70px;

border:6px solid #eee;

border-top:6px solid #19A8E8;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}






#progressBar{

position:fixed;

top:0;

left:0;

height:2px;

background:#19A8E8;

width:0;

z-index:99999;

}

/*=========================================
PREMIUM MEGA MENU
=========================================*/

.mega-dropdown{

position:static;

}

.mega-menu{

width:100%;

left:0;

right:0;

margin-top:18px;

border:none;

border-radius:20px;

box-shadow:0 25px 60px rgba(0,0,0,.12);

padding:35px;

background:#fff;

position:absolute;

z-index:1050;

display:none;

opacity:0;

visibility:hidden;

transform:translateY(10px);

transition:opacity .25s ease, transform .25s ease, visibility .25s ease;

animation:megaFade .3s ease;

}

.mega-dropdown:hover > .mega-menu,
.mega-dropdown:focus-within > .mega-menu,
.mega-dropdown > .mega-menu.show{

display:block !important;

opacity:1;

visibility:visible;

transform:translateY(0);

}

.mega-title{

font-size:18px;

font-weight:700;

color:#12344D;

margin-bottom:18px;

}

.mega-menu a{

display:flex;

align-items:center;

gap:14px;

padding:14px 0;

color:#555;

font-weight:500;

transition:.3s;

}

.mega-menu a:hover{

padding-left:12px;

color:#19A8E8;

}

.mega-menu i{

width:42px;

height:42px;

background:#EAF8FF;

border-radius:10px;

display:flex;

align-items:center;

justify-content:center;

color:#19A8E8;

font-size:18px;

transition:.3s;

}

.mega-menu a:hover i{

background:#19A8E8;

color:#fff;

}

@keyframes megaFade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=====================================
INDUSTRIES SECTION
=====================================*/

.industries-section{

    background:#ffffff;

}

.industry-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    height:380px;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.industry-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.industry-overlay{

    position:absolute;

    inset:0;

  

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    color:#fff;

}

.industry-icon{

    width:60px;

    height:60px;

    background:#19A8E8;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

}

.industry-icon i{

    font-size:30px;

    color:#fff;

}

.industry-overlay h4{

    color:#fff;

    margin-bottom:15px;

    font-size:26px;

}

.industry-overlay p{

    color:#e5e5e5;

    line-height:1.8;

}

.industry-card:hover img{

    transform:scale(1.1);

}

.industry-card:hover{

    transform:translateY(-8px);

    transition:.35s;

}

/*=====================================
QUALITY SECTION
=====================================*/

.quality-section{

    background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;

}

.quality-list{

    margin-top:35px;

}

.quality-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

    font-size:17px;

    font-weight:500;

}

.quality-item i{

    color:#19A8E8;

    font-size:22px;

}

.certificate-card{

    background:#fff;

    border-radius:18px;

    padding:25px 25px;

    text-align:center;

    transition:.35s;

    height:100%;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.certificate-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.10);

}

.certificate-card i{

    font-size:46px;

    color:#19A8E8;

    margin-bottom:20px;

}

.certificate-card h4{

    margin-bottom:12px;

    font-size:18px;

}

.certificate-card p{

    margin-bottom:0;
 

    color:#666;

}

.map-section iframe{

width:100%;

height:450px;

border:0;

}

/* GET A QUOTE */

.bg-custom-skyblue {
    background-color: #19a8e8 !important;
    color: var(--navy) !important;
  }
  .text-custom-skyblue {
    color: #19a8e8 !important;
  }
  .btn-custom-skyblue {
    background-color: #19a8e8 !important;
    border-color: #19a8e8 !important;
    color: #ffffff !important;
  }
  .btn-custom-skyblue:hover {
    background-color: #148ec5 !important;
    border-color: #148ec5 !important;
  }
  .form-control:focus, .form-select:focus {
    border-color: #19a8e8 !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 168, 232, 0.25) !important;
  }

/*=====================================
INNER PAGE BANNER STYLING
=====================================*/
.inner-page-banner {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 50px 0;
    margin-top: 140px;
    color: #ffffff;
    text-align: center;
}


.inner-page-banner h1 {
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.25;
}

.inner-page-banner p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    max-width: 720px;
    margin: 0 auto 25px;
    text-align: center;
}

.breadcrumb-custom {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.breadcrumb-custom a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.breadcrumb-custom a:hover {
    color: var(--primary);
}

.breadcrumb-custom span.separator {
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-custom span.active {
    color: var(--primary);
    font-weight: 600;
}

/* Vision & Mission Cards */
.vision-section{
     background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.vision-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 38px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.14);
    border-left: 5px solid var(--primary);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    height: 100%;
}

.vision-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.vision-card .vision-icon {
    width: 60px;
    height: 60px;
    background: rgba(25, 168, 232, 0.12);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 22px;
}


.vision-card p {
    color: #555555;
    margin-bottom: 0;
    line-height: 1.7;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
}

.vision-card h4{
     font-size: 22px;
}

/* History Timeline Card */
.timeline-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.35s ease;
    height: 100%;
}

.timeline-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.timeline-year {
    display: inline-block;
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.timeline-card h4 {
    
    font-size: 20px;
    margin-bottom: 10px;
}

.timeline-card p {
    color: #666666;
    font-size: 14px;
    margin-bottom: 0;
    text-align: left;
}
@media (max-width: 480px){

         .inner-page-banner {
        padding: 25px 0;
    }

    .inner-page-banner h1 {
        font-size: 32px;
    }
    .breadcrumb-custom{
            font-size: 10px;
            padding: 4px 12px;
    }
    .service-detail-box {
        padding: 0 !important;
    }
}

/*=====================================
SERVICE SIDEBAR & DETAILS STYLING
=====================================*/
.service-sidebar-col {
    position: relative;
}

@media (min-width: 992px) {
    .service-sidebar-col {
        align-self: flex-start;
    }

    .service-sidebar {
        z-index: 99;
        transition: top 0.1s ease-out;
    }
}

.service-menu-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 30px;
    margin-top: -25px;
}

.service-menu-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    background: #F7FAFC;
    color: var(--navy);
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.service-menu-link i {
    font-size: 14px;
    color: var(--gray);
    transition: transform 0.3s ease, color 0.3s ease;
}

.service-menu-link:hover,
.service-menu-link.active {
    background: var(--primary);
    color: #ffffff !important;
    transform: translateX(5px);
    box-shadow: 0 8px 20px rgba(25, 168, 232, 0.25);
}

.service-menu-link:hover i,
.service-menu-link.active i {
    color: #ffffff;
    transform: translateX(3px);
}

.service-help-widget {
    background: var(--navy);
    border-radius: 18px;
    padding: 30px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 15px 35px rgba(2, 24, 38, 0.15);
}

.service-help-widget .help-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--primary);
    margin: 0 auto 18px auto;
}

.service-help-widget h4 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-help-widget p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center !important;
    text-align-last: center !important;
}

.service-help-widget .phone-number {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    display: block;
    margin-bottom: 20px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.service-help-widget .phone-number:hover {
    color: var(--primary);
}

.service-help-widget .btn,
.service-help-widget .btn-primary-custom {
    background: #19a8e8 !important;
    border: 1px solid #19a8e8 !important;
    color: #042035 !important;
    transition: all 0.3s ease !important;
}

.service-help-widget .btn:hover,
.service-help-widget .btn-primary-custom:hover {
    background: #19a8e8 !important;
    border-color: #19a8e8 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.service-detail-box {
    
    border-radius: 20px;
    padding: 35px;
   
}

.service-detail-img {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
}

.spec-table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.spec-table th {
    background: var(--navy);
    color: #ffffff;
    font-weight: 600;
    padding: 14px 20px;
}

.spec-table td {
    padding: 14px 20px;
    color: #444444;
}

/*=====================================
CONTACT PAGE STYLING
=====================================*/
.contact-info-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.contact-info-icon {
    width: 48px;
    height:48px;
    background: rgba(25, 168, 232, 0.12);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.contact-info-content h5 {
    color: var(--navy);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-info-content p,
.contact-info-content a {
    color: #555555;
    font-size: 15px;
    margin-bottom: 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-content a:hover {
    color: var(--primary);
}

.contact-form-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-map-box {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    height: 100%;
    min-height: 420px;
}

.contact-map-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.section-light-contact{
      background-image: url('images/section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

/*=====================================
HORIZONTAL PRODUCT QUICK LINKS BAR
=====================================*/
.product-quick-links-bar {
    background: #ffffff;
    padding: 16px 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 15;
}

.product-nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 12px;
}

@media (max-width: 1200px) {
    .product-nav-wrapper {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .product-nav-wrapper::-webkit-scrollbar {
        display: none;
    }
}

.product-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 30px;
    background: #F0F4F8;
    color: var(--navy);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.product-nav-btn i {
    font-size: 14px;
    color: var(--primary);
    transition: color 0.3s ease;
}

.product-nav-btn:hover,
.product-nav-btn.active {
    background: var(--primary);
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(25, 168, 232, 0.25);
    border-color: var(--primary);
}

.product-nav-btn:hover i,
.product-nav-btn.active i {
    color: #ffffff;
}

/* Product Feature Cards */
.product-feature-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    height: 100%;
}

.product-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.product-feature-icon {
    width: 58px;
    height: 58px;
    background: rgba(25, 168, 232, 0.12);
    color: var(--primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

/* =========================================
        CTA SECTION STYLING (Blue Banner Card)
========================================= */
.cta-section {
    background: transparent;
    padding: 40px 0;
}

.cta-box {
    background: #19a8e8;
    background: linear-gradient(135deg, #19a8e8 0%, #0e8bc7 100%);
    border-radius: 24px;
    padding: 45px 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 15px 35px rgba(25, 168, 232, 0.22);
}

.cta-box h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 8px;
    line-height: 1.25;
}

.cta-box p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
}

.cta-box .btn-light,
.cta-btns .btn,
.cta-btns a {
    background-color: #ffffff !important;
    color: #042035 !important;
    font-weight: 700;
    border-radius: 50px !important;
    padding: 14px 34px !important;
    font-size: 16px;
    border: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cta-box .btn-light:hover,
.cta-box .btn-light:hover i,
.cta-box .btn-light:hover *,
.cta-btns .btn:hover,
.cta-btns .btn:hover i,
.cta-btns .btn:hover *,
.cta-btns a:hover,
.cta-btns a:hover i,
.cta-btns a:hover * {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    background-color: #ffffff !important;
    color: #050f16 !important;
}

@media (max-width: 991px) {
    .cta-box {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
        gap: 20px;
    }
}