/*==========================================================
  Financial Solutions
  Import Export Code (IEC) Registration
  Premium Version 2.0
==========================================================*/


/*==============================
    GOOGLE FONTS
==============================*/

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


/*==============================
    CSS VARIABLES
==============================*/

:root{

--primary:#0B1F3A;
--secondary:#00A86B;
--secondary-dark:#008A59;
--accent:#22C55E;

--white:#ffffff;
--light:#F7FAFC;
--light-2:#EEF4F8;

--text:#1F2937;
--text-light:#64748B;

--border:#E5E7EB;

--shadow-sm:0 5px 15px rgba(0,0,0,.06);
--shadow:0 12px 35px rgba(0,0,0,.08);
--shadow-lg:0 25px 60px rgba(0,0,0,.12);

--radius:18px;
--radius-lg:26px;

--transition:.35s ease;

--container:1280px;

}


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

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

html{
scroll-behavior:smooth;
scroll-padding-top:100px;
}

body{

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

background:var(--light);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

button{

border:none;

outline:none;

cursor:pointer;

font-family:inherit;

}

input,
textarea{

font-family:inherit;

outline:none;

}


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

.container{

width:min(92%,var(--container));

margin:auto;

}


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

h1,
h2,
h3,
h4{

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

font-weight:700;

color:var(--primary);

line-height:1.2;

}

h1{

font-size:clamp(42px,6vw,68px);

}

h2{

font-size:clamp(32px,4vw,48px);

margin-bottom:18px;

}

h3{

font-size:24px;

}

p{

font-size:17px;

color:var(--text-light);

margin-bottom:18px;

}

.section-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

background:rgba(0,168,107,.10);

color:var(--secondary);

font-size:14px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

border-radius:50px;

margin-bottom:22px;

}

.section-header{

text-align:center;

max-width:850px;

margin:0 auto 70px;

}


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

.btn-primary,
.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:60px;

font-weight:600;

transition:var(--transition);

position:relative;

overflow:hidden;

}

.btn-primary{

background:var(--secondary);

color:#fff;

box-shadow:0 15px 35px rgba(0,168,107,.25);

}

.btn-primary:hover{

background:var(--secondary-dark);

transform:translateY(-4px);

}

.btn-secondary{

background:#fff;

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

color:var(--primary);

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}


/*==============================
      BACKGROUND EFFECT
==============================*/

.background-blur{

position:fixed;

width:700px;

height:700px;

background:radial-gradient(circle,
rgba(0,168,107,.12),
transparent 70%);

top:-250px;

right:-250px;

z-index:-1;

filter:blur(50px);

}


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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:18px 0;

transition:.4s;

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

backdrop-filter:blur(20px);

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

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

}

.header.scrolled{

background:var(--primary);

box-shadow:var(--shadow);

padding:14px 0;

}


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

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

}

.logo{

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

font-size:30px;

font-weight:800;

color:var(--primary);

}

.logo span{

color:var(--secondary);

}

.header.scrolled .logo{

color:#fff;

}

.header.scrolled .logo span{

color:#6EE7B7;

}


/*==============================
      NAVIGATION
==============================*/

.nav-links{

display:flex;

align-items:center;

gap:35px;

}

.nav-links a{

font-weight:600;

position:relative;

transition:.3s;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--secondary);

transition:.35s;

}

.nav-links a:hover{

color:var(--secondary);

}

.nav-links a:hover::after{

width:100%;

}

.header.scrolled .nav-links a{

color:#fff;

}

.header.scrolled .nav-links a:hover{

color:#6EE7B7;

}


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

.apply-btn{

background:var(--secondary);

color:#fff;

padding:14px 28px;

border-radius:50px;

font-weight:600;

transition:.35s;

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

}

.apply-btn:hover{

background:var(--secondary-dark);

transform:translateY(-3px);

}


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

.menu-toggle{

display:none;

width:48px;

height:48px;

border-radius:12px;

background:var(--secondary);

color:#fff;

font-size:20px;

}


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

section{

padding:110px 0;

}


/*==============================
      UTILITIES
==============================*/

.text-center{

text-align:center;

}

.mt-30{

margin-top:30px;

}

.mb-30{

margin-bottom:30px;

}

.shadow{

box-shadow:var(--shadow);

}

.radius{

border-radius:var(--radius);

}

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

.hero{

position:relative;

padding:190px 0 120px;

overflow:hidden;

background:
linear-gradient(135deg,#ffffff 0%,#f8fbfc 45%,#eef8f4 100%);

}

.hero::before{

content:"";

position:absolute;

top:-250px;

right:-180px;

width:700px;

height:700px;

border-radius:50%;

background:radial-gradient(circle,
rgba(0,168,107,.12),
transparent 70%);

filter:blur(25px);

z-index:0;

}

.hero::after{

content:"";

position:absolute;

left:-220px;

bottom:-220px;

width:600px;

height:600px;

border-radius:50%;

background:radial-gradient(circle,
rgba(11,31,58,.08),
transparent 70%);

filter:blur(30px);

z-index:0;

}


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

.hero-grid{

position:relative;

z-index:2;

display:grid;

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

align-items:center;

gap:80px;

}


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

.hero-content{

animation:fadeLeft .8s ease;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:12px;

padding:12px 22px;

background:#fff;

border:1px solid rgba(0,168,107,.20);

border-radius:60px;

font-size:14px;

font-weight:700;

color:var(--secondary);

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

margin-bottom:28px;

}

.hero-badge i{

font-size:18px;

}


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

.hero h1{

font-size:64px;

font-weight:800;

margin-bottom:25px;

letter-spacing:-1px;

}

.hero h1 span{

display:block;

color:var(--secondary);

margin-top:8px;

}

.hero p{

font-size:19px;

max-width:620px;

margin-bottom:35px;

line-height:1.9;

}


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

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:45px;

}


/*=========================
        TRUST ITEMS
=========================*/

.hero-trust{

display:grid;

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

gap:18px;

margin-bottom:45px;

}

.hero-trust div{

display:flex;

align-items:center;

gap:12px;

padding:14px 18px;

background:#fff;

border-radius:15px;

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

font-weight:600;

transition:.35s;

}

.hero-trust div:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.hero-trust i{

color:var(--secondary);

font-size:18px;

}


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

.hero-stats{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.stat-box{

background:#fff;

padding:28px;

min-width:170px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

border-top:4px solid transparent;

}

.stat-box:hover{

transform:translateY(-10px);

border-color:var(--secondary);

}

.stat-box h3{

font-size:38px;

color:var(--secondary);

margin-bottom:10px;

}

.stat-box span{

font-size:15px;

font-weight:600;

color:var(--text-light);

}


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

.hero-image{

position:relative;

animation:fadeRight .8s ease;

}

.hero-image img{

width:100%;

max-width:600px;

margin:auto;

filter:drop-shadow(0 30px 60px rgba(0,0,0,.12));

transition:.4s;

}

.hero-image:hover img{

transform:translateY(-10px);

}


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

.floating-card{

position:absolute;

display:flex;

align-items:center;

gap:16px;

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

backdrop-filter:blur(20px);

padding:18px 20px;

border-radius:20px;

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

min-width:240px;

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

}

.floating-card i{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:var(--secondary);

color:#fff;

font-size:22px;

}

.floating-card strong{

display:block;

font-size:18px;

color:var(--primary);

margin-bottom:4px;

}

.floating-card p{

margin:0;

font-size:14px;

}


/*=========================
        POSITIONS
=========================*/

.card-one{

top:40px;

left:-50px;

}

.card-two{

bottom:50px;

right:-40px;

animation-delay:2s;

}


/*=========================
        DECORATION
=========================*/

.hero-image::before{

content:"";

position:absolute;

width:140px;

height:140px;

border:12px solid rgba(0,168,107,.10);

border-radius:30px;

top:-30px;

right:-20px;

transform:rotate(18deg);

}

.hero-image::after{

content:"";

position:absolute;

width:90px;

height:90px;

border-radius:50%;

background:rgba(0,168,107,.15);

left:-20px;

bottom:80px;

}


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

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0);

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-70px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(70px);

}

to{

opacity:1;

transform:translateX(0);

}

}


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

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero p{

margin-left:auto;

margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-trust{

grid-template-columns:1fr;

}

.hero-stats{

justify-content:center;

}

.card-one{

left:0;

top:0;

}

.card-two{

right:0;

bottom:0;

}

}

@media(max-width:768px){

.hero{

padding:150px 0 80px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.stat-box{

width:100%;

}

.floating-card{

position:relative;

margin:20px auto;

left:auto;

right:auto;

top:auto;

bottom:auto;

}

.hero-image::before,
.hero-image::after{

display:none;

}

}

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

.trusted-section{

background:#ffffff;

padding:90px 0;

}

.trusted-heading{

text-align:center;

margin-bottom:55px;

}

.trusted-heading span{

display:inline-block;

padding:12px 28px;

border-radius:50px;

background:rgba(0,168,107,.08);

color:var(--secondary);

font-weight:700;

letter-spacing:1px;

font-size:14px;

}

.trusted-grid{

display:grid;

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

gap:30px;

}

.trusted-card{

background:#fff;

padding:40px 30px;

text-align:center;

border-radius:24px;

box-shadow:var(--shadow);

transition:.4s;

border:1px solid transparent;

position:relative;

overflow:hidden;

}

.trusted-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:4px;

background:linear-gradient(90deg,var(--secondary),#22C55E);

transition:.5s;

}

.trusted-card:hover::before{

left:0;

}

.trusted-card:hover{

transform:translateY(-12px);

border-color:rgba(0,168,107,.15);

}

.trusted-card i{

font-size:46px;

color:var(--secondary);

margin-bottom:22px;

}

.trusted-card h3{

font-size:34px;

margin-bottom:10px;

}

.trusted-card p{

margin:0;

}


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

.about-iec{

background:linear-gradient(180deg,#F8FBFA,#ffffff);

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:28px;

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

}

.experience-box{

position:absolute;

right:-30px;

bottom:40px;

background:var(--primary);

color:#fff;

padding:28px;

border-radius:22px;

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

text-align:center;

min-width:180px;

}

.experience-box h2{

color:#fff;

font-size:42px;

margin-bottom:8px;

}

.experience-box span{

font-size:15px;

}

.about-content p{

margin-bottom:20px;

}

.about-features{

display:grid;

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

gap:18px;

margin:35px 0;

}

.feature-box{

display:flex;

align-items:center;

gap:12px;

padding:18px;

background:#fff;

border-radius:16px;

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

transition:.35s;

}

.feature-box:hover{

transform:translateX(8px);

}

.feature-box i{

color:var(--secondary);

font-size:18px;

}


/*==========================================================
        BENEFITS
==========================================================*/

.benefits-section{

background:#fff;

}

.benefits-grid{

display:grid;

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

gap:30px;

}

.benefit-card{

background:#fff;

padding:40px 32px;

border-radius:26px;

box-shadow:var(--shadow);

transition:.4s;

position:relative;

overflow:hidden;

}

.benefit-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--secondary),#22C55E);

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.benefit-card:hover::before{

transform:scaleX(1);

}

.benefit-card:hover{

transform:translateY(-15px);

}

.benefit-icon{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:rgba(0,168,107,.10);

margin-bottom:28px;

}

.benefit-icon i{

font-size:34px;

color:var(--secondary);

}

.benefit-card h3{

margin-bottom:18px;

}


/*==========================================================
        DOCUMENTS
==========================================================*/

.documents-section{

background:#F8FBFA;

}

.documents-grid{

display:grid;

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

gap:30px;

}

.document-card{

background:#fff;

padding:35px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.4s;

text-align:center;

}

.document-card:hover{

transform:translateY(-12px);

}

.document-card i{

width:82px;

height:82px;

margin:0 auto 25px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,var(--secondary),#22C55E);

color:#fff;

font-size:32px;

}

.document-card h3{

margin-bottom:15px;

}


/*==========================================================
        WHY US
==========================================================*/

.why-us-section{

background:#fff;

}

.why-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.why-image img{

width:100%;

border-radius:28px;

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

}

.why-list{

margin:35px 0;

display:grid;

gap:18px;

}

.why-list li{

display:flex;

align-items:center;

gap:15px;

padding:16px 20px;

background:#F8FBFA;

border-radius:16px;

transition:.35s;

}

.why-list li:hover{

background:#fff;

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

transform:translateX(8px);

}

.why-list i{

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--secondary);

color:#fff;

font-size:14px;

}


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

@media(max-width:992px){

.trusted-grid,
.benefits-grid,
.documents-grid{

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

}

.about-grid,
.why-grid{

grid-template-columns:1fr;

gap:60px;

}

.experience-box{

position:relative;

right:auto;

bottom:auto;

margin-top:25px;

display:inline-block;

}

}

@media(max-width:768px){

.trusted-grid,
.benefits-grid,
.documents-grid,
.about-features{

grid-template-columns:1fr;

}

.feature-box{

justify-content:flex-start;

}

.trusted-card,
.benefit-card,
.document-card{

padding:28px;

}

}

/*==========================================================
            REGISTRATION PROCESS
==========================================================*/

.process-section{

background:linear-gradient(180deg,#ffffff,#f8fbfa);

position:relative;

overflow:hidden;

}

.process-timeline{

position:relative;

max-width:1050px;

margin:70px auto 0;

padding-left:40px;

}

.process-timeline::before{

content:"";

position:absolute;

left:20px;

top:0;

width:4px;

height:100%;

background:linear-gradient(to bottom,
var(--secondary),
#22C55E);

border-radius:20px;

}

.process-step{

position:relative;

display:flex;

gap:30px;

margin-bottom:45px;

padding-left:30px;

}

.step-number{

width:65px;

height:65px;

min-width:65px;

border-radius:50%;

background:linear-gradient(135deg,
var(--primary),
#14396d);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:700;

box-shadow:0 15px 35px rgba(11,31,58,.25);

position:relative;

z-index:2;

}

.step-content{

flex:1;

background:#fff;

padding:35px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

border-left:5px solid transparent;

}

.step-content:hover{

transform:translateX(10px);

border-color:var(--secondary);

}

.step-content h3{

margin-bottom:12px;

}

.step-content p{

margin:0;

}


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

.pricing-section{

background:#ffffff;

}

.pricing-grid{

display:grid;

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

gap:35px;

align-items:stretch;

}

.pricing-card{

position:relative;

background:#fff;

padding:45px 35px;

border-radius:28px;

text-align:center;

box-shadow:var(--shadow);

transition:.45s;

overflow:hidden;

border:1px solid rgba(0,0,0,.05);

}

.pricing-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:6px;

background:linear-gradient(90deg,
var(--secondary),
#22C55E);

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}

.pricing-card:hover::before{

transform:scaleX(1);

}

.pricing-card:hover{

transform:translateY(-15px);

}

.pricing-card h3{

font-size:28px;

margin-bottom:20px;

}

.price{

font-size:54px;

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

font-weight:800;

color:var(--secondary);

margin-bottom:30px;

}

.pricing-card ul{

display:grid;

gap:18px;

margin-bottom:35px;

text-align:left;

}

.pricing-card li{

display:flex;

align-items:center;

gap:12px;

}

.pricing-card li i{

color:var(--secondary);

}

.featured{

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

color:#fff;

transform:scale(1.05);

}

.featured h3,

.featured .price,

.featured li,

.featured p{

color:#fff;

}

.featured li i{

color:#6EE7B7;

}

.popular-badge{

position:absolute;

top:18px;

right:-45px;

background:#22C55E;

color:#fff;

padding:8px 55px;

font-size:13px;

font-weight:700;

transform:rotate(45deg);

}


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

.cta-section{

padding:120px 0;

background:linear-gradient(135deg,
var(--primary),
#0E2C58);

}

.cta-box{

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

backdrop-filter:blur(20px);

padding:70px;

border-radius:35px;

text-align:center;

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

}

.cta-box h2{

color:#fff;

font-size:48px;

margin-bottom:20px;

}

.cta-box p{

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

max-width:760px;

margin:0 auto 40px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-box .btn-secondary{

background:#fff;

border:none;

}


/*==========================================================
                TESTIMONIALS
==========================================================*/

.testimonial-section{

background:#F8FBFA;

}

.testimonial-grid{

display:grid;

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

gap:35px;

}

.testimonial-card{

background:#fff;

padding:38px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.4s;

position:relative;

overflow:hidden;

}

.testimonial-card::before{

content:"★★★★★";

position:absolute;

top:20px;

right:25px;

font-size:14px;

color:#FFD54A;

letter-spacing:2px;

}

.testimonial-card:hover{

transform:translateY(-12px);

}

.stars{

font-size:22px;

color:#FFC107;

margin-bottom:18px;

}

.testimonial-card p{

margin-bottom:28px;

font-style:italic;

}

.testimonial-card h4{

margin-bottom:6px;

}

.testimonial-card span{

font-size:14px;

color:var(--text-light);

}


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

@media(max-width:992px){

.pricing-grid,

.testimonial-grid{

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

}

.featured{

transform:none;

}

.cta-box{

padding:50px 35px;

}

}

@media(max-width:768px){

.process-timeline{

padding-left:15px;

}

.process-timeline::before{

left:8px;

}

.process-step{

padding-left:20px;

gap:20px;

}

.step-number{

width:55px;

height:55px;

min-width:55px;

font-size:18px;

}

.pricing-grid,

.testimonial-grid{

grid-template-columns:1fr;

}

.price{

font-size:44px;

}

.cta-box h2{

font-size:34px;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons a{

width:100%;

}

}

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

.faq-section{
background:#ffffff;
}

.faq-container{
max-width:950px;
margin:60px auto 0;
}

.faq-item{
background:#fff;
border-radius:20px;
box-shadow:var(--shadow);
margin-bottom:22px;
overflow:hidden;
transition:.35s;
border:1px solid rgba(0,0,0,.05);
}

.faq-item:hover{
transform:translateY(-5px);
}

.faq-question{
width:100%;
padding:24px 30px;
display:flex;
justify-content:space-between;
align-items:center;
background:none;
font-size:18px;
font-weight:600;
color:var(--primary);
cursor:pointer;
}

.faq-question i{
color:var(--secondary);
transition:.35s;
}

.faq-item.active i{
transform:rotate(45deg);
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
}

.faq-answer p{
padding:0 30px 25px;
margin:0;
line-height:1.8;
}


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

.contact-section{
background:#F8FBFA;
}

.contact-wrapper{
display:grid;
grid-template-columns:380px 1fr;
gap:45px;
margin-top:60px;
}

.contact-info{
display:flex;
flex-direction:column;
gap:22px;
}

.info-card{
display:flex;
align-items:center;
gap:18px;
padding:28px;
background:#fff;
border-radius:20px;
box-shadow:var(--shadow);
transition:.35s;
}

.info-card:hover{
transform:translateX(8px);
}

.info-card i{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
background:linear-gradient(135deg,var(--secondary),#22C55E);
color:#fff;
font-size:24px;
}

.contact-form{
background:#fff;
padding:45px;
border-radius:28px;
box-shadow:var(--shadow-lg);
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:20px;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:18px;
border:1px solid #dbe4ea;
border-radius:14px;
font-size:16px;
transition:.3s;
background:#fff;
}

.contact-form input:focus,
.contact-form textarea:focus{
border-color:var(--secondary);
box-shadow:0 0 0 4px rgba(0,168,107,.12);
}

.contact-form textarea{
resize:vertical;
min-height:170px;
margin-bottom:25px;
}

.contact-form button{
width:100%;
}


/*==========================================================
                NEWSLETTER
==========================================================*/

.newsletter-section{
background:linear-gradient(135deg,var(--primary),#133968);
padding:90px 0;
}

.newsletter-box{
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
padding:45px;
border-radius:30px;
border:1px solid rgba(255,255,255,.10);
}

.newsletter-box h2{
color:#fff;
margin-bottom:12px;
}

.newsletter-box p{
color:rgba(255,255,255,.80);
margin:0;
}

.newsletter-form{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.newsletter-form input{
width:320px;
padding:18px;
border:none;
border-radius:50px;
}

.newsletter-form button{
padding:18px 32px;
background:var(--secondary);
color:#fff;
border-radius:50px;
font-weight:600;
transition:.35s;
}

.newsletter-form button:hover{
background:var(--secondary-dark);
}


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

.footer{
background:#07162C;
color:#fff;
padding:90px 0 25px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:45px;
margin-bottom:50px;
}

.footer h3{
color:#fff;
margin-bottom:22px;
}

.footer p,
.footer li,
.footer a{
color:rgba(255,255,255,.72);
line-height:2;
transition:.3s;
}

.footer a:hover{
color:#6EE7B7;
padding-left:5px;
}

.social-icons{
display:flex;
gap:15px;
margin-top:20px;
}

.social-icons a{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.08);
font-size:18px;
}

.social-icons a:hover{
background:var(--secondary);
color:#fff;
transform:translateY(-5px);
}

.footer hr{
border:none;
border-top:1px solid rgba(255,255,255,.10);
margin:30px 0;
}

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.footer-bottom p{
margin:0;
}


/*==========================================================
                SCROLL TOP
==========================================================*/

#scrollTop{
position:fixed;
right:25px;
bottom:25px;
width:55px;
height:55px;
border-radius:50%;
background:var(--secondary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
box-shadow:0 15px 35px rgba(0,168,107,.30);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:999;
}

#scrollTop.show{
opacity:1;
visibility:visible;
}

#scrollTop:hover{
transform:translateY(-6px);
}


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

@media(max-width:992px){

.nav-links{
position:fixed;
top:85px;
left:-100%;
width:280px;
height:calc(100vh - 85px);
background:#fff;
flex-direction:column;
align-items:flex-start;
padding:35px;
gap:25px;
transition:.4s;
box-shadow:var(--shadow-lg);
}

.nav-links.active{
left:0;
}

.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
}

.apply-btn{
display:none;
}

.contact-wrapper,
.footer-grid,
.newsletter-box{
grid-template-columns:1fr;
display:grid;
}

.newsletter-form{
width:100%;
}

.newsletter-form input{
width:100%;
}

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

}

@media(max-width:768px){

section{
padding:80px 0;
}

.container{
width:94%;
}

.contact-form{
padding:30px;
}

.newsletter-box{
padding:30px;
text-align:center;
}

.footer-bottom{
flex-direction:column;
text-align:center;
}

.info-card{
padding:22px;
}

.faq-question{
font-size:16px;
padding:20px;
}

.faq-answer p{
padding:0 20px 20px;
}

}

@media(max-width:480px){

.logo{
font-size:24px;
}

h1{
font-size:36px;
}

h2{
font-size:28px;
}

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

.stat-box{
padding:20px;
}

.pricing-card{
padding:30px 20px;
}

.contact-form{
padding:22px;
}

.newsletter-form button{
width:100%;
}

}


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

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#edf2f7;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(var(--secondary),#22C55E);
border-radius:20px;
}

::selection{
background:var(--secondary);
color:#fff;
}

/*==========================================================
        VERSION 3.0 AGENCY UPGRADE - PATCH 1
        Global Premium Effects
==========================================================*/


/*==========================
    Animated Background
==========================*/

body{

background:
linear-gradient(
135deg,
#f5f8fc 0%,
#f8fbff 35%,
#eefaf5 70%,
#f5f8fc 100%);

background-size:400% 400%;

animation:gradientMove 18s ease infinite;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/*==========================
    Luxury Grid Background
==========================*/

body::before{

content:"";

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background-image:

linear-gradient(rgba(11,31,58,.035) 1px,transparent 1px),

linear-gradient(90deg,rgba(11,31,58,.035) 1px,transparent 1px);

background-size:45px 45px;

pointer-events:none;

z-index:-2;

}


/*==========================
      Aurora Glow
==========================*/

body::after{

content:"";

position:fixed;

width:700px;

height:700px;

right:-220px;

top:-220px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,168,107,.12),

transparent 70%);

filter:blur(70px);

animation:auroraMove 14s ease-in-out infinite;

pointer-events:none;

z-index:-1;

}

@keyframes auroraMove{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-70px,80px);

}

100%{

transform:translate(0,0);

}

}


/*==========================
      Scroll Progress
==========================*/

.progress-bar{

position:fixed;

left:0;

top:0;

height:4px;

width:0;

background:

linear-gradient(90deg,

#00A86B,

#22C55E,

#3B82F6);

z-index:99999;

box-shadow:

0 0 12px rgba(34,197,94,.5);

transition:.15s;

}


/*==========================
      Cursor Glow
==========================*/

.cursor-glow{

position:fixed;

width:24px;

height:24px;

border-radius:50%;

background:

rgba(0,168,107,.22);

pointer-events:none;

z-index:99999;

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

filter:blur(8px);

transition:

transform .08s linear,

width .25s,

height .25s,

background .25s;

}


/*==========================
      Glass Upgrade
==========================*/

.hero,

.about-iec,

.process-section,

.newsletter-section{

position:relative;

overflow:hidden;

}

.hero::before,

.about-iec::before,

.process-section::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,168,107,.06),

transparent 70%);

filter:blur(40px);

pointer-events:none;

animation:floatGlow 10s ease infinite;

}

.about-iec::before{

right:-150px;

bottom:-100px;

}

.process-section::before{

left:-100px;

top:-80px;

}

@keyframes floatGlow{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0);

}

}


/*==========================
     Luxury Selection
==========================*/

::selection{

background:#00A86B;

color:#fff;

}


/*==========================
      Smooth Image Zoom
==========================*/

img{

transition:

transform .55s ease,

filter .55s ease;

}

.about-image:hover img,

.why-image:hover img{

transform:scale(1.05);

filter:brightness(1.05);

}


/*==========================
    Better Shadows
==========================*/

.benefit-card,

.document-card,

.trusted-card,

.pricing-card,

.testimonial-card,

.info-card{

transition:

transform .35s,

box-shadow .35s;

}

.benefit-card:hover,

.document-card:hover,

.trusted-card:hover,

.pricing-card:hover,

.testimonial-card:hover,

.info-card:hover{

box-shadow:

0 35px 70px rgba(11,31,58,.12);

}


/*==========================
      Smooth Links
==========================*/

a{

transition:

color .3s,

background .3s,

transform .3s;

}


/*==========================
      Better Scrollbar
==========================*/

::-webkit-scrollbar{

width:11px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

#00A86B,

#008A59);

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(

180deg,

#22C55E,

#00A86B);

}


/*==========================
    Desktop Only Cursor
==========================*/

@media(max-width:992px){

.cursor-glow{

display:none;

}

}

/*==========================================================
        VERSION 3.0 - PATCH 2
        Premium Cards + Buttons + Glass Effects
==========================================================*/


/*=====================================
        PREMIUM BUTTON EFFECTS
=====================================*/

.btn-primary,
.btn-secondary,
.apply-btn{

position:relative;

overflow:hidden;

isolation:isolate;

}

.btn-primary::before,
.btn-secondary::before,
.apply-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:80%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent);

transform:skewX(-25deg);

transition:1s;

z-index:-1;

}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.apply-btn:hover::before{

left:150%;

}

.btn-primary:hover,
.apply-btn:hover{

box-shadow:

0 15px 35px rgba(0,168,107,.25),

0 0 35px rgba(0,168,107,.18);

}

.btn-secondary:hover{

box-shadow:

0 15px 30px rgba(11,31,58,.18);

}


/*=====================================
        LUXURY CARD EFFECT
=====================================*/

.benefit-card,
.document-card,
.trusted-card,
.pricing-card,
.testimonial-card,
.info-card{

position:relative;

overflow:hidden;

transform-style:preserve-3d;

}

.benefit-card::after,
.document-card::after,
.trusted-card::after,
.pricing-card::after,
.testimonial-card::after{

content:"";

position:absolute;

top:-60%;

left:-60%;

width:220%;

height:220%;

background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.15),
transparent);

transform:rotate(25deg);

opacity:0;

transition:.8s;

}

.benefit-card:hover::after,
.document-card:hover::after,
.trusted-card:hover::after,
.pricing-card:hover::after,
.testimonial-card:hover::after{

opacity:1;

left:120%;

}

.benefit-card:hover,
.document-card:hover,
.trusted-card:hover,
.pricing-card:hover,
.testimonial-card:hover,
.info-card:hover{

transform:

translateY(-14px)

rotateX(2deg)

rotateY(-2deg);

}


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

.benefit-icon,
.document-card i,
.trusted-card i,
.info-card i{

transition:.45s;

}

.benefit-card:hover .benefit-icon{

transform:

rotate(8deg)

scale(1.08);

}

.document-card:hover i,

.trusted-card:hover i,

.info-card:hover i{

transform:

rotate(10deg)

scale(1.15);

}


/*=====================================
        PRICING CARD GLOW
=====================================*/

.featured{

position:relative;

overflow:hidden;

}

.featured::before{

content:"";

position:absolute;

inset:-2px;

border-radius:30px;

padding:2px;

background:

linear-gradient(
135deg,
#22C55E,
#00A86B,
#3B82F6);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

animation:borderGlow 4s linear infinite;

}

@keyframes borderGlow{

0%{

filter:hue-rotate(0deg);

}

100%{

filter:hue-rotate(360deg);

}

}


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

.stat-box,

.feature-box,

.info-card,

.testimonial-card{

backdrop-filter:blur(16px);

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

background:

rgba(255,255,255,.88);

border:

1px solid rgba(255,255,255,.40);

}


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

.hero-image img,

.about-image img,

.why-image img{

transition:

transform .7s,

filter .7s;

}

.hero-image:hover img{

transform:

translateY(-8px)

scale(1.02);

filter:

drop-shadow(0 30px 60px rgba(0,0,0,.18));

}

.about-image:hover img,

.why-image:hover img{

transform:scale(1.05);

}


/*=====================================
        NAVBAR LINK EFFECT
=====================================*/

.nav-links a{

padding-bottom:8px;

}

.nav-links a::after{

height:3px;

border-radius:20px;

background:

linear-gradient(
90deg,
#00A86B,
#22C55E);

}


/*=====================================
        FAQ EFFECT
=====================================*/

.faq-item{

transition:

transform .3s,

box-shadow .3s;

}

.faq-item:hover{

box-shadow:

0 18px 40px rgba(11,31,58,.10);

}

.faq-question{

transition:.3s;

}

.faq-item.active .faq-question{

color:var(--secondary);

}


/*=====================================
        INPUT EFFECT
=====================================*/

.contact-form input,

.contact-form textarea{

transition:

border .3s,

box-shadow .3s,

transform .3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

transform:translateY(-2px);

}


/*=====================================
        SOCIAL ICONS
=====================================*/

.social-icons a{

transition:

transform .35s,

background .35s,

box-shadow .35s;

}

.social-icons a:hover{

box-shadow:

0 12px 25px rgba(0,168,107,.30);

}


/*=====================================
        SECTION HOVER TITLE
=====================================*/

.section-header h2{

position:relative;

display:inline-block;

}

.section-header h2::after{

content:"";

position:absolute;

left:50%;

bottom:-12px;

transform:translateX(-50%);

width:70px;

height:4px;

border-radius:30px;

background:

linear-gradient(
90deg,
#00A86B,
#22C55E);

}


/*=====================================
        CARD BORDER ANIMATION
=====================================*/

.benefit-card,

.document-card,

.trusted-card{

border:1px solid transparent;

}

.benefit-card:hover,

.document-card:hover,

.trusted-card:hover{

border-color:

rgba(0,168,107,.18);

}


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

.benefit-card,
.document-card,
.trusted-card,
.pricing-card,
.testimonial-card,
.info-card,
.btn-primary,
.btn-secondary{

will-change:transform;

}

/*==========================================================
        VERSION 3.0 - PATCH 3
        Hero Premium Effects + Scroll Reveal
==========================================================*/


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

.hero{

position:relative;

isolation:isolate;

}

.hero .particle{

position:absolute;

width:12px;

height:12px;

border-radius:50%;

background:rgba(0,168,107,.18);

animation:particleFloat 14s linear infinite;

pointer-events:none;

filter:blur(.4px);

}

.hero .particle:nth-child(1){

top:12%;
left:8%;

width:10px;
height:10px;

animation-duration:15s;

}

.hero .particle:nth-child(2){

top:25%;
right:12%;

width:16px;
height:16px;

animation-duration:18s;

animation-delay:2s;

}

.hero .particle:nth-child(3){

bottom:18%;
left:18%;

width:14px;
height:14px;

animation-delay:4s;

}

.hero .particle:nth-child(4){

bottom:10%;
right:18%;

width:20px;
height:20px;

animation-duration:20s;

}

@keyframes particleFloat{

0%{

transform:translateY(0) scale(1);

opacity:.15;

}

50%{

transform:translateY(-45px) scale(1.25);

opacity:.5;

}

100%{

transform:translateY(0);

opacity:.15;

}

}


/*=====================================
        FLOATING BLOBS
=====================================*/

.hero-blob{

position:absolute;

border-radius:50%;

filter:blur(60px);

pointer-events:none;

z-index:-1;

animation:blobMove 18s ease-in-out infinite;

}

.hero-blob.one{

width:300px;

height:300px;

background:rgba(0,168,107,.12);

left:-100px;

top:120px;

}

.hero-blob.two{

width:420px;

height:420px;

background:rgba(11,31,58,.08);

right:-120px;

bottom:-120px;

animation-delay:5s;

}

@keyframes blobMove{

0%{

transform:translate(0,0);

}

50%{

transform:translate(50px,-45px);

}

100%{

transform:translate(0,0);

}

}


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

.hero::after{

content:"";

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);

background-size:70px 70px;

opacity:.18;

pointer-events:none;

}


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

.floating-card{

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

}

.card-two{

animation-delay:2.5s;

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}


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

.hero-image{

position:relative;

}

.hero-image::before{

content:"";

position:absolute;

left:50%;

top:50%;

width:420px;

height:420px;

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

background:

radial-gradient(circle,

rgba(0,168,107,.18),

transparent 70%);

filter:blur(50px);

z-index:-1;

animation:pulseGlow 5s ease infinite;

}

@keyframes pulseGlow{

0%{

transform:translate(-50%,-50%) scale(.95);

}

50%{

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

}

100%{

transform:translate(-50%,-50%) scale(.95);

}

}


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

section{

position:relative;

}

section::after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:translateX(-50%);

width:120px;

height:2px;

background:

linear-gradient(

90deg,

transparent,

rgba(0,168,107,.25),

transparent);

}


/*=====================================
        SCROLL REVEAL
=====================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:

opacity .9s ease,

transform .9s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.reveal-left{

opacity:0;

transform:translateX(-70px);

transition:.9s;

}

.reveal-left.active{

opacity:1;

transform:translateX(0);

}

.reveal-right{

opacity:0;

transform:translateX(70px);

transition:.9s;

}

.reveal-right.active{

opacity:1;

transform:translateX(0);

}


/*=====================================
        COUNTER READY
=====================================*/

.counter{

font-variant-numeric:tabular-nums;

font-weight:800;

letter-spacing:1px;

}


/*=====================================
        MAGNETIC BUTTON READY
=====================================*/

.magnetic{

transition:

transform .18s linear;

will-change:transform;

}


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

.about-image,

.why-image{

overflow:hidden;

border-radius:28px;

position:relative;

}

.about-image::after,

.why-image::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.30),

transparent);

transform:skewX(-20deg);

transition:1s;

}

.about-image:hover::after,

.why-image:hover::after{

left:180%;

}


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

.hero-image,
.hero-content,
.floating-card,
.stat-box{

transform:translateZ(0);

backface-visibility:hidden;

}


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

@media(max-width:992px){

.hero .particle,
.hero-blob{

display:none;

}

.hero::after{

opacity:.08;

background-size:40px 40px;

}

}

@media(max-width:768px){

.hero-image::before{

width:250px;

height:250px;

}

section::after{

width:70px;

}

}

/*==========================================================
        VERSION 3.0 - PATCH 4
        Final Agency Upgrade
==========================================================*/


/*=====================================
        PAGE LOADER
=====================================*/

.page-loader{

position:fixed;

inset:0;

background:#07162C;

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

transition:.6s;

}

.page-loader.hide{

opacity:0;

visibility:hidden;

}

.loader-circle{

width:90px;

height:90px;

border-radius:50%;

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

border-top:6px solid #00A86B;

animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}


/*=====================================
      MOUSE SPOTLIGHT
=====================================*/

.spotlight{

position:fixed;

width:500px;

height:500px;

border-radius:50%;

pointer-events:none;

background:

radial-gradient(circle,

rgba(0,168,107,.10),

transparent 70%);

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

z-index:-1;

filter:blur(40px);

transition:

left .08s linear,

top .08s linear;

}


/*=====================================
      FLOATING SHAPES
=====================================*/

.shape{

position:absolute;

border-radius:50%;

pointer-events:none;

opacity:.18;

animation:shapeFloat 18s ease-in-out infinite;

}

.shape.one{

width:90px;

height:90px;

background:#00A86B;

top:10%;

left:8%;

}

.shape.two{

width:140px;

height:140px;

background:#0B1F3A;

bottom:15%;

right:8%;

animation-delay:5s;

}

.shape.three{

width:60px;

height:60px;

background:#22C55E;

top:50%;

left:45%;

animation-delay:8s;

}

@keyframes shapeFloat{

0%{

transform:translateY(0);

}

50%{

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

}

100%{

transform:translateY(0);

}

}


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

.benefit-card:hover,
.document-card:hover,
.pricing-card:hover,
.testimonial-card:hover{

box-shadow:

0 20px 60px rgba(0,168,107,.18),

0 10px 30px rgba(11,31,58,.10);

}


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

.hero h1 span{

background:

linear-gradient(
90deg,
#00A86B,
#22C55E,
#00A86B);

background-size:300%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:textGradient 6s linear infinite;

}

@keyframes textGradient{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}


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

.header{

backdrop-filter:blur(22px);

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

box-shadow:

0 8px 30px rgba(11,31,58,.05);

}


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

section{

animation:sectionFade .9s ease;

}

@keyframes sectionFade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:none;

}

}


/*=====================================
      HOVER UNDERLINE
=====================================*/

.footer a{

position:relative;

}

.footer a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:#22C55E;

transition:.35s;

}

.footer a:hover::after{

width:100%;

}


/*=====================================
      NEWSLETTER GLOW
=====================================*/

.newsletter-box{

position:relative;

overflow:hidden;

}

.newsletter-box::before{

content:"";

position:absolute;

width:350px;

height:350px;

background:

radial-gradient(circle,

rgba(255,255,255,.12),

transparent);

top:-150px;

right:-120px;

}


/*=====================================
      WHATSAPP FLOAT BUTTON
=====================================*/

.whatsapp-float{

position:fixed;

left:25px;

bottom:25px;

width:62px;

height:62px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#25D366;

color:#fff;

font-size:28px;

box-shadow:

0 18px 35px rgba(37,211,102,.35);

z-index:999;

transition:.35s;

}

.whatsapp-float:hover{

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

}


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

.mobile-cta{

display:none;

}

@media(max-width:768px){

.mobile-cta{

position:fixed;

left:0;

right:0;

bottom:0;

display:flex;

justify-content:center;

padding:15px;

background:#07162C;

z-index:999;

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

}

.mobile-cta a{

width:100%;

max-width:340px;

text-align:center;

}

}


/*=====================================
      4K DISPLAY
=====================================*/

@media(min-width:1800px){

.container{

max-width:1550px;

}

.hero{

padding:240px 0 180px;

}

.hero h1{

font-size:82px;

}

.hero p{

font-size:22px;

}

.section-header{

max-width:980px;

}

}


/*=====================================
      PRINT
=====================================*/

@media print{

.header,
.footer,
.newsletter-section,
.cta-section,
#scrollTop,
.whatsapp-float,
.mobile-cta{

display:none !important;

}

body{

background:#fff;

color:#000;

}

section{

padding:20px 0;

}

}


/*=====================================
      REDUCED MOTION
=====================================*/

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}