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


body{
font-family:'Inter',sans-serif;
background:#ffffff;
color:#0b1f44;
overflow-x:hidden;
}

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

a{
text-decoration:none;
}

.container{
width:90%;
max-width:1400px;
margin:auto;
}
/* HERO */

.hero{
padding:22px 0 10px;
background:#ffffff;
position:relative;

overflow:hidden;
}
.hero::before{

content:"";

position:absolute;

left:-350px;

bottom:-250px;

width:900px;

height:900px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(37,99,255,.08),
transparent 70%);

pointer-events:none;

}

/* =====================================================
   SITE HEADER — STICKY NAVBAR
===================================================== */

.site-header{
    position:sticky;
    top:0;
    z-index:9999;

    width:100%;

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

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

    border-bottom:1px solid rgba(226,232,240,.8);

    box-shadow:0 4px 20px rgba(15,23,42,.05);
}

/* Header ke andar container */
.site-header .container{
    width:90%;
    max-width:1400px;
    margin:0 auto;
}

/* Existing navbar spacing */
.site-header .navbar{
    margin-bottom:0;
    padding:8px 0;
}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

margin-bottom:25px;

}


.logo{

display:flex;

align-items:center;

gap:6px;

font-size:18px;

font-weight:700;

color:#0B1F44;

}

.logo img{

width:42px;

height:auto;

}

.logo span{

font-size:20px;

font-weight:600;

}


.nav-links{

display:flex;

align-items:center;

gap:42px;

list-style:none;

}


.nav-links a{

position:relative;

font-size:17px;

font-weight:600;

color:#0B1F44;

transition:.35s;

}
.nav-links a:hover{

color:#2563EB;

}

.nav-links a.active{

color:#2563EB;

}

.nav-links a.active::after{

content:"";

position:absolute;

left:0;

bottom:-18px;

width:100%;

height:3px;

background:#2563EB;

border-radius:20px;

}

.nav-arrow{

font-size:12px;

margin-left:6px;

}

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

.has-dropdown{
    position:relative;
}

.dropdown-menu{

    position:absolute;

    top:calc(100% + 18px);

    left:0;

    width:270px;

    padding:12px;

    margin:0;

    list-style:none;

    background:#ffffff;

    border:1px solid #e7edf5;

    border-radius:16px;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.28s ease;

    z-index:999;
}

.has-dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    margin:0;
}

.dropdown-menu a{

    display:block;

    padding:12px 14px;

    border-radius:10px;

    font-size:15px;

    font-weight:500;

    color:#0B1F44;

    text-decoration:none;

    transition:.25s;
}

.dropdown-menu a:hover{

    background:#F5F8FF;

    color:#2563EB;

}



.nav-btn{

display:flex;

align-items:center;

gap:12px;

padding:18px 32px;

background:

linear-gradient(

135deg,

#2563EB,

#1D4ED8);

border-radius:14px;

color:#fff;

font-size:16px;

font-weight:700;

box-shadow:

0 15px 35px

rgba(37,99,235,.25);

transition:.35s;

}
.nav-btn:hover{

transform:

translateY(-4px);

box-shadow:

0 20px 40px

rgba(37,99,235,.35);

}

.nav-btn span{

font-size:18px;

transition:.35s;

}

.nav-btn:hover span{

transform:translateX(4px);

}


.hero-content{
display:grid;
grid-template-columns:38% 62%;
gap:0;
}


.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:8px 10px;

background:#EEF4FF;

border-radius:50px;

margin-bottom:28px;

}

.hero-badge img{

width:28px;
height:28px;
}

.hero-badge span{

font-size:15px;

font-weight:600;

color:#2563EB;

}


.hero-left h1{

font-size:48px;

line-height:1.40;

font-weight:700;

color:#0b1f44;

margin-bottom:24px;

max-width:520px;

}


.hero-left h1 span{

color:#2563ff;

}


.hero-left p{

font-size:16px;

line-height:1.9;

color:#5a6785;

max-width:450px;

margin-bottom:35px;

}


.hero-buttons{

display:flex;

gap:20px;

}


.btn-primary{

padding:16px 30px;

background:#2563ff;

color:white;

border-radius:14px;

font-weight:600;

font-size:17px;

}


.btn-secondary{

padding:16px 30px;

border:2px solid #2563ff;

border-radius:14px;

color:white;
font-weight:600;

font-size:17px;


}

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    height:56px;

}

.btn-primary{

    background:#2563ff;

    color:#fff;

    box-shadow:0 15px 30px rgba(37,99,255,.25);

}

.btn-primary:hover{

   transform:

translateY(-4px);

box-shadow:

0 20px 40px

rgba(37,99,235,.35);
transition:.35s;

}

.btn-secondary{

    background:#2563ff;

    color:#fff;

    box-shadow:0 15px 30px rgba(37,99,255,.25);

}

.btn-secondary:hover{

   transform:

translateY(-4px);

box-shadow:

0 20px 40px

rgba(37,99,235,.35);
transition:.35s;


}

.hero-right{
height:620px;
position:relative;
top:-18px;
overflow:visible;
}

.dashboard{
display:flex;
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 40px 90px rgba(18,38,95,.15);
height:620px;
width:100%;
border:1px solid#EDF2F7;
}
.dashboard-glow{

    position:absolute;

    width:620px;

    height:620px;

    right:-80px;

    top:20px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(37,99,255,.25) 0%,
    rgba(37,99,255,.12) 35%,
    rgba(37,99,255,0) 72%);

    filter:blur(70px);

    animation:glowMove 7s ease-in-out infinite;

    z-index:0;

    pointer-events:none;

}
.dashboard{

    position:relative;

    z-index:2;

    animation:dashboardPop 1.2s ease forwards;

    transform-origin:center;

}


.dashboard-sidebar{
width:210px;
background:#081735;
color:#fff;
padding:16px;
}

.dashboard-sidebar h3{
font-size:16px;
line-height:1.4;
margin-bottom:24px;
}

.dashboard-sidebar ul{
list-style:none;
}

.dashboard-sidebar li{
display:flex;
align-items:center;
gap:12px;
padding:6px 10px;
margin-bottom:8px;
border-radius:12px;
font-size:12px;
cursor:pointer;
transition:.3s;
}

.dashboard-sidebar li img{
width:30px;
height:30px;
object-fit:contain;
flex-shrink:0;
}

.dashboard-sidebar li:hover{
background:rgba(255,255,255,.08);
}

.dashboard-sidebar .active{
background:linear-gradient(90deg,#2563EB,#3B82F6);

}

.dashboard-content{
flex:1;
padding:9px;
width:100%;
background:#FCFDFF;
}
.dashboard-img{

    width: 100%;

    height: 100%;
    inset:0;
    display:block;

    object-fit:fill; 
     object-position:center;
     


}

.dashboard-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:20px;
}

.dashboard-header h2{
font-size:20px;
font-weight:700;
}

.dashboard-header span{
font-size:14px;
color:#6b7280;
}

.header-left{
display:flex;
flex-direction:column;
gap:2px;
min-width:300px;
}

.header-left h2{
font-size:18px;
font-weight:700;
line-height:1.2;
margin:0;
}

.header-left p{
font-size:12px;
color:#94a3b8;
margin:0;
line-height:1.4;
white-space:nowrap;
}

.bell-icon{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:10px;
font-size:18px;
cursor:pointer;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-bottom:10px;
}

.stat-card{
background:#f8faff;
padding:0.5px;
border-radius:16px;
}

.stat-card{

transition:.35s;

}

.stat-card:hover{

transform:translateY(-5px);

box-shadow:

0 20px 45px rgba(37,99,255,.08);

}

.stat-card h4{
font-size:14px;
color:#64748b;
margin-bottom:10px;
}

.stat-card p{
font-size:16px;
font-weight:700;
color:#0b1f44;
}


.chart-row{

display:grid;

grid-template-columns:1.3fr 1.3fr 0.8fr;

gap:4px;

margin-bottom:10px;

}

.chart-card{

padding: 2px;

position:relative;
height:240px;

background:#f8faff;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

font-weight:600;

  overflow:hidden;
    border-radius:20px;
color:#FCFDFF;

}

.performance-card{

border-radius:20px;
padding:0;

position:relative;
overflow:hidden;


color:#fff;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

font-size:42px;

font-weight:700;
height:240px;

    background:#071D49;

}

.performance-card span{

font-size:13px;

margin-top:10px;

}

.bottom-stats{

display:grid;

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

gap:15px;

}

.mini-card{

background:#f8faff;

padding:0.5px;

border-radius:16px;

font-size:13px;

color:#64748b;

}

.mini-card strong{

display:block;

margin-top:10px;

font-size:20px;

color:#0b1f44;

}

.mini-card{

transition:.35s;

}

.mini-card:hover{

transform:translateY(-5px);

box-shadow:

0 20px 45px rgba(37,99,255,.08);

}

.sidebar-brand{
display:flex;
align-items:center;
gap:12px;
margin-bottom:35px;
}

.brand-icon{
width:42px;
height:42px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:18px;
color:#fff;
}

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

.brand-text span{
font-size:16px;
font-weight:700;
}

.brand-text small{
font-size:12px;
opacity:.7;
}

.dashboard-sidebar{
    position:relative;
}

.sidebar-footer{
    position:absolute;
    bottom:30px;
    left:30px;
    right:30px;
}

.footer-item{
display:flex;
align-items:center;
gap:12px;
color:#ffffff;
font-size:14px;
margin-bottom:16px;
opacity:.9;
}

.footer-item img{
width:20px;
height:20px;
object-fit:contain;
}


.header-right{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}

.date-picker{
    padding:10px 14px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    min-width:150px;
}

.profile-chip{
padding:10px 14px;
border:1px solid #e5e7eb;
border-radius:10px;
background:#fff;
white-space:nowrap;
display:flex;
align-items:center;
justify-content:center;
}


/* -----------------------------------------------------
   8. HAMBURGER → X
----------------------------------------------------- */

.site-header.menu-open .compact-menu-btn span:nth-child(1){

    transform:
        translateY(7px)
        rotate(45deg);
}


.site-header.menu-open .compact-menu-btn span:nth-child(2){

    opacity:0;
}


.site-header.menu-open .compact-menu-btn span:nth-child(3){

    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =====================================================
   HIDE DESKTOP ELEMENTS
===================================================== */

.site-header.compact-nav .logo,
.site-header.compact-nav .nav-btn{

    display:none;
}


/* =====================================================
   COMPACT NAVIGATION LINKS
===================================================== */

.site-header.compact-nav .nav-links{

    display:flex;

    align-items:center;

    gap:38px;

    margin:0;
    padding:0;

    background:transparent;

    list-style:none;
}


/* Normal compact link */

.site-header.compact-nav .nav-links a{

    position:relative;

    display:block;

    padding:7px 2px 9px;

    background:transparent;

    color:#0B1F44;

    font-size:15px;
    font-weight:600;

    transition:
        color .25s ease;
}


/* Hover */

.site-header.compact-nav .nav-links a:hover{

    color:#2563EB;
}


/* =====================================================
   ACTIVE SECTION
===================================================== */

.site-header.compact-nav .nav-links a.active{

    color:#2563EB;
}


/* Active blue indicator */

.site-header.compact-nav .nav-links a.active::after{

    content:"";

    position:absolute;

    left:0;
    bottom:2px;

    width:100%;
    height:3px;

    background:#2563EB;

    border-radius:20px;
}

/*=========================================

            our services

=========================================*/
.services{
padding:8px 0 36px;
}

.services-header{
    text-align:center;
    max-width:480px;
    margin:0 auto 0px;
}

.section-badge{
    display:inline-block;
    padding:8px 18px;
    background:#eef4ff;
    color:#2563ff;
    font-size:13px;
    font-weight:600;
    border-radius:999px;
    margin-bottom:4px;
}

.services-header h2{
    font-size:50px;
    line-height:1;
    color:#0f172a;
    margin-bottom:4px;
    font-weight:800;
}

.services-header p{
    font-size:15px;
    color:#64748b;
    line-height:1.45;
    
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    row-gap:6px;

    max-width:1220px;
    margin:0 auto;
}

.service-card{
    background:#fff;
    border-radius:12px;
    padding:6px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);

      position:relative;
    overflow:hidden;

}
.service-card{

transition:.35s ease;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:
0 15px 40px rgba(37,99,255,.12),
0 0 40px rgba(37,99,255,.08);

border-color:#2563ff;

}
.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

height:4px;

width:0;

background:#2563ff;

transition:.4s;

}

.service-card:hover::before{

width:100%;

}


.service-card h3{
    font-size:16px;
    line-height:1.3;
    margin-bottom:4px;
    font-weight:700;
}

.service-card p{
    font-size:14px;
    line-height:1.5;
    color:#64748b;
    margin-bottom:4px;
     max-width:320px;
}

.service-card a{
    color:#1456fd;
    text-decoration:none;
    font-weight:600;
    display:inline-block;
    margin-top:0;
    font-size:14px;
    transition:.3s;
}
.service-card a:hover {

transform:translateX(6px);

}

.card-preview{
    width:100%;
    height:180px;
    overflow:hidden;
    border-radius:14px;
    background:#f8fafc;
    margin-bottom:18px;
}

.card-preview img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:top;
    transition:.4s;
}

.service-card:hover .card-preview img{
    transform:scale(1.03);
}



/*=========================================

            WHY CHOOSE US

=========================================*/

.why-us{

    width:100%;
   padding:10px 0 22px;
   background:#fff;

}

/*------------------------------
Section Heading
------------------------------*/

.why-us .section-header{

    max-width:880px;
    margin:0 auto 2px;
    text-align:center;

}

.why-us .section-tag{

    display:inline-block;
    padding:8px 22px;
    background:#EEF4FF;
    color:#2563EB;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:4px;

}

.why-us h2{

    font-size:58px;
    letter-spacing:-0.4px;
    font-weight:700;
    line-height:1.1;
    color:#0F172A;
    margin-bottom:2px;
    letter-spacing:-1px;

}

.why-us h2 span{

    color:#0F172A;

}

.why-us p{

    font-size:17px;

    line-height:1.55;

    max-width:520px;

    margin:0 auto;
   letter-spacing:-0.15px;

    color:#64748B;

}

/*------------------------------
Grid
------------------------------*/

.why-grid{

    max-width:1420px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;

}

/*------------------------------
Card Placeholder
------------------------------*/



.why-card{

    background:#fff;
    border-radius:28px;
    border:1px solid #EEF2F7;
    box-shadow:0 12px 30px rgba(15,23,42,.05);
    

    overflow:hidden;
    position:relative;

        transition:transform .35s ease,
               box-shadow .35s ease,
               border-color .35s ease;

    transform:translateY(0) scale(1);


}
.why-card:hover{

    transform:translateY(-8px) scale(1.015);


   border:0.5px solid #2563EB;


    box-shadow:
    0 20px 45px rgba(37,99,255,.16),
    0 0 28px rgba(37,99,255,.18);

    z-index:10;

}

/*------------------------------
Why Card Image
------------------------------*/


.why-card-image{

    position:relative;

    margin:2px;

    height:260px;

    border-radius:20px;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#F8FAFF;

}
.why-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;
        border-radius:20px;
        transition:.4s;


}


.why-icon{

    position:absolute;

    top:0px;

    left:0px;

    width:60px;

    height:60px;

    background:#2563EB;

    border-radius:4px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

    border:1.5px solid rgba(255,255,255,.9);

   box-shadow:0 8px 18px rgba(37,99,235,.25);
           

}
.why-card:hover .why-icon{

    box-shadow:
    0 12px 28px rgba(37,99,255,.35);

}

.why-icon img{

    width:56px;

    height:56px;
     object-fit:contain;

    display:block;

}

/*------------------------------
Content
------------------------------*/

.why-card-content{

    padding:16px;

}

.why-card-content h3{

    font-size:17px;

    font-weight:700;

    color:#0F172A;
    letter-spacing:-0.4px;

    margin-bottom:10px;

}

.why-card-content p{

    font-size:16px;

    line-height:1.7;

    color:#64748B;
    letter-spacing:-0.15px;

    margin-bottom:18px;

}

.why-list{

    list-style:none;

    padding:0;

    margin:0 0 20px;

}

.why-list li{

    display:flex;

    align-items:center;

    margin-bottom:14px;

    font-size:15px;
    letter-spacing:-0.4px;

    color:#334155;

}

.why-list li::before{

    content:"✓";

    width:22px;

    height:22px;

    border-radius:50%;

    background:#2563EB;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    margin-right:12px;

    flex-shrink:0;
    letter-spacing:-0.4px;

}

.why-card-content a{

    text-decoration:none;

    color:#2563EB;

    font-size:15px;
    letter-spacing:-0.4px;

    font-weight:700;

}

/*==========================================
 Section 4 - Recent Projects
==========================================*/

.portfolio{

    width:100%;
    padding:18px 0 18px;
    background:#fff;

}

/*-----------------------------
Heading
-----------------------------*/

.portfolio-header{

    max-width:100;
    margin:0 auto 12px;
    text-align:center;

}

.portfolio .section-tag{

    display:inline-block;
    padding:8px 22px;
    background:#EEF4FF;
    color:#2563EB;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:0px;

}

.portfolio-header h2{

    max-width:100;
    margin:0 auto 6px;

    font-size:50px;
    font-weight:700;
    line-height:1.1;
    letter-spacing:-2px;

    color:#0F172A;

}

.portfolio-header p{

    max-width:520px;
    margin:0 auto;

    font-size:17px;
    line-height:1.6;

    color:#64748B;

}

/*-----------------------------
Portfolio Grid
-----------------------------*/

.portfolio-grid{

    max-width:1420px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;

}

/*-----------------------------
Card
-----------------------------*/

.portfolio-card{

    display:flex;
    flex-direction:column;
        cursor:pointer;


    background:#fff;

    border-radius:28px;
    border:1px solid #EEF2F7;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(15,23,42,.06);

    transition:.35s;

}

.portfolio-card:hover{

    transform:translateY(-10px) scale(1.02);


    box-shadow:
    0 24px 55px rgba(37,99,255,.18),
    0 0 35px rgba(37,99,255,.10);

}
/*-----------------------------
Image
-----------------------------*/

.portfolio-image{

    height:280px;

    padding:14px;

    display:flex;
    align-items:flex-start;
    justify-content:center;

}

.portfolio-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    border-radius:18px;

    transition:.45s ease;

}
.portfolio-card:hover .portfolio-image img{

    transform:scale(1.04);

}

/*-----------------------------
Content
-----------------------------*/

.portfolio-content{

    flex:1;

    padding:0 18px 22px;

    display:flex;
    flex-direction:column;

}

.portfolio-category{

    display:inline-block;
    margin-bottom:8px;
    color:#2563EB;
    font-size:14px;
    font-weight:600;
    letter-spacing:-0.5px;
    text-transform:uppercase;

}

.portfolio-content h3{

    font-size:17px;
    font-weight:700;

    line-height:1.35;

    color:#0F172A;

    margin-bottom:8px;

}

.portfolio-content p{

    color:#64748B;

    font-size:15px;
    line-height:1.75;

    margin-bottom:10px;

}

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

.portfolio-footer{

    display:flex;

    justify-content:space-between;
    align-items:center;

    margin-top:auto;

}
.portfolio-badge{

    display:flex;
    align-items:center;
    gap:10px;

    padding:5px 5px;

    background:#EEF7FF;

    border-radius:12px;

    transition:.35s ease;

}
.portfolio-card:hover .portfolio-badge{

    background:#E2EEFF;

}

.portfolio-badge img{

    width:32px;
    height:32px;

}

.portfolio-badge span{

    color:#000000;
    font-size:12px;
    font-weight:700;

}

.portfolio-footer a{

    color:#2563EB;
    text-decoration:none;
    font-size:13px;
    font-weight:650;

    transition:.35s ease;

}
.portfolio-footer a:hover{

    transform:translateX(6px);

}

/*-----------------------------
Bottom Button
-----------------------------*/

.portfolio-btn{

    margin-top:20px;
    text-align:center;

}

.portfolio-btn a{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 42px;
    background:#2563EB;
    color:#fff;
    text-decoration:none;
    font-size:17px;
    font-weight:600;
    border-radius:16px;
    transition:.3s;

}

.portfolio-btn a:hover{

    background:#1749C8;

    transform:translateY(-4px);

    box-shadow:
    0 18px 40px rgba(37,99,255,.28);

}

/*=========================================
Section 5 - Testimonials
=========================================*/

.testimonials{

    width:100%;
    padding:22px 0;
    background:#fff;
    position:relative;
    overflow:hidden;

}

/*=========================================
Heading
=========================================*/

.testimonials-header{

    max-width:760px;
    margin:0 auto 26px;
    text-align:center;

}

.testimonials .section-tag{

    display:inline-block;
    padding:8px 22px;
    background:#EEF4FF;
    color:#2563EB;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:14px;

}

.testimonials-header h2{

    font-size:50px;
    font-weight:700;
    color:#0F172A;
    line-height:1.15;
    letter-spacing:-1px;
    margin-bottom:12px;

}

.testimonials-header p{

    max-width:640px;
    margin:0 140px;
    font-size:17px;
    line-height:1.75;
    color:#64748B;

}

/*=========================================
Testimonials Grid
=========================================*/

.testimonials-grid{

    max-width:1420px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;

}

/*=========================================
Card
=========================================*/

.testimonial-card{

    background:#fff;
    border-radius:28px;
    border:1px solid #EEF2F7;
    padding:22px;
    box-shadow:0 12px 35px rgba(15,23,42,.06);

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
    position:relative;
    overflow:hidden;
    cursor:pointer;

}

.testimonial-card:hover{

    transform:translateY(-12px) scale(1.02);

    border-color:#CFE0FF;

    box-shadow:
        0 30px 70px rgba(37,99,235,.16),
        0 0 45px rgba(37,99,235,.12);

}
.testimonial-card img{

transition:.35s;

}

.testimonial-card:hover img{

transform:scale(1.08);

filter:brightness(1.03);

}

.testimonial-card:hover h3{

color:#2563EB;

transition:.3s;

}
/*=========================================
Top Area
=========================================*/

.testimonial-top{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:28px;

}

.testimonial-user{

    display:flex;
    align-items:center;
    gap:18px;

}

.testimonial-user img{

    width:82px;
    height:82px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #2563EB;

}

.testimonial-user h4{

    font-size:18px;
    font-weight:700;
    color:#0F172A;
    margin-bottom:6px;

}

.testimonial-user span{

    color:#2563EB;
    font-size:16px;
    font-weight:500;

}

/*=========================================
Quote Icon
=========================================*/

.quote-icon{

    width:38px;
    opacity:.12;

}

.quote-icon{

opacity:.20;

transition:.35s;

}

.testimonial-card:hover .quote-icon{

opacity:.50;

transform:rotate(-8deg);

}

/*=========================================
Text
=========================================*/

.testimonial-text{

    font-size:17px;
    line-height:1.9;
    color:#475569;
    margin-bottom:10px;
    min-height:145px;

}

/*=========================================
Stars
=========================================*/

.testimonial-stars{

    border-top:1px solid #EDF2F7;

    padding-top:16px;

    color:#F8B400;

    font-size:28px;

    letter-spacing:4px;

    transition:.35s;

}
.testimonial-card:hover .testimonial-stars{

letter-spacing:6px;

transform:translateX(3px);

}


/*=========================================
Stats Bar
=========================================*/

.testimonial-stats{

    max-width:1420px;
    margin:22px auto 0;

    background:#fff;
    border:1px solid #EEF2F7;
    border-radius:24px;

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

    box-shadow:0 12px 35px rgba(15,23,42,.05);

}

.stat-item{

    display:flex;
    align-items:center;
    gap:18px;

    padding:16px;

    position:relative;

}

.stat-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;
    top:25%;

    width:1px;
    height:50%;

    background:#E8EEF7;

}

.stat-item img{

    width:62px;
    height:62px;
    transition:.35s;

}
.stat-item:hover img{

transform:scale(1.12) rotate(-6deg);

}

.stat-item h3{

    font-size:22px;
    color:#0F172A;
    font-weight:700;
    margin:4px 14px 4px;
    

}

.stat-item span{

    font-size:15px;
    color:#64748B;

}

/*=========================================
Stats Hover
=========================================*/

.testimonial-stats{

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.testimonial-stats:hover{

    transform:translateY(-6px);

    box-shadow:
        0 25px 60px rgba(37,99,235,.12),
        0 0 35px rgba(37,99,235,.08);

}
/*=========================================
Background Decoration
=========================================*/

.testimonials::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    top:-120px;
    right:-120px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 70%);

}

.testimonials::after{

    content:"";

    position:absolute;

    left:40px;
    top:90px;

    width:120px;
    height:120px;

    background-image:radial-gradient(#D6E6FF 2px, transparent 2px);
    background-size:18px 18px;

    opacity:.7;

}

.testimonial-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:#2563EB;

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.testimonial-card:hover::before{

transform:scaleX(1);

}

/*=====================================
SECTION 6
======================================*/

.cta{

padding:28px 0;
position:relative;
overflow:hidden;

background:linear-gradient(
135deg,
#071528 0%,
#0A1D39 50%,
#071528 100%
);

}

.cta-container{

    width:90%;
    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:0.95fr 1.05fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

}

.cta-left h2{

    font-size:50px;

    font-weight:800;

    line-height:1.05;

    color:#fff;

    margin:22px 0;

    letter-spacing:-2px;

}


.cta-left p{

    font-size:18px;

    line-height:1.75;

    color:#C7D2FE;

    max-width:620px;

    margin-bottom:42px;

}

.cta-tag{

display:inline-block;

padding:12px 26px;

background:#0F2D5D;

color:#6AA9FF;

border-radius:50px;

font-weight:600;

}

.cta-buttons{

display:flex;

gap:20px;

margin-bottom:55px;

}

.btn-primary{

background:#2563EB;

padding:18px 34px;

border-radius:16px;

color:#fff;

text-decoration:none;
font-size:17px;

font-weight:600;

}

.btn-secondary{

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

padding:18px 34px;

border-radius:16px;

color:#fff;

text-decoration:none;

}

.cta-features{

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:4px;

flex-wrap:nowrap;

margin-top:8px;

}

.cta-dot-grid-left{
    position:absolute;

    width:360px;
    height:280px;

    left:-80px;
    bottom:25px;

    background-image:
        radial-gradient(
            circle,
            rgba(96,165,250,.7) 1.3px,
            transparent 1.5px
        );

    background-size:20px 20px;

    opacity:.20;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.65) 38%,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.65) 38%,
            transparent 76%
        );

    z-index:1;
    pointer-events:none;
}

.cta-dot-grid{
    position:absolute;

    width:420px;
    height:360px;

    right:-20px;
    top:70px;

    background-image:
        radial-gradient(
            circle,
            rgba(96,165,250,.75) 1.5px,
            transparent 1.7px
        );

    background-size:20px 20px;

    opacity:.32;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.8) 40%,
            transparent 78%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.8) 40%,
            transparent 78%
        );

    z-index:1;
    pointer-events:none;
}

.dashboard-wrapper{

position:absolute;

top:0;

right:0;

width:100%;

height:100%;

z-index:2;


}
/* Decorative graph BEHIND dashboard */
.graph-bg{
    position:absolute;

    width:1200px;
    max-width:none;

    right:-130px;
    top:70px;

    opacity:.48;

    z-index:1;

    pointer-events:none;
     clip-path:inset(0 100% 0 0);

    animation:graphDraw 1.6s ease-out forwards;

    filter:
        drop-shadow(0 0 10px rgba(56,189,248,.35))
        drop-shadow(0 0 28px rgba(37,99,235,.20));

}

@keyframes graphDraw{

    0%{
        clip-path:inset(0 100% 0 0);
    }

    100%{
        clip-path:inset(0 0 0 0);
    }

}


/* Dashboard */
.dashboard-main{
    width:690px;
    max-width:none;
    border-radius:20px;

    position:absolute;

    top:50%;
    right:20px;

    transform:
        translateY(-50%)
        rotate(-2deg);

    z-index:2;

    filter:drop-shadow(
        0 35px 70px rgba(37,99,235,.28)
    );

    transition:
        transform .45s ease,
        filter .45s ease;
}

/* Dashboard hover */
.dashboard-main:hover{
    transform:
        translateY(calc(-50% - 8px))
        rotate(1deg)
        scale(1.015);

    filter:drop-shadow(
        0 45px 85px rgba(37,99,235,.38)
    );
}


.dashboard-glow{
    position:absolute;

    width:720px;
    height:620px;

    right:-20px;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(37,99,235,.16) 0%,
        rgba(37,99,235,.07) 38%,
        transparent 72%
    );

    filter:blur(65px);

    z-index:0;
    pointer-events:none;
}

.dashboard-grid{

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(37,99,255,.06) 1px, transparent 1px),

linear-gradient(90deg, rgba(37,99,255,.06) 1px, transparent 1px);

background-size:50px 50px;

mask-image:

linear-gradient(to bottom,

transparent,

black 18%,

black 82%,

transparent);

opacity:.35;

z-index:0;

}

.cta-line{

position:absolute;

left:45%;

bottom:90px;

width:700px;

height:180px;

background:url("assets/images/graph-line.svg") no-repeat center;

background-size:contain;

opacity:.16;

filter:blur(.3px);

z-index:0;

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

}



.cta::before{

content:"";

position:absolute;

width:700px;

height:700px;

left:-260px;

bottom:-250px;

border-radius:50%;

background:radial-gradient(circle,

rgba(37,99,255,.10),

transparent 72%);

filter:blur(80px);

}

.cta::after{

content:"";

position:absolute;

inset:0;

background:url("assets/images/graph-line.svg") no-repeat right center;

background-size:900px;

opacity:.25;

pointer-events:none;

}


.cta-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:720px;

}

.cta-right::after{

    content:"";

    position:absolute;

    width:1050px;
    height:620px;

    right:-180px;
    top:40px;

    background-image:url("assets/images/graph-line.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    opacity:.45;

    z-index:1;

    pointer-events:none;

}

.cta-right::before{

content:"";

position:absolute;

width:620px;

height:620px;

right:0;

top:90px;

background:radial-gradient(circle,

rgba(37,99,255,.18),

transparent 70%);

filter:blur(70px);

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

z-index:0;

}



.feature{

display:content;

align-items:flex-start;

gap:2px;

flex:1;

min-width:0;

}

.feature img{

width:58px;

height:58px;

object-fit:contain;

flex-shrink:0;


}

.feature h4{

font-size:16px;

font-weight:700;

color:#fff;

margin:0 0 6px;

}

.feature p{

font-size:14px;

line-height:1.6;

color:#B8C6E6;
width:180px;

margin:0;

}

/*=====================================
SECTION 7
CONTACT SECTION
======================================*/


/*=====================================
1. WRAPPER
======================================*/

.contact-section{

    padding:15px 0 10px;

    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(10, 17, 229, 0.055) 0%,
            rgba(3, 108, 237, 0.025) 28%,
            transparent 55%
        ),
        #F8FAFC;
}


/*=====================================
2. CONTAINER
======================================*/

.contact-container{

    width:90%;
    max-width:1450px;

    margin:auto;

    display:grid;

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

    gap:22px;

}


/*=====================================
3. CARDS
======================================*/

.contact-left,
.contact-right{

    background:#fff;

    border:1px solid #E8EEF8;

    border-radius:30px;

    padding:20px;

    position:relative;

    box-shadow:
    0 18px 45px rgba(15,23,42,.06);
  transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

/* Premium Contact Card Hover */

.contact-left:hover,
.contact-right:hover{

    transform:translateY(-5px);

    border-color:rgba(37,99,235,.28);

    box-shadow:
        0 22px 55px rgba(15,23,42,.09),
        0 0 32px rgba(37,99,235,.08);
}


/*=====================================
4. TAG
======================================*/

.contact-tag{

    display:inline-flex;

    align-items:center;

    padding:8px 10px;

    background:#EEF4FF;

    color:#2563EB;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:0;

    margin-bottom:8px;

}

.contact-tag img{

    width:18px;

}


/*=====================================
5. TYPOGRAPHY
======================================*/

.contact-left h2{

    font-size:40px;

    line-height:1.05;

    font-weight:650;

    max-width:560px;

    color:#081326;

}

.contact-left p{

    font-size:14px;

    line-height:1.8;

    color:#5B6478;

    max-width:400px;

    margin-bottom:10px;

}

.info-box h4{

    font-size:15px;

    color:#081326;

    margin-bottom:2px;

    font-weight:700;

}

.info-box p{

    font-size:14px;

    color:#5B6478;

    text-decoration:none;
     max-width:220px;
    line-height:1.7;

}
.info-box a{

    font-size:14px;

    color:#084fe9;
         font-weight:500;
    text-decoration:none;
     max-width:220px;

    line-height:1.7;

}

.social-links h5{

    font-size:15px;

    color:#081326;

    margin-right:12px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#081326;

}


/*=====================================
6. CONTACT INFO
======================================*/

.contact-info{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-bottom:2px;

}

.info-box{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding-bottom:8px;

    border-bottom:1px solid #EDF2F7;

}


/*=====================================
7. SOCIAL LINKS
======================================*/

.social-links{

    display:flex;

    align-items:center;

    gap:20px;

}

.social-links a{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#F4F8FF;

    transition:.35s;

}


/*=====================================
8. FORM
======================================*/

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

}

.input-group{

    margin-bottom:22px;

}

.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    padding:8px 10px;

    border:1px solid #DFE8F4;

    border-radius:14px;

    outline:none;

    font-size:12px;

    transition:.3s;

    resize:none;

}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{

    border-color:#2563EB;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.08);

}

.send-btn{

    width:100%;

    padding:12px;

    border:none;

    border-radius:14px;

    background:#2563EB;

    color:#fff;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}


/*=====================================
9. IMAGES
======================================*/

.contact-illustration{

    position:absolute;

    right:10px;

    top:5px;

    width:260px;

    pointer-events:none;

}

.info-box img{

    width:48px;

    height: 48px;

    flex-shrink:0;

}

.social-links img{

    width:48px;

}


/*=====================================
10. HOVER
======================================*/

.info-box a:hover{

    color:#2563EB;

}

.social-links a:hover{

    transform:translateY(-6px);

    
    background:#79a3fffe;

}

.send-btn:hover{

    transform:translateY(-4px);

    background:#174BCB;

}

/*=====================================
SECTION 8
FOOTER
======================================*/


/*=====================================
1. FOOTER WRAPPER
======================================*/

.footer{

    background:linear-gradient(
    135deg,
    #071528 0%,
    #0A1C36 100%);

    padding:15px 0 10px;

    position:relative;

    overflow:hidden;

}


/*=====================================
2. CONTAINER / GRID
======================================*/

.footer-container{

    width:90%;
    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1.3fr
    .8fr
    .8fr
    1fr
    1fr;

    gap:45px;

    align-items:flex-start;

    padding-bottom:2px;

    border-bottom:1px solid rgba(255,255,255,.08);

}


/*=====================================
3. ABOUT SECTION
======================================*/

.footer-about p{

    color:#B9C5DB;

    line-height:1.9;

    font-size:15px;

    max-width:330px;

    margin-bottom:10px;

}


/*=====================================
4. LOGO
======================================*/

.footer-logo{

    width:80px;

    margin-bottom:8px;

}


/*=====================================
5. BADGES
======================================*/

.footer-badges{

    display:flex;

    gap:14px;

    flex-wrap:nowrap;

    align-items:center;

}

.badge{

    display:flex;

    align-items:center;

    gap:10px;

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

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

    border-radius:14px;

    padding:8px 2px;

    transition:.35s;
    width:120px;

}

.badge img{

    width:32px;

}

.badge span{

    color:#fff;

    font-size:12px;

}


/*=====================================
6. LINKS
======================================*/

.footer-links h3,
.footer-connect h3{

    color:#fff;

    font-size:18px;
    font-weight: 400;

    margin-bottom:14px;

    position:relative;

}

.footer-links h3::after,
.footer-connect h3::after{

    content:"";

    width:55px;

    height:3px;

    background:#2563EB;

    display:block;

    margin-top:2px;

    border-radius:20px;

}

.footer-links ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:16px;

}

.footer-links a{

    color:#B9C5DB;

    text-decoration:none;

    transition:.35s;
        font-size:14px;


    display:inline-block;

}


/*=====================================
7. CONNECT
======================================*/

.footer-connect{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.connect-item{

    display:flex;

    align-items:center;

    gap:14px;

}

.connect-item img{

    width:22px;

}

.connect-item span{
    
    font-size:14px;
    font-weight:100;

    color:#B9C5DB;

    line-height:1.7;

    transition:.35s;

}


/*=====================================
8. WORLD MAP
======================================*/

.footer-world{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:220px;

}

.world-map{

    width:180%;

    max-width:550px;
    opacity:.45;



}

.world-logo{

    width:120px;

    position:absolute;

    transition:.4s;
    

}


/*=====================================
9. FOOTER BOTTOM
======================================*/

.footer-bottom{

    width:90%;
    max-width:1450px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:5px;

}

.footer-bottom p{

    color:#A8B4C8;

    font-size:15px;

}


/*=====================================
10. HOVER EFFECTS
======================================*/

.badge:hover{

    transform:translateY(-6px);

    border-color:#2563EB;

}

.footer-links a:hover{

    color:#fff;

    transform:translateX(8px);

}

.connect-item:hover span{

    color:#fff;

}

.footer-world:hover .world-logo{

    transform:scale(1.08);

}

.footer-world:hover .world-map{

    opacity:100;

}


/* =====================================================
   SECTION SCROLL OFFSET
   Prevent sticky navbar covering section headings
===================================================== */

section{
    scroll-margin-top:90px;
}



/* =====================================================
   HOME RESPONSIVE
   HEADER + HERO
===================================================== */

/* Mobile dashboard hidden by default */
.dashboard-mobile{
    display:none;
}


/* =====================================================
   TABLET / SMALL LAPTOP
   1199px and below
===================================================== */

@media (max-width:1199px){

    .container{
        width:92%;
    }

    /* NAVBAR */

    .navbar{
        padding:16px 0;
        margin-bottom:20px;
    }

    .nav-links{
        gap:24px;
    }

    .nav-links a{
        font-size:15px;
    }

    .nav-btn{
        padding:15px 20px;
        font-size:14px;
    }


    /* HERO */

    .hero-content{
        grid-template-columns:42% 58%;
        gap:20px;
        align-items:center;
    }

    .hero-left h1{
        font-size:40px;
        line-height:1.3;
    }

    .hero-left p{
        font-size:15px;
        line-height:1.75;
    }

    .hero-buttons{
        gap:12px;
    }

    .btn-primary,
    .btn-secondary{
        min-width:160px;
        height:52px;
        padding:14px 20px;
        font-size:14px;
    }


    /* DASHBOARD */

    .hero-right{
        height:520px;
        top:0;
    }

    .dashboard{
        width:720px;
        height:560px;

        position:absolute;
        left:0;
        top:0;

        transform:scale(.86);
        transform-origin:top left;
    }

    .dashboard-sidebar{
        width:190px;
    }
}


/* =====================================================
   TABLET PORTRAIT
   900px and below
===================================================== */

@media (max-width:900px){

    /* HERO */

    .hero{
        padding-bottom:45px;
    }

    .hero-content{
        grid-template-columns:1fr;
        gap:35px;
    }

    .hero-left{
        text-align:center;
    }

    .hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-left h1{
        max-width:650px;
        margin-left:auto;
        margin-right:auto;

        font-size:48px;
        line-height:1.22;
    }

    .hero-left p{
        max-width:600px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:30px;
    }

    .hero-buttons{
        justify-content:center;
    }


    /* DESKTOP DASHBOARD OFF */

    .dashboard{
        display:none;
    }


    /* MOBILE / TABLET DASHBOARD ON */

    .hero-right{
        width:100%;
        height:auto;
        top:0;
        margin-top:10px;

        display:flex;
        justify-content:center;

        position:relative;
    }

    .dashboard-mobile{
        display:block;

        width:100%;
        max-width:760px;
        height:auto;

        position:relative;
        z-index:2;

        border-radius:18px;

        filter:
            drop-shadow(0 25px 45px rgba(18,38,95,.14));
    }

    .dashboard-glow{
        width:520px;
        height:420px;

        left:50%;
        right:auto;
        top:50%;

        transform:translate(-50%,-50%);

        filter:blur(65px);

        opacity:.7;
    }
}


/* =====================================================
   MOBILE
   767px and below
===================================================== */

@media (max-width:767px){

    .container{
        width:90%;
    }


    /* HERO */

    .hero{
        padding-top:5px;
        padding-bottom:35px;
    }

    .hero-content{
        display:block;
    }

    .hero-left{
        text-align:center;
    }

    .hero-badge{
        padding:7px 12px;
        margin-bottom:24px;
    }

    .hero-badge img{
        width:23px;
        height:23px;
    }

    .hero-badge span{
        font-size:12px;
    }

    .hero-left h1{
        font-size:38px;
        line-height:1.18;

        max-width:520px;

        margin:0 auto 24px;
    }

    .hero-left p{
        font-size:14px;
        line-height:1.75;

        max-width:500px;

        margin:0 auto 28px;
    }


    /* BUTTONS */

    .hero-buttons{
        justify-content:center;
        gap:12px;
    }

    .btn-primary,
    .btn-secondary{
        min-width:155px;
        height:50px;

        padding:12px 18px;

        font-size:13px;
        border-radius:12px;
    }


    /* DASHBOARD IMAGE */

    .hero-right{
        margin-top:34px;
        height:auto;
    }

    .dashboard-mobile{
        width:100%;
        max-width:620px;

        border-radius:16px;
    }

    .dashboard-glow{
        width:400px;
        height:320px;

        opacity:.55;
        filter:blur(55px);
    }


    /* REMOVE TOUCH HOVER MOVEMENT */

    .stat-card:hover,
    .mini-card:hover{
        transform:none;
    }


    /* BUTTON FONT */

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary{
        font-family:'Inter', sans-serif;
        font-size:14px;
        font-weight:600;
        line-height:1;
        letter-spacing:0;
    }
}

/* =========================================================
   FINAL RESPONSIVE NAVIGATION SYSTEM
   Remove ALL old responsive navbar / compact-nav /
   hamburger rules and keep ONLY this navigation block.
========================================================= */


/* =========================================================
   BASE
   Hamburger hidden on normal desktop navbar
========================================================= */

.compact-menu-btn{
    display:none;
}


/* =========================================================
   MOBILE + TABLET
   0px — 900px

   ALWAYS:
   White sticky navbar
   Logo visible
   Hamburger visible

   MENU OPEN:
   Dropdown below navbar
========================================================= */

@media (max-width:900px){

    /* ---------- HEADER ---------- */

    .site-header,
    .site-header.compact-nav,
    .site-header.menu-open,
    .site-header.compact-nav.menu-open{
        position:sticky;
        top:0;
        left:0;

        width:100%;
        height:auto;

        margin:0;
        padding:0;

        background:#ffffff;

        border-bottom:1px solid #e8edf5;

        box-shadow:
            0 4px 14px rgba(15,23,42,.04);

        opacity:1;
        visibility:visible;

        transform:none;

        pointer-events:auto;

        z-index:9999;
    }


    /* ---------- CONTAINER ---------- */

    .site-header .container,
    .site-header.compact-nav .container,
    .site-header.menu-open .container,
    .site-header.compact-nav.menu-open .container{
        position:relative;

        width:92%;
        max-width:none;

        height:auto;

        margin:0 auto;
        padding:0;

        background:transparent;
    }


    /* ---------- NAVBAR ROW ---------- */

    .site-header .navbar,
    .site-header.compact-nav .navbar,
    .site-header.menu-open .navbar,
    .site-header.compact-nav.menu-open .navbar{
        position:relative;

        display:flex;

        width:100%;
        height:64px;
        min-height:64px;

        align-items:center;
        justify-content:space-between;

        margin:0;
        padding:0;

        background:transparent;

        border:0;
        border-radius:0;

        box-shadow:none;

        opacity:1;
        visibility:visible;

        transform:none;

        pointer-events:auto;
    }


    /* ---------- LOGO ALWAYS VISIBLE ---------- */

    .site-header .logo,
    .site-header.compact-nav .logo,
    .site-header.menu-open .logo,
    .site-header.compact-nav.menu-open .logo{
        display:flex;

        position:relative;

        top:auto;
        right:auto;
        bottom:auto;
        left:auto;

        align-items:center;

        gap:6px;

        margin:0;
        padding:0;

        opacity:1;
        visibility:visible;

        transform:none;
    }


    .site-header .logo img{
        width:34px;
        height:auto;
    }


    .site-header .logo span{
        font-size:16px;
        font-weight:600;
    }


    /* ---------- DESKTOP LINKS HIDDEN ---------- */

    .site-header .nav-links,
    .site-header.compact-nav .nav-links{
        display:none;
    }


    /* ---------- CONSULTATION BUTTON HIDDEN ---------- */

    .site-header .nav-btn,
    .site-header.compact-nav .nav-btn,
    .site-header.menu-open .nav-btn,
    .site-header.compact-nav.menu-open .nav-btn{
        display:none;
    }


    /* ---------- HAMBURGER ALWAYS INSIDE NAVBAR ---------- */

    .site-header .compact-menu-btn,
    .site-header.compact-nav .compact-menu-btn,
    .site-header.menu-open .compact-menu-btn,
    .site-header.compact-nav.menu-open .compact-menu-btn{
        display:flex;

        position:relative;

        top:auto;
        right:auto;
        bottom:auto;
        left:auto;

        width:42px;
        height:42px;

        flex:0 0 42px;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:5px;

        margin:0 0 0 auto;
        padding:0;

        background:#ffffff;

        border:1px solid #e2e8f0;
        border-radius:11px;

        box-shadow:
            0 8px 22px rgba(15,23,42,.08);

        opacity:1;
        visibility:visible;

        transform:none;

        cursor:pointer;

        pointer-events:auto;

        z-index:10002;
    }


    .compact-menu-btn span{

        display:block;

        width:19px;
        height:2px;

        background:#0B1F44;

        border-radius:10px;

        transition: transform .28s ease, opacity .28s ease;
    }


    /* ---------- HAMBURGER → X ---------- */

    .site-header.menu-open
    .compact-menu-btn span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .site-header.menu-open
    .compact-menu-btn span:nth-child(2){
        opacity:0;
    }

    .site-header.menu-open
    .compact-menu-btn span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }


    /* ---------- DROPDOWN ---------- */

    .site-header.menu-open .nav-links{
        display:flex;

        position:absolute;

        top:calc(100% + 8px);
        right:0;

        width:190px;

        flex-direction:column;
        align-items:stretch;

        gap:2px;

        margin:0;
        padding:10px;

        background:#ffffff;

        border:1px solid #e8edf5;
        border-radius:14px;

        box-shadow:
            0 18px 40px rgba(15,23,42,.12);

        z-index:10001;
    }


    .site-header.menu-open .nav-links a{
        display:block;

        padding:10px;

        font-size:13px;
        font-weight:600;

        color:#0B1F44;

        border-radius:8px;
    }


    .site-header.menu-open .nav-links a:hover,
    .site-header.menu-open .nav-links a.active{
        color:#2563EB;
        background:#F5F8FF;
    }


    .site-header.menu-open .nav-links a.active::after{
        display:none;
    }
}




/* =========================================================
   MOBILE SIZE
   767px AND BELOW
========================================================= */

@media (max-width:767px){

    .site-header .navbar,
    .site-header.compact-nav .navbar,
    .site-header.menu-open .navbar{
        height:58px;
        min-height:58px;
    }

    .site-header .logo img{
        width:31px;
    }

    .site-header .logo span{
        font-size:15px;
    }

    .site-header .compact-menu-btn,
    .site-header.compact-nav .compact-menu-btn,
    .site-header.menu-open .compact-menu-btn{
        width:38px;
        height:38px;

        flex-basis:38px;
    }

    .compact-menu-btn span{
        width:17px;
    }

    .site-header.menu-open .nav-links{
        width:185px;
        padding:8px;
    }
}


/* =========================================================
   SMALL MOBILE
   480px AND BELOW
========================================================= */

@media (max-width:480px){

    .site-header .navbar,
    .site-header.compact-nav .navbar,
    .site-header.menu-open .navbar{
        height:56px;
        min-height:56px;
    }

    .site-header .logo img{
        width:29px;
    }

    .site-header .logo span{
        font-size:14px;
    }

    .site-header .compact-menu-btn,
    .site-header.compact-nav .compact-menu-btn,
    .site-header.menu-open .compact-menu-btn{
        width:36px;
        height:36px;

        flex-basis:36px;

        gap:4px;
    }

    .compact-menu-btn span{
        width:16px;
    }

    .site-header.menu-open .nav-links{
        width:170px;
        padding:7px;
    }
}



/* =====================================================
   SMALL MOBILE
   480px and below
===================================================== */

@media (max-width:480px){

    .container{
        width:92%;
    }


    /* HERO */

    .hero-badge{
        margin-bottom:12px;
    }

    .hero-badge span{
        font-size:11px;
    }

    .hero-left h1{
        font-size:33px;
        line-height:1.17;
        letter-spacing:-.5px;

        margin-bottom:12px;
    }

    .hero-left p{
        font-size:13px;
        line-height:1.7;
        max-width:370px;
        margin-bottom:12px;
    }


    /* BUTTONS */

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .btn-primary,
    .btn-secondary{
        width:80%;
        max-width:100%;

        height:52px;
    }


    /* DASHBOARD */

    .hero-right{
        margin-top:20px;
    }

    .dashboard-mobile{
        width:100%;
        border-radius:12px;
    }

    .dashboard-glow{
        width:300px;
        height:250px;

        opacity:.45;
        filter:blur(45px);
    }
}

/*=====================================================
    DESKTOP NAVIGATION SYSTEM
    901px+
=====================================================*/

@media (min-width:901px){

/* HERO */

.site-header:not(.compact-nav) .compact-menu-btn{
    display:none;
}


/* AFTER HERO */

.site-header.compact-nav{

    background:transparent;

    border:none;

    box-shadow:none;

    backdrop-filter:none;

    -webkit-backdrop-filter:none;
}


/* Hide desktop navbar */

.site-header.compact-nav .logo,
.site-header.compact-nav .nav-links,
.site-header.compact-nav .nav-btn{

    visibility:hidden;

    opacity:0;

    pointer-events:none;

}


/* Floating Hamburger */

.site-header.compact-nav .compact-menu-btn{

    display:flex;

    position:fixed;

    top:18px;

    right:22px;

    width:50px;

    height:50px;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:14px;

    box-shadow:0 10px 28px rgba(15,23,42,.10);

    cursor:pointer;

    z-index:10002;
     transition:
        transform .30s ease,
        opacity .30s ease,
        background .30s ease,
        box-shadow .30s ease;
}
.site-header.compact-nav.menu-open .compact-menu-btn:hover{

    transform:scale(1);

}

.site-header.compact-nav .compact-menu-btn span{

    width:20px;

    height:2px;

    background:#0B1F44;

    border-radius:10px;
}


/*=========================
MENU OPEN
=========================*/

.site-header.compact-nav.menu-open{

    background:#fff;

    border-bottom:1px solid #e8edf5;

    box-shadow:0 5px 18px rgba(15,23,42,.06);

}


/* Navbar */

.site-header.compact-nav.menu-open .navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:72px;
}


/* Logo Back */

.site-header.compact-nav.menu-open .logo{

    display:flex;

    visibility:visible;

    opacity:1;

    pointer-events:auto;
}


/* Consultation hidden */

.site-header.compact-nav.menu-open .nav-btn{

    display:none;
}


/* X Button */

.site-header.compact-nav.menu-open .compact-menu-btn{

    position:relative;

    top:0;

    right:0;

    margin-left:auto;

    transform:scale(.95);

}


/* Hamburger to X */

.site-header.compact-nav.menu-open
.compact-menu-btn span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.site-header.compact-nav.menu-open
.compact-menu-btn span:nth-child(2){

    opacity:0;

}

.site-header.compact-nav.menu-open
.compact-menu-btn span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}


/* Dropdown */

.site-header.compact-nav.menu-open .nav-links{

    display:flex;

    visibility:visible;

    opacity:1;

    pointer-events:auto;

    position:absolute;

    top:82px;

    right:0;

    width:220px;

    flex-direction:column;

    gap:4px;

    padding:12px;

    background:#fff;

    border:1px solid #e8edf5;

    border-radius:16px;

    box-shadow:0 18px 45px rgba(15,23,42,.12);
}

.site-header.compact-nav.menu-open .nav-links a{

    display:block;

    padding:11px 10px;

    border-radius:8px;

    color:#0B1F44;
}

.site-header.compact-nav.menu-open .nav-links a:hover,

.site-header.compact-nav.menu-open .nav-links a.active{

    background:#F5F8FF;

    color:#2563EB;
}

.site-header.compact-nav.menu-open
.nav-links a.active::after{

    display:none;
}

}

/* /* =====================================================
   RESPONSIVE — SECTION 2 SERVICES
===================================================== */


/* =====================================================
   TABLET — 900px AND BELOW
===================================================== */

@media (max-width:900px){

    .services{
        padding:32px 0 42px;
    }

    .services-header{
        width:90%;
        max-width:600px;
        margin:0 auto 24px;
        text-align:center;
    }

    .services-header h2{
        font-size:40px;
        line-height:1.12;
        margin-bottom:10px;
    }

    .services-header p{
        font-size:14px;
        line-height:1.6;
    }

    .services-grid{
        width:90%;
        max-width:760px;
        margin:0 auto;

        grid-template-columns:repeat(2, 1fr);
        gap:14px;
    }

    .service-card{
        padding:10px;
        border-radius:16px;

        position:relative;
        overflow:hidden;
    }

    .card-preview{
        height:180px;
        margin-bottom:14px;
    }
}


/* =====================================================
   MOBILE — 767px AND BELOW
===================================================== */

@media (max-width:767px){

    .services{
        padding:40px 0 40px;
        overflow:visible;
    }

    .services-header{
        width:90%;
        max-width:520px;

        margin:0 auto 22px;
        padding:0;

        text-align:center;
    }

    .section-badge{
        font-size:11px;

        padding:7px 14px;

        margin-bottom:8px;
    }

    .services-header h2{
        font-size:32px;
        line-height:1.15;

        margin:8px 0 10px;
    }

    .services-header p{
        font-size:13px;
        line-height:1.6;
    }


    /* SERVICES GRID */

    .services-grid{
    width:94%;
    max-width:700px;

    margin:0 auto;

    grid-template-columns:repeat(2, 1fr);
    gap:10px;
}


    /* CARD */

    .service-card{
        width:100%;

        padding:10px;

        border-radius:16px;

        position:relative;
        overflow:hidden;
    }


    /* DASHBOARD PREVIEW */

    .card-preview{
        width:100%;
        height:190px;

        margin-bottom:14px;

        border-radius:12px;

        overflow:hidden;
    }

    .card-preview img{
        width:100%;
        height:100%;

        display:block;

        object-fit:cover;
        object-position:top center;
    }


    /* CARD TEXT */

    .service-card h3{
        font-size:18px;
        line-height:1.25;

        margin-bottom:6px;
    }

    .service-card p{
        font-size:13px;
        line-height:1.55;

        max-width:none;

        margin-bottom:6px;
    }

    .service-card a{
        font-size:13px;
    }


    /* REMOVE DESKTOP HOVER MOVEMENT */

    .service-card:hover{
        transform:none;
    }

}


/* =====================================================
   SMALL MOBILE — 480px AND BELOW
===================================================== */

@media (max-width:480px){

    .services{
        padding:16px 0 28px;
    }

    .services-header{
        width:94%;
        margin-bottom:20px;
    }

    .services-header h2{
        font-size:30px;
    }

    .services-header p{
        font-size:12.5px;
    }


    /* GRID */

/* 425px MOBILE — COMPACT 2 COLUMN CARDS */

.services-grid{
    width:94%;
    max-width:420px;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
}

.service-card{
    padding:7px;
    border-radius:12px;
}

/* IMAGE — FULL DASHBOARD VISIBLE */

.card-preview{
    width:100%;
    height:125px;
    aspect-ratio:auto;
    margin-bottom:9px;
    border-radius:9px;
    background:#f8fafc;
}

.card-preview img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

/* TEXT COMPACT */

.service-card h3{
    font-size:15px;
    line-height:1.2;
    margin-bottom:5px;
}

.service-card p{
    font-size:11.5px;
    line-height:1.4;
    margin-bottom:5px;
}

.service-card a{
    font-size:11.5px;
    margin-top:0;
}

}

/* =====================================================
   SECTION 3 — WHY CHOOSE US RESPONSIVE
===================================================== */


/* =====================================================
   TABLET — 1199px AND BELOW
===================================================== */

@media (max-width:1199px){

    .why-us{
        padding:35px 0 40px;
    }

    .why-us .section-header{
        width:90%;
        max-width:760px;
        margin:0 auto 25px;
    }

    .why-us h2{
        font-size:48px;
        line-height:1.1;
    }

    .why-grid{
        width:92%;
        max-width:900px;

        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:18px;
    }

    .why-card-image{
        height:240px;
    }
}


/* =====================================================
   MOBILE — 767px AND BELOW
===================================================== */

@media (max-width:767px){

    .why-us{
        padding:32px 0 38px;
    }


    /* ---------- HEADER ---------- */

    .why-us .section-header{
        width:92%;
        margin:0 auto 24px;
    }

    .why-us .section-tag{
        padding:7px 16px;
        font-size:11px;
        letter-spacing:1.5px;
        margin-bottom:10px;
    }

    .why-us h2{
        font-size:34px;
        line-height:1.12;
        letter-spacing:-.7px;
        margin-bottom:10px;
    }

    .why-us .section-header p{
        font-size:13px;
        line-height:1.6;
        max-width:500px;
    }


    /* ---------- GRID ---------- */

    .why-grid{
        width:94%;
        max-width:700px;
        margin:0 auto;

        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
    }

    /* Center odd last portfolio card */
.portfolio-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    width:calc((100% - 10px) / 2);
    justify-self:center;
}

    /* ---------- CARD ---------- */

    .why-card{
        border-radius:16px;
    }


    /* ---------- IMAGE ---------- */

    .why-card-image{
        height:175px;
        margin:2px;
        border-radius:14px;
    }

    .why-card-image > img{
        width:100%;
        height:100%;

        object-fit:cover;
        object-position:center;

        border-radius:14px;
    }


    /* ---------- BLUE ICON ---------- */

    .why-icon{
        width:48px;
        height:48px;

        border-radius:5px;
    }

    .why-icon img{
        width:44px;
        height:44px;
        object-fit:contain;
    }


    /* ---------- CONTENT ---------- */

    .why-card-content{
        padding:11px;
    }

    .why-card-content h3{
        font-size:16px;
        line-height:1.2;

        margin-bottom:6px;
    }

    .why-card-content p{
        font-size:12px;
        line-height:1.45;

        margin:0 0 11px;
    }


    /* ---------- LIST ---------- */

    .why-list{
        margin:0 0 12px;
    }

    .why-list li{
        font-size:11.5px;
        line-height:1.3;

        margin-bottom:8px;

        align-items:flex-start;
    }

    .why-list li::before{
        width:17px;
        height:17px;

        font-size:9px;

        margin-right:7px;
        margin-top:0;
    }


    /* ---------- LINK ---------- */

    .why-card-content a{
        font-size:12px;
    }


    /* Touch device hover jump off */

    .why-card:hover{
        transform:none;
    }
}


/* =====================================================
   SMALL MOBILE — 480px AND BELOW
===================================================== */

@media (max-width:480px){

    .why-us{
        padding:8px 0 18px;
    }


    /* HEADER */

    .why-us .section-header{
        width:92%;
        margin-bottom:20px;
    }

    .why-us .section-tag{
        font-size:10.5px;
        padding:7px 15px;
    }

    .why-us h2{
        font-size:30px;
        line-height:1.12;
        margin-bottom:9px;
    }

    .why-us .section-header p{
        font-size:12px;
        line-height:1.55;
        max-width:320px;
    }


    /* GRID — KEEP 2 CARDS PER ROW */

    .why-grid{
        width:94%;
        max-width:430px;

        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:8px;
    }


    /* CARD */

    .why-card{
        border-radius:14px;
    }


    /* IMAGE */

    .why-card-image{
        height:145px;
        border-radius:11px;
    }

    .why-card-image > img{
        border-radius:11px;
    }


    /* ICON */

    .why-icon{
        width:42px;
        height:42px;
    }

    .why-icon img{
        width:38px;
        height:38px;
    }


    /* CONTENT */

    .why-card-content{
        padding:9px;
    }

    .why-card-content h3{
        font-size:14px;
        line-height:1.2;
        letter-spacing:-.25px;

        margin-bottom:5px;
    }

    .why-card-content p{
        font-size:10.5px;
        line-height:1.4;

        margin-bottom:9px;
    }


    /* LIST */

    .why-list{
        margin-bottom:10px;
    }

    .why-list li{
        font-size:10px;
        line-height:1.25;

        margin-bottom:7px;
        letter-spacing:-.2px;
    }

    .why-list li::before{
        width:15px;
        height:15px;

        font-size:8px;

        margin-right:6px;
    }


    /* LINK */

    .why-card-content a{
        font-size:11px;
    }
}

/* =====================================================
   SECTION 4 — PORTFOLIO RESPONSIVE
===================================================== */


/* =====================================================
   TABLET — 900px AND BELOW
===================================================== */

@media (max-width:900px){

    .portfolio{
        padding:30px 0 28px;
    }

    /* HEADER */

    .portfolio-header{
        width:90%;
        max-width:650px;
        margin:0 auto 22px;
    }

    .portfolio .section-tag{
        padding:7px 18px;
        font-size:12px;
        margin-bottom:8px;
    }

    .portfolio-header h2{
        font-size:38px;
        line-height:1.12;
        letter-spacing:-1px;
        margin-bottom:10px;
    }

    .portfolio-header p{
        max-width:560px;
        font-size:14px;
        line-height:1.6;
    }


    /* GRID */

    .portfolio-grid{
        width:92%;
        max-width:760px;

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

        gap:14px;
    }


    /* CARD */

    .portfolio-card{
        min-width:0;
        border-radius:20px;
    }

    .portfolio-image{
        height:auto;
        aspect-ratio:16 / 9;
        padding:10px;
    }

    .portfolio-image img{
        width:100%;
        height:100%;

        object-fit:cover;
        object-position:top;

        border-radius:14px;
    }

    .portfolio-content{
        padding:2px 14px 16px;
    }

    .portfolio-category{
        font-size:12px;
        margin-bottom:6px;
    }

    .portfolio-content h3{
        font-size:17px;
        line-height:1.3;
        margin-bottom:6px;
    }

    .portfolio-content p{
        font-size:13px;
        line-height:1.55;
        margin-bottom:12px;
    }

    .portfolio-footer{
        gap:10px;
    }

    .portfolio-badge{
        gap:7px;
    }

    .portfolio-badge img{
        width:28px;
        height:28px;
    }

    .portfolio-badge span{
        font-size:11px;
    }

    .portfolio-footer a{
        font-size:12px;
    }


    /* BUTTON */

    .portfolio-btn{
        margin-top:22px;
    }

    .portfolio-btn a{
        padding:15px 34px;
        font-size:15px;
        border-radius:14px;
    }
}



/* =====================================================
   MOBILE — 767px AND BELOW
===================================================== */

@media (max-width:767px){

    .portfolio{
        padding:26px 0 26px;
    }


    /* HEADER */

    .portfolio-header{
        width:92%;
        margin:0 auto 18px;
    }

    .portfolio .section-tag{
        padding:7px 16px;
        font-size:11px;
        margin-bottom:8px;
    }

    .portfolio-header h2{
        max-width:460px;

        font-size:32px;
        line-height:1.12;
        letter-spacing:-.8px;

        margin:0 auto 10px;
    }

    .portfolio-header p{
        max-width:440px;

        font-size:13px;
        line-height:1.55;
    }


    /* KEEP 2 CARDS PER ROW */

    .portfolio-grid{
        width:92%;

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

        gap:10px;
    }

 

    /* CARD */

    .portfolio-card{
        min-width:0;
        border-radius:17px;
    }

    .portfolio-image{
        width:100%;
        height:auto;

        aspect-ratio:16 / 9;

        padding:7px;
    }

    .portfolio-image img{
        width:100%;
        height:100%;

        object-fit:cover;
        object-position:top;

        border-radius:11px;
    }


    /* CONTENT */

    .portfolio-content{
        min-width:0;
        padding:3px 10px 12px;
    }

    .portfolio-category{
        font-size:10px;
        line-height:1.25;
        letter-spacing:-.2px;

        margin-bottom:5px;
    }

    .portfolio-content h3{
        font-size:15px;
        line-height:1.25;

        margin-bottom:6px;
    }

    .portfolio-content p{
        font-size:11.5px;
        line-height:1.45;

        margin-bottom:10px;
    }


    /* FOOTER
       Stack badge + link so they never overlap
    */

    .portfolio-footer{
        margin-top:auto;

        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .portfolio-badge{
        width:auto;

        gap:5px;
        padding:4px 6px;

        border-radius:9px;
    }

    .portfolio-badge img{
        width:24px;
        height:24px;
        flex-shrink:0;
    }

    .portfolio-badge span{
        font-size:9.5px;
        line-height:1.2;
    }

    .portfolio-footer a{
        font-size:11px;
        line-height:1.25;
    }


    /* BUTTON */

    .portfolio-btn{
        width:92%;
        margin:20px auto 0;
    }

    .portfolio-btn a{
        width:100%;

        padding:15px 20px;

        font-size:14px;
        border-radius:13px;
    }


    /* REMOVE MOBILE HOVER MOVEMENT */

    .portfolio-card:hover{
        transform:none;
    }
}



/* =====================================================
   SMALL MOBILE — 480px AND BELOW
===================================================== */

@media (max-width:480px){

    .portfolio{
        padding:12px 0 12px;
    }


    /* HEADER */

    .portfolio-header{
        width:92%;
        margin-bottom:17px;
    }

    .portfolio-header h2{
        font-size:29px;
        line-height:1.1;
        letter-spacing:-.7px;
        max-width: 350px;
    }

    .portfolio-header p{
        font-size:12.5px;
        line-height:1.55;
        max-width: 340px;
    }


    /* 2 CARDS STILL */

    .portfolio-grid{
        width:94%;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:8px;
        
        
    }
.portfolio-card:last-child:nth-child(odd){
    width:calc((100% - 8px) / 2);
}

    /* IMAGE */

    .portfolio-image{
        padding:6px;
        aspect-ratio:16 / 9;
    }


    /* CONTENT */

    .portfolio-content{
        padding:3px 9px 11px;
    }

    .portfolio-category{
        font-size:9px;
    }

    .portfolio-content h3{
        font-size:14px;
        line-height:1.22;
    }

    .portfolio-content p{
        font-size:10.5px;
        line-height:1.42;
    }


    /* FOOTER */

    .portfolio-badge{
        padding:3px 5px;
    }

    .portfolio-badge img{
        width:22px;
        height:22px;
    }

    .portfolio-badge span{
        font-size:9px;
    }

    .portfolio-footer a{
        font-size:10.5px;
    }


    /* BUTTON */

    .portfolio-btn{
        width:50%;
        margin-top:18px;

         
    }

    .portfolio-btn a{
        padding:14px 18px;
        font-size:12px;
        
    }
}

/* =====================================================
   SECTION 5 — TESTIMONIALS RESPONSIVE
===================================================== */


/* =====================================================
   TABLET — 900px AND BELOW
===================================================== */

@media (max-width:900px){

    .testimonials{
        padding:30px 0;
    }

    /* HEADER */

    .testimonials-header{
        width:90%;
        max-width:650px;
        margin:0 auto 22px;
    }

    .testimonials .section-tag{
        padding:7px 18px;
        font-size:12px;
        margin-bottom:8px;
    }

    .testimonials-header h2{
        font-size:38px;
        line-height:1.12;
        letter-spacing:-1px;
        margin-bottom:10px;
    }

    /* IMPORTANT:
       Desktop margin: 0 140px remove on tablet/mobile
    */
    .testimonials-header p{
        max-width:560px;
        margin:0 auto;
        font-size:14px;
        line-height:1.6;
    }


    /* TESTIMONIAL CARDS */

    .testimonials-grid{
        width:92%;
        max-width:760px;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:14px;
    }

    .testimonial-card{
        min-width:0;
        padding:16px;
        border-radius:20px;
    }

    .testimonial-top{
        margin-bottom:18px;
    }

    .testimonial-user{
        gap:12px;
    }

    .testimonial-user img{
        width:62px;
        height:62px;
    }

    .testimonial-user h4{
        font-size:16px;
        margin-bottom:4px;
    }

    .testimonial-user span{
        font-size:13px;
    }

    .quote-icon{
        width:30px;
    }

    .testimonial-text{
        font-size:14px;
        line-height:1.65;
        min-height:120px;
        margin-bottom:8px;
    }

    .testimonial-stars{
        padding-top:12px;
        font-size:22px;
        letter-spacing:3px;
    }


    /* CENTER ODD LAST CARD */

    .testimonial-card:last-child:nth-child(odd){
        grid-column:1 / -1;
        width:calc((100% - 14px) / 2);
        justify-self:center;
    }


    /* STATS */

    .testimonial-stats{
        width:92%;
        max-width:760px;
        margin:20px auto 0;

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

        border-radius:18px;
    }

    .stat-item{
        padding:14px;
        gap:12px;
    }

    .stat-item img{
        width:50px;
        height:50px;
    }

    .stat-item h3{
        font-size:19px;
        margin:0 0 3px;
    }

    .stat-item span{
        font-size:13px;
    }

    /* Remove desktop vertical separators */

    .stat-item:not(:last-child)::after{
        display:none;
    }
}



/* =====================================================
   MOBILE — 767px AND BELOW
===================================================== */

@media (max-width:767px){

    .testimonials{
        padding:26px 0;
    }


    /* HEADER */

    .testimonials-header{
        width:92%;
        margin:0 auto 18px;
    }

    .testimonials .section-tag{
        padding:7px 16px;
        font-size:11px;
        margin-bottom:8px;
    }

    .testimonials-header h2{
        font-size:32px;
        line-height:1.12;
        letter-spacing:-.8px;
        margin-bottom:10px;
    }

    .testimonials-header p{
        width:100%;
        max-width:440px;
        margin:0 auto;

        font-size:13px;
        line-height:1.55;
    }


    /* CARDS — 2 PER ROW */

    .testimonials-grid{
        width:92%;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
    }

    .testimonial-card{
        min-width:0;
        padding:12px;
        border-radius:17px;
    }


    /* USER */

    .testimonial-top{
        display:block;
        margin-bottom:12px;
    }

    .testimonial-user{
        display:block;
        text-align:center;
    }

    .testimonial-user img{
        width:58px;
        height:58px;
        margin:0 auto 8px;
    }

    .testimonial-user h4{
        font-size:14px;
        line-height:1.25;
        margin-bottom:3px;
    }

    .testimonial-user span{
        display:block;
        font-size:10.5px;
        line-height:1.3;
    }

    /* Quote isn't useful in narrow card */

    .quote-icon{
        display:none;
    }


    /* REVIEW TEXT */

    .testimonial-text{
        font-size:11.5px;
        line-height:1.5;

        min-height:0;

        margin-bottom:10px;
    }

    .testimonial-stars{
        padding-top:9px;

        font-size:16px;
        letter-spacing:1px;

        white-space:nowrap;
    }


    /* THIRD CARD CENTER */

    .testimonial-card:last-child:nth-child(odd){
        grid-column:1 / -1;

        width:calc((100% - 10px) / 2);

        justify-self:center;
    }


    /* STATS — 2 x 2 */

    .testimonial-stats{
        width:92%;

        margin:18px auto 0;

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

        border-radius:16px;
    }

    .stat-item{
        min-width:0;

        padding:12px 10px;

        gap:9px;
    }

    .stat-item img{
        width:40px;
        height:40px;
        flex-shrink:0;
    }

    .stat-item h3{
        font-size:17px;
        line-height:1.2;

        margin:0 0 2px;
    }

    .stat-item span{
        display:block;

        font-size:10.5px;
        line-height:1.3;
    }


    /* MOBILE HOVER MOVEMENT OFF */

    .testimonial-card:hover,
    .testimonial-stats:hover{
        transform:none;
    }

    .testimonial-card:hover .testimonial-stars{
        letter-spacing:1px;
        transform:none;
    }


    /* BACKGROUND DECORATION SMALLER */

    .testimonials::after{
        width:80px;
        height:80px;

        left:15px;
        top:80px;

        background-size:14px 14px;
    }
}



/* =====================================================
   SMALL MOBILE — 480px AND BELOW
===================================================== */

@media (max-width:480px){

    .testimonials{
        padding:24px 0;
    }


    /* HEADER */

    .testimonials-header{
        width:92%;
        margin-bottom:17px;
    }

    .testimonials-header h2{
        font-size:29px;
        line-height:1.1;
    }

    .testimonials-header p{
        font-size:12.5px;
        line-height:1.5;
        max-width:320px;
    }


    /* CARDS */

    .testimonials-grid{
        width:94%;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:8px;
    }

    .testimonial-card{
        padding:10px;
        border-radius:15px;
    }

    .testimonial-user img{
        width:54px;
        height:54px;
    }

    .testimonial-user h4{
        font-size:13px;
    }

    .testimonial-user span{
        font-size:9.5px;
    }

    .testimonial-text{
        font-size:10.5px;
        line-height:1.45;
    }

    .testimonial-stars{
        font-size:14px;
        letter-spacing:0;
    }


    /* CENTER THIRD CARD */

    .testimonial-card:last-child:nth-child(odd){
        width:calc((100% - 8px) / 2);
    }


    /* STATS */

    .testimonial-stats{
        width:94%;
        grid-template-columns:repeat(2, minmax(0,1fr));
        margin-top:16px;
    }

    .stat-item{
        padding:10px 8px;
        gap:7px;
    }

    .stat-item img{
        width:36px;
        height:36px;
    }

    .stat-item h3{
        font-size:16px;
    }

    .stat-item span{
        font-size:9.5px;
    }
}

/* =====================================================
   SECTION 6 — CTA RESPONSIVE
   Add below the existing Section 6 CSS
===================================================== */
/* =====================================================
   CTA — SMALL LAPTOP / LARGE TABLET
   901px TO 1024px
===================================================== */

@media (min-width:901px) and (max-width:1024px){

    .cta{
        padding:34px 0 28px;
    }

    .cta-container{
        width:92%;
        max-width:920px;

        /* Desktop 2 columns ko yahan hi stop karo */
        grid-template-columns:1fr;

        gap:28px;
    }


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

    .cta-left{
        text-align:center;
    }

    .cta-tag{
        padding:10px 22px;
        font-size:13px;
    }

    .cta-left h2{
        font-size:44px;
        line-height:1.06;
        letter-spacing:-1.5px;

        margin:17px auto 14px;

        max-width:650px;
    }

    .cta-left > p{
        max-width:650px;

        margin:0 auto 25px;

        font-size:16px;
        line-height:1.6;
    }


    /* =========================
       BUTTONS
    ========================= */

    .cta-buttons{
        justify-content:center;

        gap:14px;

        margin-bottom:30px;
    }

    .btn-primary,
    .btn-secondary{
        padding:14px 28px;

        font-size:15px;

        border-radius:13px;
    }


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

    .cta-features{
        max-width:720px;

        margin:0 auto 15px;

        display:grid;

        grid-template-columns:
        repeat(3, minmax(0,1fr));

        gap:16px;
    }

    .feature{
        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        position:relative;

        z-index:5;
    }

    .feature img{
        width:50px;
        height:50px;

        margin-bottom:7px;
    }

    .feature h4{
        font-size:14px;

        margin-bottom:3px;
    }

    .feature p{
        width:auto;

        max-width:160px;

        margin:0 auto;

        font-size:11px;

        line-height:1.45;
    }


    /* =========================
       DASHBOARD AREA
    ========================= */

    .cta-right{
        min-height:0;

        width:100%;

        max-width:820px;

        margin:15px auto 0;

        aspect-ratio:16 / 9.8;

        overflow:visible;
    }

    .dashboard-wrapper{
        position:relative;

        width:100%;
        height:100%;
    }

    .dashboard-main{
        width:84%;
        max-width:none;
        height:auto;

        top:50%;
        left:50%;
        right:auto;

        border-radius:15px;

        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    .dashboard-main:hover{
        transform:
            translate(-50%,-50%)
            scale(1.01);
    }


    /* =========================
       BACKGROUND DECORATIONS
    ========================= */

    .dashboard-glow{
        width:85%;
        height:90%;

        right:7.5%;
    }

    .graph-bg{
        width:115%;

        right:-7%;

        top:8%;
    }

    .cta-right::after{
        width:115%;
        height:100%;

        right:-7%;
        top:0;
    }

    .cta-right::before{
        width:85%;
        height:90%;

        right:7%;
        top:5%;
    }

    .cta-line{
        width:65%;

        left:22%;

        bottom:30px;
    }

}

/* =====================================================
   TABLET — 900px AND BELOW
===================================================== */

@media (max-width:900px){

    .cta{
        padding:40px 0 30px;
    }

    .cta-container{
        width:90%;
        max-width:760px;

        grid-template-columns:1fr;
        gap:30px;
    }


    /* LEFT CONTENT */

    .cta-left{
        text-align:center;
    }

    .cta-tag{
        padding:9px 20px;
        font-size:13px;
    }

    .cta-left h2{
        font-size:42px;
        line-height:1.08;
        letter-spacing:-1.5px;

        margin:16px 0 14px;
    }

    .cta-left > p{
        max-width:600px;
        margin:0 auto 24px;

        font-size:15px;
        line-height:1.65;
    }


    /* BUTTONS */

    .cta-buttons{
        justify-content:center;
        gap:12px;

        margin-bottom:28px;
    }

    .btn-primary,
    .btn-secondary{
        padding:14px 24px;
        font-size:14px;
        border-radius:13px;
    }


    /* FEATURES */

    .cta-features{
        max-width:700px;
        margin:0 auto;

        display:grid;
        grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;;
    margin-bottom:12px;
    }

    .feature{
        display:flex;
        flex-direction:column;
        align-items:center;

        text-align:center;
          position:relative;
    z-index:5;
    }

    .feature img{
        width:46px;
        height:46px;
        margin-bottom:7px;
    }

    .feature h4{
        font-size:14px;
        margin-bottom:3px;
    }

    .feature p{
        width:auto;
        max-width:130px;

        font-size:10px;
        line-height:1.45;
        margin:0 auto;
    }


    /* DASHBOARD */

.cta-right{
    min-height:0;

    /* Dashboard ko features se neeche space mile */
    margin-top:22px;

    /* slightly smaller dashboard area */
    aspect-ratio:16 / 10;

    overflow:visible;
}

.dashboard-wrapper{
    position:relative;
    width:100%;
    height:100%;
}

.dashboard-main{
    /* 96% se kam — side breathing space */
    width:88%;
    max-width:none;
    height:auto;

    top:50%;
    left:50%;
    right:auto;

    border-radius:12px;

    transform:
        translate(-50%,-50%)
        rotate(0deg);
}

.dashboard-main:hover{
    transform:translate(-50%,-50%);
}


    /* DECORATIONS */

    .dashboard-glow{
        width:90%;
        height:90%;

        right:5%;
    }

    .graph-bg{
        width:130%;
        right:-15%;
        top:10%;
    }

    .cta-right::after{
        width:130%;
        height:100%;

        right:-15%;
        top:0;
    }

    .cta-right::before{
        width:90%;
        height:90%;

        right:5%;
        top:5%;
    }

    .cta-line{
        width:70%;
        left:20%;
        bottom:30px;
    }
}



/* =====================================================
   MOBILE — 767px AND BELOW
===================================================== */

@media (max-width:767px){

    .cta{
        padding:30px 0 22px;
    }

    .cta-container{
        width:92%;
        gap:22px;
    }


    /* TEXT */

    .cta-tag{
        padding:8px 16px;
        font-size:11px;
    }

    .cta-left h2{
        font-size:34px;
        line-height:1.08;
        letter-spacing:-1px;

        margin:13px 0 11px;
    }

    .cta-left > p{
        max-width:460px;

        font-size:13px;
        line-height:1.55;

        margin-bottom:18px;
    }


    /* BUTTONS */

    .cta-buttons{
        margin-bottom:22px;
        gap:9px;
        
    }

    .btn-primary,
    .btn-secondary{
        padding:4px 8px;

        font-size:16px;

        border-radius:11px;
        width:94%;
    }


    /* FEATURES */

    .cta-features{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:8px;
        margin-bottom:10px;
    }

   .feature img{
    width:46px;
    height:46px;
    margin-bottom:7px;
}

.feature h4{
    font-size:12px;
    line-height:1.25;
    margin:0;
}

/* Mobile par feature description hide */
.feature p{
    display:none;
}


    /* DASHBOARD */

    .cta-right{
        min-height:0;
        aspect-ratio:16 / 10;

        margin-top:8px;

        overflow:visible;
    }

    .dashboard-main{
        width:96%;
        height:450px;

        top:45%;
        left:50%;
        right:auto;

        border-radius:13px;

        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    .dashboard-main:hover{
        transform:translate(-50%,-50%);
    }


    /* REDUCE DECORATION ON MOBILE */

    .graph-bg{
        width:125%;
        right:-12%;
        top:8%;

        opacity:.25;
    }

    .dashboard-glow{
        width:100%;
        height:100%;

        right:0;

        filter:blur(40px);
    }

    .dashboard-grid{
        background-size:35px 35px;
        opacity:.22;
    }

    .cta-dot-grid{
        width:250px;
        height:220px;

        right:-40px;
        top:20px;

        background-size:16px 16px;

        opacity:.18;
    }

    .cta-dot-grid-left{
        width:220px;
        height:180px;

        left:-50px;
        bottom:0;

        background-size:16px 16px;

        opacity:.12;
    }

    .cta-right::after{
        width:125%;
        height:100%;

        right:-12%;
        top:0;

        opacity:.22;
    }

    .cta-right::before{
        width:100%;
        height:100%;

        right:0;
        top:0;

        filter:blur(45px);
    }

    .cta-line{
        display:none;
    }
}



/* =====================================================
   SMALL MOBILE — 480px AND BELOW
===================================================== */

@media (max-width:480px){

    .cta{
        padding:26px 0 20px;
    }

    .cta-container{
        width:94%;
        gap:18px;
    }


    /* HEADER */

    .cta-tag{
        padding:7px 14px;
        font-size:10px;
    }

    .cta-left h2{
        font-size:30px;
        line-height:1.07;

        margin:12px 0 10px;
    }

    .cta-left > p{
        width:80%;

        font-size:12px;
        line-height:1.5;

        margin-bottom:16px;
    }


    /* BUTTONS */

    .cta-buttons{
    gap:8px;
    margin-bottom:6px;
}

    .btn-primary,
.btn-secondary{
    padding:10px 10px;
    font-size:14px;
    border-radius:10px;
    width:37%;
}

    /* FEATURES */

    .cta-features{
        width:84%;

        grid-template-columns:repeat(3, minmax(0,1fr));

        gap:2px;
    }

    .feature img{
        width:64px;
        height:64px;
        margin-bottom:1px;
    }

    .feature h4{
        font-size:10px;
    }

    .feature p{
        font-size:8.5px;
        line-height:1.35;
    }


    /* DASHBOARD */

    .cta-right{
        width:100%;

        aspect-ratio:16 / 10;

        margin-top:0;
    }

    .dashboard-main{
        width:98%;

        border-radius:10px;

        transform:translate(-50%,-50%);
    }


    /* KEEP BACKGROUND CLEAN */

    .graph-bg{
        width:130%;
        opacity:.20;
    }

    .cta-right::after{
        opacity:.16;
    }

    .dashboard-grid{
        opacity:.15;
    }
}


/* =====================================================
   SECTION 7 — TABLET
   768px TO 1024px
===================================================== */

@media (min-width:768px) and (max-width:1024px){

    .contact-section{
        padding:20px 0 16px;
    }

    .contact-container{
        width:92%;
        max-width:900px;
        margin:auto;

        /* IMPORTANT:
           Desktop ke 2 columns ko tablet par 1 column */
        grid-template-columns:1fr;

        gap:18px;
    }


    /* =========================
       CARDS
    ========================= */

    .contact-left,
    .contact-right{
        padding:24px 26px;
        border-radius:24px;
    }


    /* =========================
       LEFT CARD
    ========================= */

    .contact-tag{
        padding:8px 14px;
        font-size:13px;
        margin-bottom:12px;
    }

    .contact-tag img{
        width:17px;
    }


    /* HEADING */

    .contact-left h2{
        font-size:40px;
        line-height:1.06;

        max-width:480px;

        margin:0 0 12px;

        position:relative;
        z-index:2;
    }


    /* INTRO */

    .contact-left > p{
        font-size:14px;
        line-height:1.65;

        max-width:470px;

        margin:0 0 20px;

        position:relative;
        z-index:2;
    }


    /* =========================
       ILLUSTRATION
    ========================= */

    .contact-illustration{
        width:220px;

        right:30px;
        top:38px;

        opacity:.95;

        z-index:1;
    }


    /* =========================
       CONTACT INFORMATION
    ========================= */

    .contact-info{
        grid-template-columns:1fr 1fr;

        gap:12px 24px;

        margin-bottom:16px;

        position:relative;
        z-index:2;
    }

    .info-box{
        gap:12px;

        padding:12px 0;

        min-width:0;
    }

    .info-box img{
        width:42px;
        height:42px;
    }

    .info-box h4{
        font-size:14px;

        margin-bottom:3px;
    }

    .info-box p,
    .info-box a{
        font-size:13px;
        line-height:1.55;

        overflow-wrap:anywhere;
    }


    /* =========================
       SOCIAL LINKS
    ========================= */

    .social-links{
        gap:14px;

        padding-top:4px;

        position:relative;
        z-index:2;
    }

    .social-links h5{
        font-size:14px;
        margin-right:8px;
    }

    .social-links a{
        width:46px;
        height:46px;

        border-radius:12px;
    }

    .social-links img{
        width:42px;
    }


    /* =========================
       FORM CARD
    ========================= */

    .contact-right{
        width:100%;
    }

    .form-grid{
        grid-template-columns:1fr 1fr;

        gap:18px;
    }

    .input-group{
        margin-bottom:16px;
    }

    .input-group label{
        font-size:13px;

        margin-bottom:7px;
    }

    .input-group input,
    .input-group select,
    .input-group textarea{
        width:100%;

        padding:11px 13px;

        font-size:13px;

        border-radius:12px;
    }

    .input-group textarea{
        min-height:125px;
    }


    /* BUTTON */

    .send-btn{
        padding:13px;

        font-size:14px;

        border-radius:12px;
    }

}

/* =====================================
   SECTION 7 - CONTACT
   TABLET / MOBILE
===================================== */
@media (max-width: 767px)   {
.contact-section{
    padding:16px 0 12px;
}

.contact-container{
    width:94%;
    grid-template-columns:1fr;
    gap:14px;
}

/* CARDS */
.contact-left,
.contact-right{
    padding:18px;
    border-radius:22px;
}

/* TAG */
.contact-tag{
    padding:7px 12px;
    font-size:12px;
    margin-bottom:10px;
}

.contact-tag img{
    width:16px;
}

/* HEADING */
.contact-left h2{
    font-size:32px;
    line-height:1.08;
    max-width:390px;
    margin:0 0 10px;
}

/* INTRO TEXT */
.contact-left > p{
    font-size:13px;
    line-height:1.6;
    max-width:390px;
    margin:0 0 18px;
}

/* ILLUSTRATION */
.contact-illustration{
    width:175px;
    right:8px;
    top:28px;
    opacity:.95;
}

/* CONTACT DETAILS */
.contact-info{
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
    margin-bottom:14px;
}

.info-box{
    gap:10px;
    padding:10px 0;
    min-width:0;
}

.info-box img{
    width:38px;
    height:38px;
}

.info-box h4{
    font-size:13px;
    margin-bottom:3px;
}

.info-box p,
.info-box a{
    font-size:12px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

/* SOCIAL */
.social-links{
    gap:12px;
    padding-top:4px;
}

.social-links h5{
    font-size:13px;
    margin-right:6px;
}

.social-links a{
    width:42px;
    height:42px;
    border-radius:11px;
}

.social-links img{
    width:38px;
}

/* FORM */
.form-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.input-group{
    margin-bottom:14px;
}

.input-group label{
    font-size:12px;
    margin-bottom:6px;
}

.input-group input,
.input-group select,
.input-group textarea{
    padding:10px 11px;
    font-size:12px;
    border-radius:11px;
}

.send-btn{
    padding:12px;
    font-size:13px;
    border-radius:11px;
}
}
/* =====================================
   SECTION 7 - CONTACT
   SMALL MOBILE
===================================== */
@media (max-width:480px){
.contact-section{
    padding:14px 0 10px;
}

.contact-container{
    width:94%;
    display:block;
}

/* CARDS */
.contact-left,
.contact-right{
    padding:16px;
    border-radius:20px;
}

.contact-right{
    margin-top:12px;
}

/* TAG */
.contact-tag{
    font-size:11px;
    padding:6px 11px;
    margin-bottom:9px;
}

/* HEADING */
.contact-left h2{
    font-size:28px;
    line-height:1.08;
    letter-spacing:-.7px;
    max-width:100%;
    margin:0 0 9px;
}

/* DESCRIPTION */
.contact-left > p{
    font-size:12px;
    line-height:1.55;
    max-width:100%;
    padding-right:0;
    margin-bottom:14px;
}

/* Illustration ko heading se hata kar
   smaller decorative element bana do */
.contact-illustration{
    width:125px;
    right:-5px;
    top:38px;
    opacity:.30;
}

/* CONTACT INFO
   2 squeezed columns -> 1 clean column */
.contact-info{
    grid-template-columns:1fr;
    gap:0;
    margin-bottom:10px;
}

.info-box{
    width:100%;
    gap:12px;
    padding:10px 0;
    align-items:center;
}

.info-box img{
    width:38px;
    height:38px;
}

.info-box h4{
    font-size:13px;
}

.info-box p,
.info-box a{
    font-size:12px;
    line-height:1.45;
    max-width:none;
}

/* SOCIAL */
.social-links{
    gap:10px;
    padding-top:8px;
}

.social-links h5{
    font-size:13px;
    margin-right:auto;
}

.social-links a{
    width:40px;
    height:40px;
}

.social-links img{
    width:36px;
}

/* FORM */
.form-grid{
    grid-template-columns:1fr;
    gap:0;
}

.input-group{
    margin-bottom:12px;
}

.input-group input,
.input-group select,
.input-group textarea{
    font-size:12px;
    padding:10px;
}

.send-btn{
    font-size:13px;
    padding:12px;
}
}

/* =====================================================
   FOOTER — TABLET
   768px TO 1024px
   Desktop-style horizontal layout
===================================================== */

@media (min-width:768px) and (max-width:1024px){

    .footer{
        padding:24px 0 12px;
    }

    .footer-container{
        width:94%;
        max-width:960px;

        /* Keep desktop-style horizontal footer */
        grid-template-columns:
            1.45fr
            .72fr
            .72fr
            1.05fr;

        gap:24px;

        align-items:start;

        padding-bottom:18px;
    }


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

    .footer-logo{
        width:76px;
        margin-bottom:8px;
    }

    .footer-about p{
        max-width:300px;

        font-size:13px;
        line-height:1.65;

        margin-bottom:14px;
    }


    /* BADGES */

    .footer-badges{
        display:grid;

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

        gap:7px;

        width:100%;
    }

    .badge{
        width:100%;
        min-width:0;

        padding:7px 6px;

        gap:6px;

        border-radius:11px;
    }

    .badge img{
        width:27px;
        flex-shrink:0;
    }

    .badge span{
        font-size:10px;
        line-height:1.2;
    }


    /* =========================
       LINKS
    ========================= */

    .footer-links h3,
    .footer-connect h3{
        font-size:16px;

        margin-bottom:12px;
    }

    .footer-links h3::after,
    .footer-connect h3::after{
        width:44px;
    }

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

    .footer-links a{
        font-size:12px;
        line-height:1.35;
    }


    /* =========================
       CONNECT
    ========================= */

    .footer-connect{
        gap:11px;
        min-width:0;
    }

    .connect-item{
        gap:8px;
        min-width:0;
    }

    .connect-item img{
        width:18px;
        flex-shrink:0;
    }

    .connect-item span{
        font-size:11px;
        line-height:1.4;

        overflow-wrap:anywhere;
    }


    /* =========================
       WORLD MAP
       Put below complete footer
    ========================= */

    .footer-world{
        grid-column:1 / -1;

        margin-top:4px;

        min-height:190px;
    }

    .world-map{
        width:100%;
        max-width:620px;
    }

    .world-logo{
        width:90px;
    }


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

    .footer-bottom{
        width:94%;
        max-width:960px;

        padding-top:8px;
    }

    .footer-bottom p{
        font-size:12px;
    }

}

/* =====================================================
   FOOTER — MOBILE
   767PX AND BELOW
===================================================== */

@media (max-width:767px){

    .footer{
        padding:18px 0 10px;
    }

    .footer-container{
        width:92%;
        max-width:none;
        margin:0 auto;

        display:grid;

        /* Mobile structure */
        grid-template-columns:1fr 1fr;

        gap:28px 20px;

        align-items:start;

        padding-bottom:14px;
    }


    /* =================================
       ABOUT — FULL WIDTH
    ================================= */

    .footer-about{
        grid-column:1 / -1;
    }

    .footer-logo{
        width:80px;
        margin-bottom:7px;
    }

    .footer-about p{
        max-width:100%;

        font-size:13px;
        line-height:1.65;

        margin-bottom:14px;
    }


    /* =================================
       BADGES — 3 IN ONE ROW
    ================================= */

    .footer-badges{
        width:100%;

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

        gap:8px;
    }

    .badge{
        width:100%;
        min-width:0;

        padding:8px 6px;

        gap:6px;

        border-radius:11px;
    }

    .badge img{
        width:28px;
        flex-shrink:0;
    }

    .badge span{
        font-size:10px;
        line-height:1.2;
    }


    /* =================================
       SERVICES + COMPANY
       TWO COLUMNS
    ================================= */

    .footer-links{
        display:block;
        min-width:0;
    }

    .footer-links h3,
    .footer-connect h3{
        font-size:17px;
        margin-bottom:13px;
    }

    .footer-links h3::after,
    .footer-connect h3::after{
        width:46px;
    }

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

    .footer-links a{
        font-size:13px;
        line-height:1.4;
    }


    /* =================================
       CONNECT — FULL WIDTH
    ================================= */

    .footer-connect{
        grid-column:1 / -1;

        display:flex;
        flex-direction:column;

        width:100%;

        gap:12px;
    }

    .connect-item{
        display:flex;

        align-items:center;

        gap:11px;

        min-width:0;
    }

    .connect-item img{
        width:20px;
        flex-shrink:0;
    }

    .connect-item span{
        font-size:12px;
        line-height:1.45;

        overflow-wrap:anywhere;
    }


    /* =================================
       WORLD MAP — FULL WIDTH
    ================================= */

    .footer-world{
        grid-column:1 / -1;

        width:100%;

        min-height:170px;

        margin-top:0;

        display:flex;
        justify-content:center;
        align-items:center;
    }

    .world-map{
        width:100%;
        max-width:430px;

        opacity:.45;
    }

    .world-logo{
        width:82px;
    }


    /* =================================
       COPYRIGHT
    ================================= */

    .footer-bottom{
        width:92%;

        flex-direction:column;

        gap:5px;

        text-align:center;

        padding-top:8px;
    }

    .footer-bottom p{
        font-size:12px;
        line-height:1.4;

        margin:0;
    }

}
/*=====================================
FOOTER RESPONSIVE - 425PX
======================================*/

@media (max-width:425px){

    .footer{
        padding:12px 0 8px;
    }

    .footer-container{
        width:92%;
        gap:26px;
        padding-bottom:8px;
    }

    /* LOGO + DESCRIPTION */

    .footer-logo{
        width:74px;
        margin-bottom:6px;
    }

    .footer-about p{
        font-size:13px;
        line-height:1.7;
        margin-bottom:12px;
    }

    /* KEEP 3 BADGES IN ONE ROW */

    .footer-badges{
        gap:7px;
    }

    .badge{
        padding:7px 6px;
        gap:5px;
        border-radius:12px;
    }

    .badge img{
        width:27px;
    }

    .badge span{
        font-size:10px;
        line-height:1.2;
    }

    /* SERVICES + COMPANY */

    .footer-links h3,
    .footer-connect h3{
        font-size:17px;
        margin-bottom:12px;
    }

    .footer-links h3::after,
    .footer-connect h3::after{
        width:48px;
    }

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

    .footer-links a{
        font-size:13px;
    }

    /* CONNECT */

    .footer-connect{
        gap:12px;
    }

    .connect-item{
        gap:11px;
    }

    .connect-item img{
        width:20px;
    }

    .connect-item span{
        font-size:12px;
        line-height:1.45;
    }

    /* WORLD MAP
       Important fix:
       Instagram ke baad huge empty gap khatam */

   .footer-world{
    margin-top:-4px;
    min-height:150px;
    height:auto;
}

    .world-map{
        width:100%;
        max-width:390px;
        opacity:.45;
    }

    .world-logo{
        width:78px;
    }

    /* COPYRIGHT */

    .footer-bottom{
        width:92%;
        padding-top:8px;
        gap:5px;
    }

    .footer-bottom p{
        font-size:11px;
        line-height:1.4;
    }

}