/*==============================================================================
Project        : SR AIRCON Engineering Services
Version        : 1.0.0
Author         : Chandrakanth Prajapati
Description    : Main Stylesheet
Framework      : Bootstrap 5.3.x
Fonts          : DM Sans | Inter
==============================================================================*/


/*==============================================================================
01. GOOGLE FONTS
==============================================================================*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');


/*==============================================================================
02. ROOT VARIABLES
==============================================================================*/

:root{

    /* Brand Colors */

    --primary:#0B3D91;
    --primary-dark:#072A67;
    --secondary:#00AEEF;
    --accent:#F59E0B;

    /* Background */

    --body:#ffffff;
    --section:#F8FAFC;
    --dark:#0F172A;

    /* Text */

    --text:#334155;
    --heading:#0F172A;
    --muted:#64748B;

    /* Border */

    --border:#E2E8F0;

    /* Success */

    --success:#10B981;

    /* Danger */

    --danger:#EF4444;

    /* Radius */

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:20px;
    --radius-xl:28px;

    /* Shadow */

    --shadow-sm:0 8px 20px rgba(15,23,42,.06);

    --shadow-md:0 15px 45px rgba(15,23,42,.08);

    --shadow-lg:0 25px 80px rgba(15,23,42,.12);

    /* Transition */

    --transition:.35s ease;

    /* Container */

    --container:1320px;

}


/*==============================================================================
03. RESET
==============================================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:var(--body);

    color:var(--text);

    font-size:16px;

    line-height:1.8;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    margin:0;

    padding:0;

    list-style:none;

}

button{

    border:none;

    outline:none;

}

input,
textarea,
select{

    outline:none;

    box-shadow:none !important;

}

section{

    position:relative;

}

::selection{

    background:var(--primary);

    color:#fff;

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}


/*==============================================================================
04. BOOTSTRAP OVERRIDES
==============================================================================*/

.container{

    max-width:1320px;

}

.row{

    --bs-gutter-x:1.5rem;

}

.btn{

    font-weight:600;

    transition:var(--transition);

}

.btn:focus{

    box-shadow:none;

}


/*==============================================================================
05. TYPOGRAPHY
==============================================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'DM Sans',sans-serif;

    color:var(--heading);

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

h1{

    font-size:64px;

}

h2{

    font-size:48px;

}

h3{

    font-size:36px;

}

h4{

    font-size:28px;

}

h5{

    font-size:22px;

}

h6{

    font-size:18px;

}

p{

    color:var(--text);

    margin-bottom:20px;

}

.lead{

    font-size:18px;

    line-height:1.9;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#E8F4FF;

    color:var(--primary);

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.section-tag.text-white{

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

    color:#ffffff!important;

}

.section-title{

    font-size:28px;

    font-weight:800;

    margin-top:20px;

    margin-bottom:25px;

    line-height:1.2;

}

.section-description{

    max-width:760px;

    margin:auto;

    color:var(--muted);

    font-size:18px;

}


/*==============================================================================
06. COMMON SPACING
==============================================================================*/

.py-120{

    padding-top:120px;

    padding-bottom:120px;

}

.py-100{

    padding-top:100px;

    padding-bottom:100px;

}

.py-80{

    padding-top:80px;

    padding-bottom:80px;

}

.mt-60{

    margin-top:60px;

}

.mb-60{

    margin-bottom:60px;

}


/*==============================================================================
07. COMMON UTILITIES
==============================================================================*/

.bg-primary-soft{

    background:#EDF6FF;

}

.bg-light-blue{

    background:#F8FBFF;

}

.rounded-20{

    border-radius:20px;

}

.rounded-30{

    border-radius:30px;

}

.shadow-soft{

    box-shadow:var(--shadow-md);

}

.shadow-large{

    box-shadow:var(--shadow-lg);

}

.text-primary{

    color:var(--primary)!important;

}

.text-muted{

    color:var(--muted)!important;

}

.position-relative{

    position:relative;

}

.overflow-hidden{

    overflow:hidden;

}


/*==============================================================================
08. GLOBAL ANIMATIONS
==============================================================================*/

img{

    transition:.5s ease;

}

.card,
.service-card,
.project-card,
.industry-card{

    transition:.35s ease;

}

.service-card:hover,
.project-card:hover,
.industry-card:hover{

    transform:translateY(-8px);

}

.btn:hover{

    transform:translateY(-2px);

}

a:hover{

    color:var(--primary);

}


/*==============================================================================
09. PRELOADER (Future)
==============================================================================*/

.preloader{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:99999;

}


/*==============================================================================
10. TOP BAR
==============================================================================*/

.topbar{
    background: var(--dark);
    color: rgba(255,255,255,.85);
    font-size: 14px;
    position: relative;
    z-index: 1050;
}

.topbar a{
    color:#ffffff;
    opacity:.85;
}

.topbar a:hover{
    color: var(--secondary);
    opacity:1;
}

.topbar ul{
    display:flex;
    align-items:center;
    gap:20px;
    margin:0;
    padding:0;
}

.topbar li{
    display:flex;
    align-items:center;
    gap:8px;
}

.topbar i{
    color: var(--secondary);
    font-size:15px;
}

.topbar .social-links{
    justify-content:flex-end;
}

.topbar .social-links a{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:var(--transition);
}

.topbar .social-links a:hover{
    background:rgba(255,255,255,.08);
}


/*==============================================================================
11. HEADER
==============================================================================*/

.header{
    position:absolute;
    top:44px;
    left:0;
    width:100%;
    z-index:999;
    transition:.4s ease;
}

.header.sticky{
    position:fixed;
    top:0;
    background:#ffffff;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    animation:headerSlide .5s ease;
}

@keyframes headerSlide{

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

    to{
        transform:translateY(0);
    }

}

.navbar{
    padding:18px 0;
    transition:.4s ease;
}

.header.sticky .navbar{
    padding:12px 0;
}

.navbar-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-mark{
    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    box-shadow:0 10px 24px rgba(11,61,145,.28);
    transition:var(--transition);
}

.header.sticky .brand-mark{
    width:44px;
    height:44px;
    font-size:20px;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.brand-name{
    font-family:'DM Sans',sans-serif;
    font-weight:800;
    font-size:22px;
    color:#ffffff;
    letter-spacing:.02em;
    transition:var(--transition);
}

.header.sticky .brand-name{
    color:var(--heading);
}

.brand-tagline{
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.7);
    transition:var(--transition);
}

.header.sticky .brand-tagline{
    color:var(--muted);
}

@media(max-width:991px){

.brand-name{
    color:var(--heading);
}

.brand-tagline{
    color:var(--muted);
}

}


/*==============================================================================
12. NAVIGATION
==============================================================================*/

.navbar-nav{
    gap:10px;
}

.navbar-nav .nav-item{
    position:relative;
}

.navbar-nav .nav-link{

    font-family:'DM Sans',sans-serif;

    font-size:16px;

    font-weight:700;

    color:#ffffff;

    padding:14px 18px;

    position:relative;

    transition:var(--transition);

}

.header.sticky .nav-link{
    color:var(--heading);
}

.navbar-nav .nav-link:hover{

    color:var(--secondary);

}

.navbar-nav .nav-link.active{

    color:var(--secondary);

}

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    bottom:8px;

    left:18px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

.navbar-nav .nav-link:hover::after,

.navbar-nav .nav-link.active::after{

    width:calc(100% - 36px);

}


/*==============================================================================
13. DROPDOWN MENU
==============================================================================*/

.dropdown-menu{

    border:none;

    border-radius:18px;

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

    padding:18px;

    min-width:260px;

    margin-top:18px;

}

.dropdown-item{

    padding:12px 16px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.dropdown-item:hover{

    background:#EDF6FF;

    color:var(--primary);

    padding-left:22px;

}


/*==============================================================================
14. NAVBAR TOGGLER
==============================================================================*/

.navbar-toggler{

    border:none;

    box-shadow:none!important;

    padding:8px;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler-icon{

    background-image:none;

    width:30px;

    height:24px;

    position:relative;

}

.navbar-toggler-icon::before,

.navbar-toggler-icon::after,

.navbar-toggler-icon{

    background:transparent;

}

.navbar-toggler-icon::before,

.navbar-toggler-icon::after{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.navbar-toggler-icon::before{

    top:6px;

}

.navbar-toggler-icon::after{

    bottom:6px;

}


/*==============================================================================
15. BUTTONS
==============================================================================*/

.btn{

    border-radius:50px;

    padding:14px 34px;

    font-weight:700;

    font-size:15px;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border:none;

    color:#ffffff;

    box-shadow:0 12px 30px rgba(11,61,145,.25);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(11,61,145,.35);

}

.btn-outline-primary{

    border:2px solid var(--primary);

    color:var(--primary);

    background:transparent;

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-4px);

}

.btn-light{

    background:#ffffff;

    color:var(--primary);

    font-weight:700;

}

.btn-light:hover{

    transform:translateY(-4px);

}


/*==============================================================================
16. MOBILE NAVIGATION
==============================================================================*/

@media(max-width:991px){

.header{

    top:0;

    background:#ffffff;

}

.navbar{

    background:#ffffff;

    border-radius:0;

    padding:15px 0;

}

.navbar-nav{

    margin-top:25px;

    gap:0;

}

.navbar-nav .nav-link{

    color:var(--heading);

    padding:14px 0;

}

.navbar-collapse{

    padding:20px;

    background:#ffffff;

    border-radius:20px;

    margin-top:15px;

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

}

.btn{

    width:100%;

    margin-top:20px;

}

.topbar{

    display:none;

}

}

/*==============================================================================
17. HERO SECTION
==============================================================================*/

.hero-section{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(135deg,#061B3A 0%,#0B3D91 45%,#0F6CBD 100%);
    padding:80px 0px;
    color:#fff;
}

/* Background Overlay */

.hero-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.08),
        transparent 45%);
    pointer-events:none;
}

/* Bottom Curve */

/* .hero-section::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:120px;
    background:#fff;
    border-radius:100% 100% 0 0;
} */


/*==============================================================================
18. HERO CONTENT
==============================================================================*/

.hero-section .container{
    position:relative;
    z-index:2;
}

.hero-content{
    position:relative;
}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:60px;

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

    border:1px solid rgba(255,255,255,.15);

    -webkit-backdrop-filter:blur(14px);

    backdrop-filter:blur(14px);

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#ffffff;

    margin-bottom:28px;

}

.hero-badge i{

    color:#7dd3fc;

}


/*==============================================================================
19. HERO HEADING
==============================================================================*/

.hero-section h1{

    color:#ffffff;

    font-size:48px;

    line-height:1.08;

    font-weight:800;

    margin-bottom:28px;

    letter-spacing:-2px;

}

.hero-section h1 span{

    color:#8BD3FF;

    display:block;

}

.hero-section p{

    color:rgba(255,255,255,.82);

    font-size:19px;

    line-height:1.9;

    /* max-width:640px; */

    margin-bottom:40px;

}


/*==============================================================================
20. HERO BUTTON GROUP
==============================================================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:60px;

}

.hero-buttons .btn{

    min-width:190px;

}

.hero-buttons .btn-primary{

    background:#ffffff;

    color:var(--primary);

    border:none;

}

.hero-buttons .btn-primary:hover{

    background:#F5F9FF;

    color:var(--primary-dark);

}

.hero-buttons .btn-outline-primary{

    border:2px solid rgba(255,255,255,.4);

    color:#ffffff;

    background:transparent;

}

.hero-buttons .btn-outline-primary:hover{

    background:#ffffff;

    color:var(--primary);

}


/*==============================================================================
21. TRUST INFO
==============================================================================*/

.hero-trust{

    display:flex;

    align-items:center;

    gap:40px;

    margin-top:20px;

}

.hero-trust-item{

    display:flex;

    align-items:center;

    gap:14px;

}

.hero-trust-icon{

    width:54px;

    height:54px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    color:#8BD3FF;

}

.hero-trust-item h6{

    color:#ffffff;

    margin-bottom:4px;

    font-size:16px;

}

.hero-trust-item span{

    color:rgba(255,255,255,.65);

    font-size:14px;

}


/*==============================================================================
22. HERO DECORATION
==============================================================================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(50px);

    pointer-events:none;

}

.hero-shape.one{

    width:280px;

    height:280px;

    background:rgba(0,174,239,.18);

    top:-80px;

    right:-120px;

}

.hero-shape.two{

    width:220px;

    height:220px;

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

    left:-100px;

    bottom:120px;

}


/*==============================================================================
23. HERO TEXT ANIMATION
==============================================================================*/

.hero-section h1,
.hero-section p,
.hero-buttons,
.hero-badge{

    animation:fadeUp .9s ease both;

}

.hero-section p{

    animation-delay:.2s;

}

.hero-buttons{

    animation-delay:.35s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================================================================
24. HERO IMAGE
==============================================================================*/

.hero-image{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

.hero-visual{

    position:relative;

    width:100%;

    max-width:460px;

    border-radius:28px;

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

    border:1px solid rgba(255,255,255,.16);

    -webkit-backdrop-filter:blur(16px);

    backdrop-filter:blur(16px);

    box-shadow:0 40px 80px rgba(0,0,0,.25);

    padding:48px 32px;

    transition:all .5s ease;

    animation:heroFloat 6s ease-in-out infinite;

}

.hero-image:hover .hero-visual{

    transform:scale(1.02);

}

.hero-visual-core{

    width:120px;

    height:120px;

    margin:0 auto 32px;

    border-radius:50%;

    background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.05));

    border:1px solid rgba(255,255,255,.3);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:56px;

    color:#ffffff;

}

.hero-visual-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.hero-visual-chip{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

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

    border:1px solid rgba(255,255,255,.14);

    border-radius:16px;

    padding:18px 12px;

    color:#ffffff;

    transition:var(--transition);

}

.hero-visual-chip:hover{

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

    transform:translateY(-4px);

}

.hero-visual-chip i{

    font-size:26px;

    color:#8BD3FF;

}

.hero-visual-chip span{

    font-size:13px;

    font-weight:600;

    text-align:center;

}

@keyframes heroFloat{

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

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

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

}


/*==============================================================================
25. FLOATING INFO CARDS
==============================================================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

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

    padding:18px 22px;

    border-radius:18px;

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

    min-width:230px;

    animation:floatingCard 5s ease-in-out infinite;

    z-index:10;

}

.floating-card i{

    width:50px;

    height:50px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.floating-card h6{

    margin:0;

    color:var(--heading);

    font-size:17px;

}

.floating-card small{

    display:block;

    color:var(--muted);

}

.floating-card.one{

    top:50px;

    left:-40px;

}

.floating-card.two{

    bottom:130px;

    right:-30px;

}

@keyframes floatingCard{

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

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

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

}


/*==============================================================================
26. EXPERIENCE BADGE
==============================================================================*/

.experience-card{

    position:absolute;

    bottom:20px;

    left:40px;

    background:#fff;

    border-radius:22px;

    padding:20px 25px;

    text-align:center;

    box-shadow:var(--shadow-lg);

    z-index:20;

}

.experience-card .stat-number{

    color:var(--primary);

    font-size:40px;

    margin-bottom:6px;

    font-weight:800;

    line-height:1;

}

.experience-card span{

    display:block;

    color:var(--muted);

    font-size:14px;

    font-weight:600;

}


/*==============================================================================
27. HERO STATISTICS
==============================================================================*/

.hero-counter{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

    margin-top:60px;

}

.hero-counter>div{

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

    -webkit-backdrop-filter:blur(12px);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:18px;

    padding:20px 24px;

    min-width:160px;

    transition:var(--transition);

}

.hero-counter>div:hover{

    background:#fff;

    transform:translateY(-8px);

}

.hero-counter>div:hover .stat-number{

    color:var(--primary);

}

.hero-counter>div:hover span{

    color:var(--muted);

}

.hero-counter .stat-number{

    color:#fff;

    font-size:40px;

    margin-bottom:8px;

    font-weight:800;

    line-height:1;

}

.hero-counter span{

    color:rgba(255,255,255,.75);

    font-size:14px;

    font-weight:600;

}


/*==============================================================================
28. SCROLL INDICATOR
==============================================================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    width:38px;

    height:62px;

    border:2px solid rgba(255,255,255,.5);

    border-radius:40px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:10px;

    z-index:10;

}

.scroll-down span{

    width:6px;

    height:12px;

    background:#fff;

    border-radius:20px;

    animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(20px);

    }

}


/*==============================================================================
29. HERO RESPONSIVE
==============================================================================*/

@media(max-width:1199px){

.hero-section h1{

    font-size:56px;

}

.hero-counter{

    gap:18px;

}

}

@media(max-width:991px){

.hero-section{

    padding:140px 0 80px;

    text-align:center;

}

.hero-section h1{

    font-size:46px;

}

.hero-section p{

    margin-left:auto;

    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-counter{

    justify-content:center;

}

.hero-image{

    margin-top:70px;

}

.floating-card{

    display:none;

}

.experience-card{

    left:50%;

    transform:translateX(-50%);

    bottom:-25px;

}

.scroll-down{

    display:none;

}

}

@media(max-width:767px){

.hero-section{

    min-height:auto;

    padding:120px 0 70px;

}

.hero-section h1{

    font-size:36px;

    line-height:1.2;

}

.hero-section p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.hero-counter{

    flex-direction:column;

    align-items:center;

}

.hero-counter>div{

    width:100%;

    max-width:320px;

}

.experience-card{

    position:relative;

    left:auto;

    bottom:auto;

    transform:none;

    margin-top:20px;

}

}

@media(max-width:575px){

.hero-section h1{

    font-size:30px;

}

.hero-badge{

    font-size:12px;

    padding:8px 16px;

}

.section-title{

    font-size:24px;

}

}


/*==============================================================================
30. LARGE SECTION SPACING
==============================================================================*/

@media(min-width:992px){

.py-lg-7{
    padding-top:140px;
    padding-bottom:140px;
}

}


/*==============================================================================
31. STAT NUMBERS
==============================================================================*/

.stat-number{
    font-family:'DM Sans',sans-serif;
    font-weight:800;
    line-height:1;
}


/*==============================================================================
32. BRAND CHIPS (Trusted Technologies / Client Logos)
==============================================================================*/

.brand-chip{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 18px;
    border-radius:14px;
    transition:var(--transition);
}

.brand-chip-mark{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'DM Sans',sans-serif;
    font-weight:800;
    font-size:16px;
}

.brand-chip-name{
    font-family:'DM Sans',sans-serif;
    font-weight:700;
    font-size:16px;
    color:var(--heading);
    white-space:nowrap;
}

.brand-chip.subtle{
    filter:grayscale(1);
    opacity:.65;
}

.brand-chip.subtle .brand-chip-mark{
    background:var(--border);
    color:var(--muted);
}

.brand-chip.subtle:hover{
    filter:grayscale(0);
    opacity:1;
}

.brand-chip.subtle:hover .brand-chip-mark{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
}

.brand-chip.featured{
    background:#ffffff;
    box-shadow:var(--shadow-sm);
    min-width:200px;
}

.brand-chip.featured .brand-chip-mark{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
}

.brand-chip.featured:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
}


/*==============================================================================
33. ABOUT / VISUAL PANELS (About, Engineering Expertise, Why Choose Us)
==============================================================================*/

.about-visual{
    position:relative;
    min-height:520px;
    border-radius:var(--radius-xl);
    background:linear-gradient(150deg,var(--primary) 0%,var(--primary-dark) 55%,#051225 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:40px;
    padding:50px 30px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.about-visual.compact{
    min-height:380px;
    gap:30px;
}

.about-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 15%,rgba(0,174,239,.35),transparent 45%),
               radial-gradient(circle at 85% 85%,rgba(255,255,255,.12),transparent 40%);
    pointer-events:none;
}

.about-visual-icon{
    position:relative;
    width:150px;
    height:150px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.22);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:68px;
    color:#ffffff;
}

.about-visual.compact .about-visual-icon{
    width:120px;
    height:120px;
    font-size:52px;
}

.about-visual-grid{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(4,1fr);
    pointer-events:none;
}

.about-visual-grid span{
    border-right:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.about-visual-stats{
    position:relative;
    display:flex;
    gap:18px;
    z-index:1;
}

.about-visual-stats>div{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    padding:16px 26px;
    text-align:center;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

.about-visual-stats .stat-number{
    color:#ffffff;
    font-size:28px;
}

.about-visual-stats span{
    display:block;
    color:rgba(255,255,255,.7);
    font-size:12px;
    font-weight:600;
    margin-top:4px;
}

.about-visual-badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    color:#ffffff;
    font-weight:700;
    font-size:14px;
    padding:12px 22px;
    border-radius:50px;
    z-index:1;
}

.about-visual-badge i{
    color:#8BD3FF;
}

.floating-info{
    position:absolute;
    top:30px;
    right:-20px;
    display:flex;
    align-items:center;
    gap:14px;
    background:#ffffff;
    padding:16px 20px;
    border-radius:16px;
    box-shadow:var(--shadow-lg);
    max-width:250px;
    z-index:20;
}

.floating-info i{
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:50%;
    background:#E8F4FF;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.floating-info h6{
    margin-bottom:2px;
    font-size:15px;
}

.floating-info small{
    color:var(--muted);
    font-size:12px;
}

@media(max-width:1199px){

.floating-info{
    right:0;
}

}

@media(max-width:767px){

.about-visual{
    min-height:400px;
}

.floating-info{
    position:relative;
    top:auto;
    right:auto;
    margin-top:20px;
    max-width:100%;
}

}


/*==============================================================================
34. FEATURE BOXES & MISSION BOX
==============================================================================*/

.feature-box{
    display:flex;
    align-items:flex-start;
    gap:16px;
    height:100%;
}

.feature-box i{
    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:14px;
    background:#E8F4FF;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.feature-box h6{
    margin-bottom:6px;
}

.feature-box p{
    margin-bottom:0;
    font-size:15px;
}

.mission-box{
    background:var(--section);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:32px;
}

.mission-box h3{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.mission-box h3 i{
    color:var(--secondary);
}

.mission-box p{
    margin-bottom:0;
    font-size:15px;
}

@media(max-width:767px){

.mission-box .col-md-6:first-child{
    margin-bottom:24px;
}

}


/*==============================================================================
35. COMPANY HIGHLIGHTS
==============================================================================*/

.company-highlights{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
}

.highlight-card{
    color:#ffffff;
}

.highlight-card i{
    font-size:34px;
    color:#8BD3FF;
    margin-bottom:14px;
    display:inline-block;
}

.highlight-card .stat-number{
    font-size:38px;
    color:#ffffff;
    margin-bottom:6px;
}

.highlight-card p{
    color:rgba(255,255,255,.75);
    margin-bottom:0;
    font-weight:600;
    font-size:14px;
}


/*==============================================================================
36. SERVICE CARDS
==============================================================================*/

.service-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:40px 32px;
    height:100%;
    box-shadow:var(--shadow-sm);
}

.service-card:hover{
    box-shadow:var(--shadow-lg);
    border-color:transparent;
}

.service-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:24px;
    transition:var(--transition);
}

.service-card:hover .service-icon{
    transform:rotate(-8deg) scale(1.05);
}

.service-card h3{
    margin-bottom:14px;
}

.service-card p{
    font-size:15px;
    margin-bottom:20px;
}

.service-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:24px;
}

.service-tags li{
    background:var(--section);
    color:var(--muted);
    font-size:12px;
    font-weight:600;
    padding:6px 14px;
    border-radius:50px;
}

.service-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    color:var(--primary);
    font-size:15px;
}

.service-link i{
    transition:var(--transition);
}

.service-link:hover i{
    transform:translateX(4px);
}

.service-check-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
    font-weight:600;
    color:var(--heading);
    font-size:15px;
}

.service-check-list i{
    color:var(--success);
    margin-top:3px;
}


/*==============================================================================
37. INDUSTRIES
==============================================================================*/

.industry-bg-circle{
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,174,239,.08),transparent 70%);
    top:-200px;
    right:-200px;
    pointer-events:none;
}

.industry-card{
    background:#ffffff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    height:100%;
    box-shadow:var(--shadow-sm);
}

.industry-cover{
    position:relative;
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:56px;
    color:#ffffff;
    overflow:hidden;
}

.industry-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.25),transparent 55%);
}

.industry-cover i{
    position:relative;
    z-index:1;
}

.industry-cover.cover-one{ background:linear-gradient(135deg,#0B3D91,#00AEEF); }
.industry-cover.cover-two{ background:linear-gradient(135deg,#072A67,#0B3D91); }
.industry-cover.cover-three{ background:linear-gradient(135deg,#00AEEF,#0B3D91); }
.industry-cover.cover-four{ background:linear-gradient(135deg,#F59E0B,#0B3D91); }
.industry-cover.cover-five{ background:linear-gradient(135deg,#0F172A,#0B3D91); }
.industry-cover.cover-six{ background:linear-gradient(135deg,#0B3D91,#072A67); }

.industry-content{
    padding:28px 26px 32px;
}

.industry-content h3{
    margin-bottom:10px;
}

.industry-content p{
    margin-bottom:0;
    font-size:15px;
}


/*==============================================================================
38. ENGINEERING PROCESS TIMELINE
==============================================================================*/

.process-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:24px;
}

.process-line{
    position:absolute;
    top:23px;
    left:5%;
    right:5%;
    height:3px;
    background:var(--border);
    z-index:0;
}

.process-line-fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
}

.process-step{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.process-node{
    width:46px;
    height:46px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'DM Sans',sans-serif;
    font-weight:800;
    font-size:15px;
    box-shadow:0 10px 24px rgba(11,61,145,.28);
    margin-bottom:20px;
}

.process-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:24px 18px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
    height:100%;
}

.process-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}

.process-card i{
    font-size:26px;
    color:var(--secondary);
    margin-bottom:12px;
    display:inline-block;
}

.process-card h3{
    margin-bottom:10px;
}

.process-card p{
    font-size:14px;
    margin-bottom:0;
    color:var(--muted);
}

@media(max-width:1199px){

.process-timeline{
    grid-template-columns:repeat(3,1fr);
    row-gap:60px;
}

.process-line{
    display:none;
}

}

@media(max-width:575px){

.process-timeline{
    grid-template-columns:1fr;
    row-gap:36px;
}

}


/*==============================================================================
39. PROJECTS
==============================================================================*/

.project-card{
    background:#ffffff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    height:100%;
    box-shadow:var(--shadow-sm);
    display:block;
}

.project-cover{
    position:relative;
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:64px;
    color:#ffffff;
    overflow:hidden;
}

.project-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.25),transparent 55%);
}

.project-cover i{
    position:relative;
    z-index:1;
    transition:transform .4s ease;
}

.project-card:hover .project-cover i{
    transform:scale(1.12) rotate(-4deg);
}

.project-cover.cover-one{ background:linear-gradient(135deg,#0B3D91,#00AEEF); }
.project-cover.cover-two{ background:linear-gradient(135deg,#072A67,#0B3D91); }
.project-cover.cover-three{ background:linear-gradient(135deg,#00AEEF,#0B3D91); }
.project-cover.cover-four{ background:linear-gradient(135deg,#F59E0B,#0B3D91); }
.project-cover.cover-five{ background:linear-gradient(135deg,#0F172A,#0B3D91); }
.project-cover.cover-six{ background:linear-gradient(135deg,#0B3D91,#072A67); }

.project-category{
    position:absolute;
    top:18px;
    left:18px;
    z-index:2;
    background:rgba(255,255,255,.92);
    color:var(--primary);
    font-size:12px;
    font-weight:700;
    padding:6px 16px;
    border-radius:50px;
}

.project-content{
    padding:28px 26px 32px;
}

.project-content h3{
    margin-bottom:10px;
}

.project-content p{
    font-size:15px;
    margin-bottom:18px;
}

.project-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
}

.project-meta span{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}

.project-meta i{
    color:var(--secondary);
}


/*==============================================================================
40. CLIENTS
==============================================================================*/

.counter-box{
    padding:20px;
}

.counter-box .stat-number{
    font-size:42px;
    color:var(--primary);
    margin-bottom:6px;
}

.counter-box p{
    margin-bottom:0;
    font-weight:600;
    color:var(--muted);
}

.partner-box{
    background:#ffffff;
    border-radius:var(--radius-lg);
    padding:48px 40px;
    box-shadow:var(--shadow-sm);
}

.client-slider{
    overflow:hidden;
}

.client-slider .swiper-slide{
    width:auto;
}


/*==============================================================================
41. TESTIMONIALS
==============================================================================*/

.testimonial-slider{
    padding-bottom:50px;
    overflow:hidden;
}

.testimonial-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:36px 32px;
    height:100%;
    box-shadow:var(--shadow-sm);
}

.testimonial-card.featured{
    background:linear-gradient(150deg,var(--primary),var(--primary-dark));
    border-color:transparent;
    color:#ffffff;
}

.testimonial-card.featured blockquote,
.testimonial-card.featured .testimonial-author h6,
.testimonial-card.featured .testimonial-author span{
    color:#ffffff;
}

.testimonial-card.featured .testimonial-author span{
    color:rgba(255,255,255,.7);
}

.testimonial-rating{
    color:var(--accent);
    margin-bottom:18px;
    font-size:14px;
}

.testimonial-card blockquote{
    font-size:16px;
    line-height:1.8;
    margin-bottom:26px;
    color:var(--text);
}

.testimonial-author{
    display:flex;
    align-items:center;
    gap:14px;
}

.author-avatar{
    width:48px;
    height:48px;
    flex-shrink:0;
    border-radius:50%;
    background:#E8F4FF;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.testimonial-card.featured .author-avatar{
    background:rgba(255,255,255,.15);
    color:#ffffff;
}

.testimonial-author h6{
    margin-bottom:2px;
}

.testimonial-author span{
    font-size:13px;
    color:var(--muted);
}

.testimonial-slider .swiper-pagination-bullet{
    background:var(--border);
    opacity:1;
    width:10px;
    height:10px;
}

.testimonial-slider .swiper-pagination-bullet-active{
    background:var(--primary);
    width:26px;
    border-radius:6px;
}

.testimonial-cta{
    background:var(--section);
    border:1px solid var(--border);
    padding:40px;
}

.testimonial-cta h3{
    margin-bottom:10px;
}


/*==============================================================================
42. FAQ ACCORDION
==============================================================================*/

.faq-section .accordion-item{
    border:1px solid var(--border);
    border-radius:var(--radius-md)!important;
    overflow:hidden;
    margin-bottom:16px;
    background:#ffffff;
}

.faq-section .accordion-button{
    font-family:'DM Sans',sans-serif;
    font-weight:700;
    font-size:17px;
    color:var(--heading);
    padding:22px 26px;
    background:#ffffff;
    box-shadow:none;
}

.faq-section .accordion-button:not(.collapsed){
    color:var(--primary);
    background:#F5F9FF;
}

.faq-section .accordion-button:focus{
    box-shadow:none;
    border-color:var(--border);
}

.faq-section .accordion-button::after{
    width:1.4rem;
    height:1.4rem;
    background-size:1.4rem;
}

.faq-section .accordion-body{
    padding:6px 26px 26px;
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
}


/*==============================================================================
43. FINAL CTA BANNER
==============================================================================*/

.cta-section{
    padding-top:0;
    padding-bottom:100px;
}

.cta-box{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    padding:60px;
    position:relative;
    overflow:hidden;
}

.cta-box::before{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    top:-140px;
    right:-100px;
}

.cta-box h2{
    font-size:38px;
}

@media(max-width:767px){

.cta-box{
    padding:40px 28px;
    text-align:center;
}

.cta-box h2{
    font-size:28px;
}

}


/*==============================================================================
44. FOOTER
==============================================================================*/

.footer{
    background:var(--dark);
    color:rgba(255,255,255,.65);
}

.footer-brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.footer-brand .brand-name{
    color:#ffffff;
}

.footer-brand .brand-tagline{
    color:rgba(255,255,255,.6);
}

.footer p{
    color:rgba(255,255,255,.55);
    font-size:15px;
}

.footer h5{
    color:#ffffff;
    margin-bottom:22px;
    font-size:18px;
}

.footer-links li{
    margin-bottom:12px;
}

.footer-links a{
    color:rgba(255,255,255,.6);
    font-size:15px;
}

.footer-links a:hover{
    color:var(--secondary);
    padding-left:4px;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px;
    font-size:15px;
    color:rgba(255,255,255,.65);
}

.footer-contact a{
    color:rgba(255,255,255,.65);
}

.footer-contact a:hover{
    color:var(--secondary);
}

.footer-contact i{
    color:var(--secondary);
    margin-top:4px;
}

.footer-social{
    display:flex;
    gap:12px;
}

.footer-social a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.footer-social a:hover{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    transform:translateY(-4px);
}

.footer hr{
    border-color:rgba(255,255,255,.1);
}

.footer .col-md-6 a{
    color:rgba(255,255,255,.6);
    font-size:14px;
}

.footer .col-md-6 a:hover{
    color:var(--secondary);
}


/*==============================================================================
45. FLOATING ACTION BUTTONS
==============================================================================*/

.floating-whatsapp,
.floating-call{
    position:fixed;
    bottom:30px;
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size:26px;
    z-index:998;
    box-shadow:var(--shadow-lg);
    transition:var(--transition);
}

.floating-whatsapp{
    right:30px;
    background:#25D366;
}

.floating-call{
    right:100px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
}

.floating-whatsapp:hover,
.floating-call:hover{
    transform:translateY(-6px);
    color:#ffffff;
}

@keyframes pulseRing{

    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.5);
    }

    100%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

}

.floating-whatsapp::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    animation:pulseRing 2.2s infinite;
}

@media(max-width:575px){

.floating-whatsapp,
.floating-call{
    width:50px;
    height:50px;
    font-size:22px;
    bottom:20px;
}

.floating-whatsapp{
    right:20px;
}

.floating-call{
    right:82px;
}

}


/*==============================================================================
46. SCROLL TO TOP
==============================================================================*/

.scroll-top{
    position:fixed;
    bottom:30px;
    left:30px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--primary);
    color:#ffffff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:var(--transition);
    z-index:998;
    box-shadow:var(--shadow-md);
}

.scroll-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.scroll-top:hover{
    background:var(--primary-dark);
}