/*==================================================
GOOGLE FONT
==================================================*/

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

/*==================================================
ROOT VARIABLES
==================================================*/

:root{

    --primary:#0B4EA2;
    --primary-dark:#083A7B;
    --secondary:#1E88E5;
    --accent:#E53935;

    --dark:#07162E;
    --text:#5C6B82;

    --white:#ffffff;
    --light:#F6F9FD;

    --glass:rgba(255,255,255,.10);
    --glass-border:rgba(255,255,255,.18);

    --shadow-sm:0 8px 20px rgba(0,0,0,.08);
    --shadow-md:0 18px 45px rgba(0,0,0,.12);
    --shadow-lg:0 30px 80px rgba(0,0,0,.18);

    --radius-sm:16px;
    --radius:24px;
    --radius-lg:34px;

    --transition:.4s ease;

}

/*==================================================
RESET
==================================================*/

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

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

}

html{

    scroll-behavior:smooth;
    font-size:16px;

}

body{

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

    background:var(--white);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    display:block;

    width:100%;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    outline:none;

    font-family:inherit;

}

/*==================================================
LAYOUT
==================================================*/

.container{

    width:min(92%,1320px);

    margin:auto;

}

section{

    position:relative;

    padding:100px 0;

}

/*==================================================
COMMON TITLE
==================================================*/

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:60px;

    background:rgba(11,78,162,.08);

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.section-title{

    text-align:center;

    max-width:900px;

    margin:0 auto 60px;

}

.section-title h2{

    font-size:3rem;

    line-height:1.15;

    font-weight:800;

    color:var(--dark);

    margin-bottom:18px;

}

.section-title h2 span{
    display: inline;
    color: var(--primary);
}

.section-title p{

    max-width:760px;

    margin:auto;

    font-size:1.05rem;

    color:var(--text);

}

/*==================================================
TYPOGRAPHY
==================================================*/

h1,h2,h3,h4,h5{

    color:var(--dark);

    font-weight:700;

}

p{

    color:var(--text);

}
/*==================================================
COMMON BUTTONS
==================================================*/

.hero-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:16px 34px;

    border-radius:60px;

    background:linear-gradient(135deg,#0B4EA2,#1677FF);

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:.4s ease;

    box-shadow:0 18px 45px rgba(11,78,162,.25);

}

.hero-btn:hover{

    transform:translateY(-6px);

    box-shadow:0 28px 60px rgba(11,78,162,.35);

}

.hero-btn i{

    transition:.35s;

}

.hero-btn:hover i{

    transform:translateX(6px);

}

.hero-btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:60px;

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

    background:transparent;

    color:#fff;

    backdrop-filter:blur(20px);

    transition:.4s ease;

}

.hero-btn-outline:hover{

    background:#fff;

    color:#0B4EA2;

}

/*==================================================
COMMON GLASS
==================================================*/

.glass-card{

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

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

    backdrop-filter:blur(20px);

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

    border-radius:28px;

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

}

/*==================================================
COMMON IMAGE
==================================================*/

.image-box{

    position:relative;

    overflow:hidden;

    border-radius:26px;

}

.image-box img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s ease;

}

.image-box:hover img{

    transform:scale(1.08);

}

/*==================================================
FLOATING CARD
==================================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 22px;

    background:#fff;

    border-radius:18px;

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

    animation:float 4s ease-in-out infinite;

}

.floating-card i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#0B4EA2,#1877ff);

    color:#fff;

    font-size:24px;

}

.floating-card h5{

    font-size:1rem;

    color:#07162E;

    margin-bottom:4px;

}

.floating-card p{

    font-size:.82rem;

    color:#66758B;

    margin:0;

}

/*==================================================
SMALL INFO CARD
==================================================*/

.info-card{

    background:#fff;

    padding:20px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.info-card:hover{

    transform:translateY(-8px);

}

.info-card h3{

    color:#E53935;

    font-size:2rem;

    font-weight:800;

    margin-bottom:8px;

}

.info-card span{

    color:#66758B;

    font-size:.85rem;

}

/*==================================================
COMMON ANIMATIONS
==================================================*/

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes zoomImage{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.05);

    }

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}
/*======================================
PREMIUM HERO SECTION
======================================*/

.infra-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:110px 0 60px;

    background:#07162E;

}

.infra-hero-bg{

    position:absolute;

    inset:0;

    z-index:-3;

}

.infra-hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

}

.infra-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(90deg,
    rgba(5,18,42,.92) 0%,
    rgba(5,18,42,.75) 45%,
    rgba(5,18,42,.30) 100%);

    z-index:-2;

}

/* Blur Circles */

.blur-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    z-index:-1;

}

.blur-one{

    width:320px;

    height:320px;

    background:#0057ff55;

    top:60px;

    left:-100px;

}

.blur-two{

    width:300px;

    height:300px;

    background:#00b7ff40;

    right:-80px;

    bottom:20px;

}

/* Hero Grid */

.infra-hero-content{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

/*======================================
LEFT CONTENT
======================================*/

.hero-left{

    max-width:650px;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:60px;

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

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

    backdrop-filter:blur(18px);

    color:#fff;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.hero-tag i{

    color:#ff4d4d;

}

.hero-left h1{

    margin:2px 0;

    font-size:4rem;

    line-height:1.08;

    font-weight:800;

    color:#fff;

}

.hero-left h1 span{

    display:block;

    color:#74B6FF;

}

.hero-left p{

    color:#d8e2ef;

    font-size:1.05rem;

    line-height:1.9;
    margin-top:20px;

    margin-bottom:30px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:15px;

}

.hero-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:22px;

}

.hero-highlights div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:.95rem;

    font-weight:500;

}

.hero-highlights i{

    color:#36d27d;

}
/*======================================
RIGHT HERO IMAGE
======================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:flex-end;

}

.hero-glass-card{

    position:relative;

    width:100%;
    max-width:500px;

    border-radius:30px;

    overflow:hidden;

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

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

    backdrop-filter:blur(20px);

    box-shadow:0 30px 70px rgba(0,0,0,.30);

    transition:.45s ease;

}

.hero-glass-card:hover{

    transform:translateY(-10px);

}

.hero-glass-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.6s;

}

.hero-glass-card:hover img{

    transform:scale(1.08);

}

.glass-content{

    padding:22px 26px;

}

.glass-content h3{

    color:#fff;

    font-size:1.55rem;

    margin-bottom:10px;

}

.glass-content p{

    color:#dce5ef;

    font-size:.95rem;

    line-height:1.7;

}

/*======================================
FLOATING STATS
======================================*/

.hero-stat{

    position:absolute;

    width:110px;

    height:110px;

    border-radius:20px;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

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

    animation:float 4s ease-in-out infinite;

    z-index:5;

}

.hero-stat h3{

    font-size:1.9rem;

    color:#E53935;

    line-height:1;

    margin-bottom:8px;

    font-weight:800;

}

.hero-stat span{

    font-size:.73rem;

    color:#66758B;

    line-height:1.35;

    font-weight:600;

}

/* Card Positions */

.stat-one{

    top:20px;

    right:-35px;

}

.stat-two{

    left:-35px;

    bottom:85px;

}
.stat-three{

    right:-65px;

    bottom:-40px;

}
/*======================================
INTRO
======================================*/

.infra-intro{

    background:#fff;

    padding:90px 0;

}

.intro-text{

    max-width:920px;

    margin:auto;

    text-align:center;

    font-size:1.05rem;

    line-height:1.9;

}

/*======================================
LARGE LAPTOP
======================================*/

@media (max-width:1400px){

.hero-left h1{

font-size:3.5rem;

}

.hero-glass-card{

max-width:460px;

}

}

/*======================================
LAPTOP
======================================*/

@media (max-width:1200px){

.infra-hero-content{

grid-template-columns:1fr;

gap:60px;

}

.hero-left{

max-width:100%;

}

.hero-right{

justify-content:center;

}

.hero-glass-card{

max-width:650px;

}

.stat-one{

right:20px;

}

.stat-two{

left:20px;

}

.stat-three{

right:20px;

}

}
/*======================================
ULTRA MODERN WAREHOUSE
======================================*/

.infra-feature{

    position:relative;

    padding:50px 0;

    background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);

    overflow:hidden;

}

.infra-card{

    position:relative;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:70px;

    padding:55px;

    border-radius:32px;

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

    backdrop-filter:blur(24px);

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

    box-shadow:
    0 25px 80px rgba(9,32,71,.12);

    transition:.45s ease;

}

.infra-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 40px 90px rgba(9,32,71,.18);

}

/*======================================
CONTENT
======================================*/

.infra-content{

    position:relative;

    z-index:2;

}

.infra-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(11,78,162,.08);

    color:#0B4EA2;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.infra-tag i{

    color:#E53935;

}

.infra-content h2{

    font-size:3rem;

    line-height:1.15;

    color:#07162E;

    margin-bottom:25px;

    font-weight:800;

}

.infra-content h2 span{

    display:block;

    color:#0B4EA2;

}

.infra-content p{

    font-size:1.03rem;

    line-height:1.9;

    color:#5c6b82;

    margin-bottom:35px;

}

/*======================================
FEATURE GRID
======================================*/

.infra-features{

    display:grid;

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

    gap:18px;

}

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:18px;

    background:#fff;

    border-radius:18px;

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

    transition:.35s;

}

.feature-item:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(11,78,162,.10);

}

.feature-item i{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0B4EA2,#1877FF);

    color:#fff;

    font-size:14px;

    flex-shrink:0;

}

.feature-item span{

    font-size:.95rem;

    font-weight:500;

    color:#30435C;

    line-height:1.6;

}
/*======================================
IMAGE SECTION
======================================*/

.infra-image{

    position:relative;

}

.infra-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    border-radius:30px;

    transition:.6s ease;

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}

.infra-card:hover .infra-image img{

    transform:scale(1.05);

}

/*======================================
FLOATING GLASS INFO
======================================*/

.floating-card{

    position:absolute;

    left:-35px;

    bottom:35px;

    display:flex;

    align-items:center;

    gap:15px;

    width:290px;

    padding:18px 22px;

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

    backdrop-filter:blur(18px);

    border-radius:20px;

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

}

.floating-card i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#0B4EA2,#1877FF);

    color:#fff;

    font-size:24px;

}

.floating-card h5{

    font-size:1rem;

    color:#07162E;

    margin-bottom:4px;

    font-weight:700;

}

.floating-card p{

    margin:0;

    font-size:.82rem;

    color:#66758B;

    line-height:1.5;

}

/*======================================
TOP BADGE
======================================*/

.experience-badge{

    position:absolute;

    top:35px;

    right:-20px;

    width:150px;

    height:150px;

    border-radius:50%;

    background:linear-gradient(135deg,#0B4EA2,#1677FF);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#fff;

    text-align:center;

    box-shadow:0 20px 55px rgba(11,78,162,.35);

    animation:float 4s ease-in-out infinite;

}

.experience-badge h3{

    font-size:2.2rem;

    font-weight:800;

    margin-bottom:6px;

    color:#fff;

}

.experience-badge span{

    font-size:.82rem;

    line-height:1.4;

    padding:0 16px;

}

/*======================================
BOTTOM MINI STATS
======================================*/

.infra-bottom{

    display:flex;

    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;

}

.mini-box{

    min-width:150px;

    padding:18px 22px;

    background:#fff;

    border-radius:18px;

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

    transition:.35s;

}

.mini-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(11,78,162,.12);

}

.mini-box h4{

    color:#E53935;

    font-size:1.6rem;

    font-weight:800;

    margin-bottom:6px;

}

.mini-box span{

    color:#66758B;

    font-size:.85rem;

}

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

@media (max-width:1200px){

    .infra-card{

        grid-template-columns:1fr;

        gap:45px;

    }

    .infra-image{

        order:-1;

    }

    .infra-image img{

        height:450px;

    }

    .floating-card{

        left:20px;

        bottom:20px;

    }

    .experience-badge{

        right:20px;

    }

}

@media (max-width:768px){

    .infra-card{

        padding:30px;

    }

    .infra-content h2{

        font-size:2.2rem;

    }

    .infra-features{

        grid-template-columns:1fr;

    }

    .infra-image img{

        height:320px;

    }

    .floating-card{

        position:relative;

        left:0;

        bottom:0;

        width:100%;

        margin-top:20px;

    }

    .experience-badge{

        width:110px;

        height:110px;

        right:15px;

        top:15px;

    }

    .experience-badge h3{

        font-size:1.6rem;

    }

    .mini-box{

        width:100%;

    }

}
/*======================================
STORAGE & RACKING
======================================*/

.infra-card.reverse{

    grid-template-columns:.95fr 1.05fr;

}

.infra-card.reverse .infra-image{

    order:1;

}

.infra-card.reverse .infra-content{

    order:2;

}

/*======================================
SECTION BACKGROUND
======================================*/

.infra-feature:nth-child(even){

    background:#ffffff;

}

.infra-feature:nth-child(odd){

    background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);

}

/*======================================
IMAGE
======================================*/

.infra-card.reverse .infra-image{

    position:relative;

}

.infra-card.reverse .infra-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    border-radius:30px;

    transition:.6s;

    box-shadow:0 30px 70px rgba(0,0,0,.16);

}

.infra-card.reverse:hover .infra-image img{

    transform:scale(1.05);

}

/*======================================
FLOATING CARD
======================================*/

.infra-card.reverse .floating-card{

    left:auto;

    right:-35px;

    bottom:35px;

    width:300px;

}

/*======================================
EXPERIENCE BADGE
======================================*/

.infra-card.reverse .experience-badge{

    left:-20px;

    right:auto;

}

/*======================================
CONTENT
======================================*/

.infra-card.reverse .infra-content h2{

    color:#07162E;

}

.infra-card.reverse .infra-content h2 span{

    color:#0B4EA2;

}

/*======================================
FEATURES
======================================*/

.infra-card.reverse .feature-item{

    border:1px solid #edf2f8;

}

.infra-card.reverse .feature-item:hover{

    border-color:#0B4EA2;

}

/*======================================
BOTTOM STATS
======================================*/

.infra-card.reverse .mini-box{

    background:#fff;

}

.infra-card.reverse .mini-box h4{

    color:#E53935;

}
/*======================================
AMBIENT STORAGE + MHE
======================================*/

.infra-feature.blue{

    background:linear-gradient(180deg,#f5f9ff 0%,#ffffff 100%);

}

/*======================================
IMAGE
======================================*/

.infra-feature.blue .infra-image{

    position:relative;

}

.infra-feature.blue .infra-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    border-radius:30px;

    transition:.6s;

    box-shadow:0 30px 70px rgba(0,0,0,.15);

}

.infra-feature.blue:hover .infra-image img{

    transform:scale(1.05);

}

/*======================================
FLOATING CARD
======================================*/

.infra-feature.blue .floating-card{

    left:-35px;

    bottom:35px;

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

    backdrop-filter:blur(18px);

    width:300px;

}

/*======================================
TEMPERATURE BADGE
======================================*/

.temp-badge{

    position:absolute;

    right:-20px;

    top:25px;

    width:155px;

    height:155px;

    border-radius:50%;

    background:linear-gradient(135deg,#0B4EA2,#2D8CFF);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    text-align:center;

    box-shadow:0 25px 60px rgba(11,78,162,.35);

}

.temp-badge h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:6px;

}

.temp-badge span{

    font-size:.82rem;

    line-height:1.4;

    padding:0 12px;

}

/*======================================
MHE CARD
======================================*/

.mhe-card{

    position:relative;

}

.mhe-card .infra-image img{

    height:620px;

}

.mhe-card .floating-card{

    right:-35px;

    left:auto;

}

.mhe-card .experience-badge{

    left:-20px;

    right:auto;

}

/*======================================
CTA
======================================*/

.infra-cta{

    background:linear-gradient(135deg,#07162E,#0B4EA2);

    padding:110px 0;

}

.cta-box{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:center;

}

.cta-content h2{

    color:#fff;

    font-size:3rem;

    line-height:1.15;

    margin:20px 0;

}

.cta-content h2 span{

    color:#7CC0FF;

}

.cta-content p{

    color:#d8e2ef;

    margin-bottom:35px;

    line-height:1.9;

}

.cta-points{

    display:grid;

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

    gap:16px;

    margin-bottom:35px;

}

.cta-points div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

}

.cta-points i{

    color:#35d07f;

}

.cta-image img{

    border-radius:30px;

    box-shadow:0 30px 70px rgba(0,0,0,.25);

}

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

@media(max-width:1200px){

    .cta-box{

        grid-template-columns:1fr;

    }

    .temp-badge{

        right:20px;

    }

}

@media(max-width:768px){

    .infra-card,
    .infra-card.reverse{

        grid-template-columns:1fr;

        padding:30px;

    }

    .infra-card.reverse .infra-image,
    .infra-card .infra-image{

        order:-1;

    }

    .infra-card.reverse .infra-content{

        order:2;

    }

    .infra-image img{

        height:320px !important;

    }

    .floating-card{

        position:relative;

        width:100% !important;

        left:0 !important;

        right:0 !important;

        bottom:0;

        margin-top:20px;

    }

    .experience-badge,
    .temp-badge{

        width:110px;

        height:110px;

        top:15px;

        right:15px;

        left:auto;

    }

    .experience-badge h3,
    .temp-badge h3{

        font-size:1.5rem;

    }

    .cta-content h2{

        font-size:2.2rem;

    }

    .cta-points{

        grid-template-columns:1fr;

    }

}
/*======================================
PREMIUM HOVER EFFECTS
======================================*/

.hero-btn,
.hero-btn-outline,
.feature-item,
.mini-box,
.hero-glass-card,
.infra-card,
.floating-card,
.cta-image img{

    transition:all .4s ease;

}

.hero-glass-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 80px rgba(0,0,0,.28);

}

.feature-item:hover{

    transform:translateY(-8px);

}

.mini-box:hover{

    transform:translateY(-8px);

}

.cta-image img:hover{

    transform:scale(1.04);

}

/*======================================
SCROLL ANIMATION
======================================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/*======================================
CUSTOM SCROLLBAR
======================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f8;

}

::-webkit-scrollbar-thumb{

    background:#0B4EA2;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#083A7B;

}

/*======================================
LARGE DESKTOP
======================================*/

@media(max-width:1400px){

.hero-left h1{

font-size:3.6rem;

}

.section-title h2{

font-size:2.8rem;

}

.infra-card{

gap:55px;

}

}

/*======================================
LAPTOP
======================================*/

@media(max-width:1200px){

.infra-hero{

padding:100px 0 60px;

}

.infra-hero-content{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.hero-left{

max-width:100%;

}

.hero-buttons{

justify-content:center;

}

.hero-highlights{

justify-content:center;

}

.hero-right{

justify-content:center;

}

.hero-glass-card{

max-width:650px;

}

.stat-one{

right:20px;

}

.stat-two{

left:20px;

}

.stat-three{

right:20px;

}

.infra-card,

.infra-card.reverse{

grid-template-columns:1fr;

padding:40px;

gap:40px;

}

.infra-card .infra-image,

.infra-card.reverse .infra-image{

order:-1;

}

.cta-box{

grid-template-columns:1fr;

gap:50px;

}

}

/*======================================
TABLET
======================================*/

@media(max-width:992px){

.hero-left h1{

font-size:3rem;

}

.section-title h2{

font-size:2.5rem;

}

.infra-content h2{

font-size:2.3rem;

}

.hero-glass-card img{

height:320px;

}

.infra-image img{

height:420px !important;

}

.hero-stat{

width:95px;

height:95px;

}

.hero-stat h3{

font-size:1.5rem;

}

.hero-stat span{

font-size:.7rem;

}

}

/*======================================
MOBILE
======================================*/

@media(max-width:768px){

section{

padding:70px 0;

}

.hero-left h1{

font-size:2.4rem;

}

.hero-left p{

font-size:.95rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-btn,

.hero-btn-outline{

width:100%;

justify-content:center;

}

.hero-highlights{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

.hero-glass-card{

max-width:100%;

}

.hero-glass-card img{

height:260px;

}

.infra-card{

padding:25px;

}

.infra-content h2{

font-size:2rem;

}

.infra-features{

grid-template-columns:1fr;

}

.infra-image img{

height:300px !important;

}

.floating-card{

position:relative;

left:0 !important;

right:0 !important;

bottom:0;

margin-top:20px;

width:100%;

}

.experience-badge,

.temp-badge{

display:none;

}

.infra-bottom{

flex-direction:column;

}

.mini-box{

width:100%;

}

.cta-content h2{

font-size:2rem;

}

.cta-points{

grid-template-columns:1fr;

}

}

/*======================================
SMALL MOBILE
======================================*/

@media(max-width:480px){

.hero-left h1{

font-size:2rem;

}

.section-title h2{

font-size:2rem;

}

.infra-content h2{

font-size:1.8rem;

}

.hero-tag{

font-size:.7rem;

padding:10px 18px;

}

.hero-btn{

padding:14px 24px;

font-size:14px;

}

}

/*======================================
PERFORMANCE
======================================*/

img{

will-change:transform;

}

.hero-glass-card,

.infra-card{

will-change:transform;

}

html{

scroll-behavior:smooth;

}