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

.services-hero{

padding:180px 0 120px;

position:relative;

overflow:hidden;

background:linear-gradient(135deg,#081F4D 0%,#0E3A86 100%);

text-align:center;

}

.services-hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:rgba(216,166,74,.08);

top:-300px;

left:-250px;

filter:blur(20px);

}

.services-hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

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

bottom:-180px;

right:-180px;

}

.hero-badge{

display:inline-flex;

padding:10px 24px;

border-radius:999px;

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

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

color:#D8A64A;

font-weight:600;

margin-bottom:28px;

backdrop-filter:blur(15px);

}

.services-hero h1{

font-size:58px;

color:#fff;

margin-bottom:25px;

line-height:1.4;

font-weight:800;

}

.services-hero h1 span{

color:#D8A64A;

}

.services-hero p{

max-width:760px;

margin:auto;

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

font-size:18px;

line-height:2;

}



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

.services-section{

padding:110px 0;

background:#F8FAFD;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:#D8A64A;

font-weight:700;

font-size:18px;

}

.section-title h2{

margin:15px 0;

font-size:42px;

color:#0D2F6C;

}

.section-title p{

color:#666;

font-size:17px;

}



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

.services-grid{

display:grid;

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

gap:35px;

}



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

.service-card{

background:#fff;

padding:40px;

border-radius:28px;

position:relative;

overflow:hidden;

transition:.45s;

border:1px solid rgba(13,47,108,.08);

box-shadow:0 10px 40px rgba(0,0,0,.05);

}

.service-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(90deg,transparent,rgba(216,166,74,.12),transparent);

transition:.8s;

}

.service-card:hover::before{

left:100%;

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 60px rgba(13,47,108,.12);

border-color:#D8A64A;

}



/*==================================================
                ICON
==================================================*/

.service-icon{

width:82px;

height:82px;

border-radius:24px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#D8A64A,#F4CF79);

font-size:34px;

color:#082A63;

margin-bottom:28px;

transition:.4s;

}

.service-card:hover .service-icon{

transform:rotate(-8deg) scale(1.08);

}



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

.service-card h3{

font-size:28px;

margin-bottom:16px;

color:#0D2F6C;

}

.service-card p{

line-height:2;

color:#666;

margin-bottom:24px;

}



/*==================================================
                LIST
==================================================*/

.service-card ul{

display:grid;

gap:14px;

margin-bottom:30px;

}

.service-card li{

list-style:none;

padding-right:30px;

position:relative;

color:#444;

transition:.3s;

}

.service-card li::before{

content:"✓";

position:absolute;

right:0;

top:0;

color:#D8A64A;

font-weight:bold;

font-size:18px;

}

.service-card li:hover{

padding-right:36px;

color:#0D2F6C;

}



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

.service-btn{

display:inline-flex;

align-items:center;

gap:12px;

padding:14px 28px;

border-radius:14px;

background:#0D2F6C;

color:#fff;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.service-btn:hover{

background:#D8A64A;

color:#082A63;

transform:translateX(-6px);

}



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

.services-cta{

padding:110px 0;

background:linear-gradient(135deg,#081F4D,#0D2F6C);

}

.cta-box{

padding:70px;

border-radius:35px;

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

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

backdrop-filter:blur(20px);

text-align:center;

}

.cta-badge{

display:inline-block;

padding:10px 24px;

border-radius:999px;

background:rgba(216,166,74,.18);

color:#D8A64A;

margin-bottom:25px;

font-weight:700;

}

.cta-box h2{

color:#fff;

font-size:42px;

margin-bottom:20px;

}

.cta-box p{

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

max-width:700px;

margin:0 auto 35px;

line-height:2;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;
color: #F5D48C;
flex-wrap:wrap;

}



/*==================================================
                FOOTER
==================================================*/

.footer{

background:#071A42;

color:#fff;

padding:80px 0 30px;

}

.footer-top{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

margin-bottom:45px;

}

.footer-brand img{

width:65px;

margin-bottom:18px;

}

.footer h3{

margin-bottom:16px;

}

.footer h4{

margin-bottom:18px;

color:#D8A64A;

}

.footer p{

line-height:2;

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

}

.footer-links{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-links a{

text-decoration:none;

color:#fff;

transition:.3s;

}

.footer-links a:hover{

color:#D8A64A;

padding-right:6px;

}

.footer-contact{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-bottom{

padding-top:28px;

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

text-align:center;

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

}



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

@media(max-width:992px){

.services-hero h1{

font-size:42px;

}

.footer-top{

grid-template-columns:1fr;

}

.cta-box{

padding:40px;

}

.section-title h2{

font-size:34px;

}

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

.services-hero{

padding:150px 0 90px;

}

.services-hero h1{

font-size:34px;

}

.service-card{

padding:30px;

}

.cta-box h2{

font-size:30px;

}

}