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

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

html{

scroll-behavior:smooth;

}

body{

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

background:#ffffff;

color:#222222;

overflow-x:hidden;

line-height:1.7;

}



/* ========================================= */
/* CONTAINER */
/* ========================================= */

.container{

width:92%;

max-width:1280px;

margin:auto;

}



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

a{

text-decoration:none;

transition:.3s;

}



/* ========================================= */
/* HEADER */
/* ========================================= */

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

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

backdrop-filter:blur(16px);

box-shadow:

0 2px 20px rgba(0,0,0,.06);

}



/* ========================================= */
/* NAVBAR */
/* ========================================= */

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}



/* ========================================= */
/* LOGO */
/* ========================================= */

.logo{

display:flex;

align-items:center;

gap:15px;

font-size:30px;

font-weight:700;

color:#0F4C81;

}

.logo img{

width:52px;

height:52px;

object-fit:contain;

}



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

.menu{

display:flex;

align-items:center;

gap:35px;

}

.menu a{

color:#222;

font-weight:600;

font-size:16px;

position:relative;

}

.menu a:hover{

color:#0F4C81;

}

.menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#0F4C81;

transition:.3s;

}

.menu a:hover::after{

width:100%;

}



/* ========================================= */
/* CALL BUTTON */
/* ========================================= */

.call-btn{

padding:14px 26px;

background:#ff6b00;

border-radius:10px;

font-weight:700;

color:#ffffff;

box-shadow:

0 8px 22px rgba(255,107,0,.22);

}

.call-btn:hover{

transform:translateY(-2px);

}



/* ========================================= */
/* HERO */
/* ========================================= */

.hero{

padding-top:140px;

padding-bottom:90px;

background:

linear-gradient(

135deg,

#eef5ff,

#ffffff

);

}



/* ========================================= */
/* HERO GRID */
/* ========================================= */

.hero-grid{

display:grid;

grid-template-columns:

1.05fr

.95fr;

gap:60px;

align-items:center;

}



/* ========================================= */
/* HERO TITLE */
/* ========================================= */

.hero h1{

font-size:62px;

font-weight:800;

line-height:1.08;

color:#0F4C81;

margin-bottom:25px;

}



/* ========================================= */
/* HERO TEXT */
/* ========================================= */

.hero p{

font-size:21px;

color:#555;

line-height:1.9;

margin-bottom:35px;

}



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

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.primary-btn{

background:#ff6b00;

padding:18px 34px;

border-radius:12px;

font-weight:700;

font-size:18px;

color:#ffffff;

box-shadow:

0 10px 25px rgba(255,107,0,.22);

}

.primary-btn:hover{

transform:translateY(-3px);

}

.secondary-btn{

background:#25D366;

padding:18px 34px;

border-radius:12px;

font-weight:700;

font-size:18px;

color:#ffffff;

box-shadow:

0 10px 25px rgba(37,211,102,.20);

}

.secondary-btn:hover{

transform:translateY(-3px);

}



/* ========================================= */
/* HERO STATS */
/* ========================================= */

.hero-stats{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

padding:18px 28px;

background:#ffffff;

border-radius:18px;

border:1px solid #edf2f7;

box-shadow:

0 10px 30px rgba(0,0,0,.07);

width:fit-content;

max-width:100%;

}

.stat-item{

display:flex;

align-items:center;

gap:8px;

font-size:16px;

font-weight:600;

color:#111111;

}

.divider{

width:1px;

height:22px;

background:#d6d6d6;

}



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

.hero-image{

text-align:center;

}

.desktop-hero{

width:100%;

max-width:600px;

border-radius:28px;

display:block;

margin:auto;

box-shadow:

0 20px 45px rgba(0,0,0,.15);

}

.mobile-hero{

display:none;

width:100%;

max-width:420px;

margin:auto;

border-radius:24px;

box-shadow:

0 20px 45px rgba(0,0,0,.15);

}



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

@media(max-width:991px){

.menu{

display:none;

}

.hero-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.desktop-hero{

display:none;

}

.mobile-hero{

display:block;

}

.hero-stats{

flex-direction:column;

align-items:flex-start;

gap:12px;

padding:18px;

}

.divider{

display:none;

}

}

@media(max-width:576px){

.logo{

font-size:22px;

}

.call-btn{

padding:12px 18px;

font-size:14px;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:34px;

}

}

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

.services-section{

padding:100px 0;

background:#ffffff;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.small-title{

display:inline-block;

padding:8px 18px;

background:#eef5ff;

color:#0F4C81;

border-radius:50px;

font-size:14px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:18px;

}

.section-title h2{

font-size:48px;

font-weight:800;

color:#0F4C81;

margin-bottom:18px;

}

.section-title p{

max-width:760px;

margin:auto;

font-size:19px;

line-height:1.8;

color:#666;

}



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

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(290px,1fr));

gap:30px;

}



/* ===================================================== */
/* SERVICE CARD */
/* ===================================================== */

.service-card{

display:flex;

flex-direction:column;

background:#ffffff;

border-radius:24px;

padding:32px;

border:1px solid #edf2f7;

box-shadow:

0 10px 35px rgba(0,0,0,.06);

transition:.35s;

height:100%;

}

.service-card:hover{

transform:translateY(-8px);

box-shadow:

0 18px 45px rgba(0,0,0,.10);

}



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

.service-image{

width:100%;

height:180px;

object-fit:contain;

margin-bottom:24px;

transition:.35s;

}

.service-card:hover .service-image{

transform:scale(1.05);

}



/* ===================================================== */
/* SERVICE TITLE */
/* ===================================================== */

.service-card h3{

font-size:28px;

font-weight:700;

color:#0F4C81;

margin-bottom:16px;

}



/* ===================================================== */
/* SERVICE DESCRIPTION */
/* ===================================================== */

.service-card p{

font-size:17px;

line-height:1.8;

color:#666;

min-height:122px;

}



/* ===================================================== */
/* PRICE */
/* ===================================================== */

.price{

margin-top:20px;

font-size:42px;

font-weight:800;

color:#ff6b00;

}



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

.card-buttons{

display:flex;

gap:14px;

margin-top:auto;

padding-top:24px;

}

.card-buttons a{

flex:1;

text-align:center;

padding:14px;

border-radius:10px;

font-size:16px;

font-weight:700;

transition:.3s;

}

.card-buttons a:first-child{

background:#eef5ff;

color:#0F4C81;

}

.card-buttons a:first-child:hover{

background:#dceaff;

}

.card-buttons a:last-child{

background:#ff6b00;

color:#ffffff;

}

.card-buttons a:last-child:hover{

background:#f55d00;

}



/* ===================================================== */
/* PRICING */
/* ===================================================== */

.pricing-section{

padding:100px 0;

background:#f8fbff;

}

.pricing-table{

overflow-x:auto;

margin-top:50px;

}

.pricing-table table{

width:100%;

border-collapse:collapse;

background:#ffffff;

border-radius:18px;

overflow:hidden;

box-shadow:

0 10px 30px rgba(0,0,0,.07);

}

.pricing-table th{

background:#0F4C81;

color:#ffffff;

padding:22px;

font-size:18px;

font-weight:700;

}

.pricing-table td{

padding:22px;

border-bottom:1px solid #edf2f7;

font-size:17px;

}

.pricing-table tr:hover{

background:#f5faff;

}

.pricing-note{

text-align:center;

margin-top:35px;

font-size:18px;

color:#444;

}



/* ===================================================== */
/* BRANDS */
/* ===================================================== */

.brands-section{

padding:100px 0;

background:#ffffff;

}

.brand-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:24px;

}

.brand-card{

background:#ffffff;

border-radius:22px;

padding:28px;

text-align:center;

border:1px solid #edf2f7;

box-shadow:

0 8px 25px rgba(0,0,0,.06);

transition:.35s;

}

.brand-card:hover{

transform:translateY(-8px);

box-shadow:

0 16px 40px rgba(0,0,0,.10);

}

.brand-card img{

width:72px;

height:72px;

object-fit:contain;

margin-bottom:18px;

}

.brand-card h3{

font-size:24px;

font-weight:700;

color:#0F4C81;

}



/* ===================================================== */
/* COVERAGE */
/* ===================================================== */

.coverage-section{

padding:100px 0;

background:#f8fbff;

}

.coverage-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:18px;

}

.coverage-grid div{

padding:20px;

background:#ffffff;

border-radius:14px;

font-weight:600;

border:1px solid #edf2f7;

transition:.3s;

}

.coverage-grid div:hover{

background:#0F4C81;

color:#ffffff;

transform:translateY(-4px);

}



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

.premium-cta{

padding:100px 0;

background:

linear-gradient(

135deg,

#0F4C81,

#1f78d7

);

}

.cta-box{

text-align:center;

color:#ffffff;

}

.cta-box h2{

font-size:52px;

font-weight:800;

margin-bottom:18px;

}

.cta-box p{

max-width:850px;

margin:auto;

font-size:20px;

line-height:1.9;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:40px;

}

.cta-buttons a{

padding:18px 34px;

border-radius:12px;

font-size:18px;

font-weight:700;

transition:.3s;

}

.cta-buttons a:first-child{

background:#ff6b00;

color:#ffffff;

}

.cta-buttons a:last-child{

background:#25D366;

color:#ffffff;

}

.cta-buttons a:hover{

transform:translateY(-3px);

}



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

@media(max-width:768px){

.section-title h2{

font-size:34px;

}

.service-card{

padding:24px;

}

.service-card h3{

font-size:24px;

}

.service-card p{

min-height:auto;

}

.price{

font-size:34px;

}

.cta-box h2{

font-size:36px;

}

.cta-box p{

font-size:18px;

}

}