/* 
     *{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:#102033;
  background:linear-gradient(180deg,#f5f8ff 0%,#ffffff 55%,#f7f9fc 100%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin:0 auto}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(16,32,51,.08);
  box-shadow:0 6px 20px rgba(16,32,51,.06);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.55rem 0;   
  flex-wrap:nowrap;     
}

.brand{
  display:flex;
  align-items:center;
  gap:.65rem;           
  min-width:max-content;
}

.brand-logo{
  width:46px;           
  height:46px;
  border-radius:14px;
  object-fit:contain;
  background:#fff;
  padding:4px;
  box-shadow:0 6px 16px rgba(37,99,235,.14);
}

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

.brand-name{
  font-size:.98rem;
  font-weight:800;
  letter-spacing:.15px;
}

.brand-tagline{
  font-size:.78rem;
  color:#60738d;
  margin-top:.18rem;
}

.header-contact{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-left:auto;
}

.phone-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#102033;
  font-weight:700;
  white-space:nowrap;
  font-size:.92rem;
}


.phone-icon-btn{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.25);
  animation:ringPulse 1.4s ease-in-out infinite;
}

.phone-icon-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}


@keyframes ringPulse{
  0%{transform:translateY(0)}
  20%{transform:translateY(-1px)}
  40%{transform:translateY(1px)}
  60%{transform:translateY(-1px)}
  80%{transform:translateY(1px)}
  100%{transform:translateY(0)}
}

.phone-number{
  display:inline-block;
}

.apply-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.68rem 0.95rem;  
  border-radius:12px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-weight:700;
  box-shadow:0 10px 22px rgba(37,99,235,.22);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}

.apply-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(37,99,235,.28);
}


.apply-btn.pulse-cta{
  border:2px solid rgba(255,255,255,0.7);
  box-shadow:
    0 0 0 0 rgba(37,99,235,0.4),
    0 10px 22px rgba(37,99,235,0.22);
  animation:pulseGrow 1.8s ease-in-out infinite;
}
.apply-btn.pulse-cta::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  background:radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(37,99,235,0) 60%);
  opacity:0;
  pointer-events:none;
  animation:pulseGlow 1.8s ease-in-out infinite;
}
@keyframes pulseGrow{
  0%{
    transform:scale(1);
    box-shadow:
      0 0 0 0 rgba(37,99,235,0.4),
      0 10px 22px rgba(37,99,235,0.22);
  }
  50%{
    transform:scale(1.06);
    box-shadow:
      0 0 0 5px rgba(37,99,235,0),
      0 14px 30px rgba(37,99,235,0.28);
  }
  100%{
    transform:scale(1);
    box-shadow:
      0 0 0 0 rgba(37,99,235,0.4),
      0 10px 22px rgba(37,99,235,0.22);
  }
}
@keyframes pulseGlow{
  0%{opacity:0;transform:scale(0.9)}
  50%{opacity:1;transform:scale(1.1)}
  100%{opacity:0;transform:scale(1.2)}
}
.apply-btn.pulse-cta:hover{
  animation:none;
}
.apply-btn.pulse-cta:hover::before{
  animation:none;
  opacity:1;
}


.main-nav{
  display:flex;
  align-items:center;
  gap:.35rem;
  margin-left:1.5rem;   
}

.nav-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  padding:.6rem .85rem; 
  color:#102033;
  font-weight:700;
  background:#edf4ff;
  border:1px solid rgba(37,99,235,.12);
  transform:skewX(-14deg);
  transition:transform .25s ease, background .25s ease, color .25s ease;
  overflow:hidden;
  font-size:.86rem;
}
.nav-item span{
  display:inline-block;
  transform:skewX(14deg);
  position:relative;
  z-index:2;
}
.nav-item::before,
.nav-item::after{
  content:"";
  position:absolute;
  left:16%;
  width:68%;
  height:2px;
  background:#2563eb;
  transform:scaleX(0);
  transition:transform .3s ease;
}
.nav-item::before{top:6px;transform-origin:left}
.nav-item::after{bottom:6px;transform-origin:right}
.nav-item:hover,
.nav-item.active{
  background:#dfeaff;
  color:#1746a2;
  transform:skewX(-14deg) translateY(-1px);
}
.nav-item:hover::before,
.nav-item:hover::after,
.nav-item.active::before,
.nav-item.active::after{
  transform:scaleX(1);
}


.menu-toggle{
  display:none;
}
*/

/* =========================================================
   MAIN LAYOUT
========================================================= */
main{
    margin-top:100px; /* adjust according to fixed header height */
    overflow:hidden;
}

/* =========================================================
   HERO SECTION
========================================================= */
.hero{
    position:relative;
    padding:7rem 0 5rem;
    background:linear-gradient(135deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
    overflow:hidden;
}

/* Decorative background circles */
.hero::before,
.hero::after{
    content:"";
    position:absolute;
    border-radius:50%;
    z-index:0;
}

.hero::before{
    width:520px;
    height:520px;
    top:-180px;
    left:-140px;
    background:radial-gradient(circle,rgba(47,84,235,.18),transparent 70%);
}

.hero::after{
    width:420px;
    height:420px;
    bottom:-160px;
    right:-120px;
    background:radial-gradient(circle,rgba(0,198,255,.12),transparent 70%);
}

/* =========================================================
   HERO GRID
========================================================= */
.hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    gap:4rem;
    align-items:center;
}

/* =========================================================
   EYEBROW LABEL
========================================================= */
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.65rem 1rem;
    border-radius:999px;
    background:rgba(47,84,235,.10);
    color:#1e40af;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    border:1px solid rgba(47,84,235,.18);
    margin-bottom:1.4rem;
}

/* =========================================================
   HERO TEXT
========================================================= */
.hero h1{
    margin:0 0 1.4rem;
    font-size:clamp(2.5rem,5vw,4.4rem);
    line-height:1.08;
    font-weight:800;
    color:#0f172a;
    max-width:12ch;
    letter-spacing:-.03em;
}

.hero p{
    margin:0;
    max-width:62ch;
    font-size:1.08rem;
    line-height:1.9;
    color:#52637c;
}

/* =========================================================
   HERO CARD WRAPPER
========================================================= */
.hero-card{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

/* Floating glow behind card */
.hero-card::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:radial-gradient(circle,rgba(47,84,235,.22),transparent 72%);
    filter:blur(40px);
    z-index:0;
    animation:heroGlow 7s ease-in-out infinite;
}

/* =========================================================
   GLASS CARD
========================================================= */
.card{
    position:relative;
    z-index:2;
    width:100%;
    max-width:420px;
    padding:2.5rem;
    border-radius:30px;
    overflow:hidden;

    background:rgba(255,255,255,.86);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:
        0 24px 60px rgba(15,23,42,.12),
        0 10px 28px rgba(47,84,235,.12);

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

/* Gradient top border */
.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,#2f54eb,#2563eb,#00b4ff);
}

/* Decorative circle */
.card::after{
    content:"";
    position:absolute;
    top:-70px;
    right:-70px;
    width:170px;
    height:170px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(47,84,235,.12),rgba(0,198,255,.08));
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 34px 72px rgba(47,84,235,.18),
        0 16px 40px rgba(15,23,42,.12);
}

/* =========================================================
   CARD CONTENT
========================================================= */
.card-title{
    position:relative;
    margin:0 0 1rem;
    padding-bottom:.9rem;
    font-size:1.55rem;
    font-weight:800;
    color:#16376d;
}

.card-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:72px;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,#2f54eb,#00b4ff);
}

.card p{
    margin:0 0 1rem;
    color:#5b6778;
    line-height:1.9;
    font-size:1rem;
}

.card p:last-child{
    margin-bottom:0;
}

/* =========================================================
   SECTION DEFAULTS
========================================================= */
.section{
    padding:5rem 0;
}

.section-heading{
    max-width:760px;
    margin:0 auto 2rem;
    text-align:center;
}

.section-heading h2{
    margin:.3rem 0 1rem;
    font-size:clamp(2rem,4vw,3.2rem);
    color:#102033;
}

.section-heading p{
    color:#52637c;
    line-height:1.8;
    font-size:1.05rem;
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes heroGlow{
    0%,100%{
        transform:scale(1);
        opacity:.45;
    }
    50%{
        transform:scale(1.12);
        opacity:.75;
    }
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width:1024px){

    .hero{
        padding:6rem 0 4rem;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:3rem;
        text-align:center;
    }

    .hero h1{
        max-width:none;
    }

    .hero p{
        margin:0 auto;
    }

    .card{
        max-width:520px;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:768px){

    main{
        margin-top:84px;
    }

    .hero{
        padding:5rem 0 3.5rem;
    }

    .hero-grid{
        gap:2.25rem;
    }

    .hero h1{
        font-size:clamp(2rem,9vw,3rem);
    }

    .hero p{
        font-size:1rem;
        line-height:1.8;
    }

    .card{
        padding:2rem 1.6rem;
        border-radius:24px;
    }

    .card-title{
        font-size:1.35rem;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width:480px){
    .hero{
        padding:4.5rem 0 3rem;
    }

    .eyebrow{
        font-size:.74rem;
        padding:.55rem .9rem;
    }

    .card{
        padding:1.75rem 1.4rem;
    }
}

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

.section{
    position:relative;
    padding:30px 0;
    overflow:hidden;
    background:#ffffff;
}

.section:nth-child(even){
    background:#f8fbff;
}

/* Decorative Background */

.section::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
                rgba(47,84,235,.08),
                transparent 72%);
    z-index:0;
}

.section::after{
    content:"";
    position:absolute;
    bottom:-220px;
    left:-220px;
    width:480px;
    height:480px;
    border-radius:50%;
    background:radial-gradient(circle,
                rgba(0,174,255,.07),
                transparent 72%);
    z-index:0;
}

.section .container{
    position:relative;
    z-index:2;
}


/*==================================================
    SECTION HEADING
==================================================*/
.section-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 65px;
}

.section-heading h2{

    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:#173A75;
    margin-bottom:18px;
    position:relative;
    display:inline-block;
}

.section-heading h2::after{

    content:"";
    position:absolute;
    left:50%;
    bottom:-14px;
    transform:translateX(-50%);
    width:90px;
    height:5px;
    border-radius:50px;
    background:linear-gradient(90deg,
                #2f54eb,
                #00b4ff);

}

.section-heading p{

    font-size:1.05rem;
    line-height:1.9;
    color:#5c6b81;
    margin-top:28px;

}


/*==================================================
    SERVICES GRID
==================================================*/
.services-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}


/*==================================================
    SERVICE CARD
==================================================*/
.service-card{

    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    padding:35px 32px;

    border-radius:28px;

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

    border:1px solid rgba(47,84,235,.08);

    backdrop-filter:blur(12px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.06),
        0 5px 20px rgba(47,84,235,.06);

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

    min-height:360px;

}


/* Decorative Top Line */
.service-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:6px;

    background:linear-gradient(90deg,
                #2f54eb,
                #00b4ff,
                #00d084);

}


/* Decorative Circle */

.service-card::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    top:-70px;
    right:-70px;

    background:linear-gradient(135deg,
                rgba(47,84,235,.08),
                rgba(0,180,255,.05));

    transition:.45s;

}


/*==================================================
    SERVICE TAG
==================================================*/

.service-tag{

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

    width:max-content;

    padding:8px 18px;

    border-radius:40px;

    background:linear-gradient(135deg,
                #2f54eb,
                #4f79ff);

    color:#ffffff;

    font-size:.75rem;
    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:18px;

    box-shadow:0 8px 20px rgba(47,84,235,.22);

}


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

.service-card h3{

    font-size:1.45rem;

    color:#18386B;

    line-height:1.35;

    margin-bottom:18px;

    font-weight:700;

}


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

.service-card p{

    flex:1;

    margin:0;

    font-size:1rem;

    line-height:1.9;

    color:#5d6d82;

}


/*==================================================
    META INFORMATION
==================================================*/

.service-meta{

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid rgba(47,84,235,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

.service-meta span{

    color:#6b7b92;

    font-size:.92rem;

    font-weight:600;

}


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

.service-cta{

    text-decoration:none;

    color:#2f54eb;

    font-weight:700;

    transition:.35s;

}

/*==================================================
    SERVICE CARD HOVER EFFECTS
==================================================*/

.service-card:hover{

    transform:translateY(-14px);

    box-shadow:
        0 35px 70px rgba(47,84,235,.18),
        0 15px 35px rgba(0,0,0,.08);

    border-color:rgba(47,84,235,.22);

}

.service-card:hover::after{

    transform:scale(1.25) rotate(15deg);

    background:linear-gradient(
        135deg,
        rgba(47,84,235,.16),
        rgba(0,180,255,.10)
    );

}


/*==================================================
    SHINE ANIMATION
==================================================*/

.service-card .shine{

    display:none;

}

.service-card::selection{

    background:#2f54eb;
    color:#fff;

}

.service-card::before{

    animation:gradientMove 6s linear infinite;

}


/* Animated Light Sweep */

.service-card span,
.service-card h3,
.service-card p,
.service-card .service-meta{

    position:relative;
    z-index:2;

}

.service-card:hover{

    overflow:hidden;

}

.service-card:hover:after{

    transition:.45s;

}

.service-card:hover::marker{

    display:none;

}

.service-card:hover::before{

    animation:gradientMove 2.5s linear infinite;

}


/* Gloss Effect */

.service-card{

    isolation:isolate;

}

.service-card .dummy{

    display:none;

}

.service-card:hover{

    cursor:pointer;

}

.service-card::after{

    z-index:0;

}

.service-card::before{

    z-index:1;

}

.service-card:hover::after{

    opacity:1;

}


/* Moving Gloss */

.service-card::selection{

    background:#2f54eb;

}

.service-card:hover{

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.98),
        rgba(245,249,255,.96)
    );

}

.service-card::after{

    transition:
        transform .5s ease,
        opacity .5s ease;

}


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

.service-card h3::before{

    content:"";

    display:inline-flex;

    width:48px;
    height:48px;

    margin-right:14px;

    border-radius:50%;

    vertical-align:middle;

    background:
    linear-gradient(
        135deg,
        #2f54eb,
        #00b4ff
    );

    box-shadow:
        0 10px 25px rgba(47,84,235,.25);

}

.service-card:hover h3::before{

    transform:rotate(15deg) scale(1.08);

    transition:.4s;

}


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

.service-card h3{

    transition:.35s;

}

.service-card:hover h3{

    color:#2f54eb;

}


/*==================================================
    PARAGRAPH
==================================================*/

.service-card p{

    transition:.35s;

}

.service-card:hover p{

    color:#45566d;

}


/*==================================================
    SERVICE TAG
==================================================*/

.service-tag{

    transition:.35s;

}

.service-card:hover .service-tag{

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(47,84,235,.35);

}


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

.service-meta{

    transition:.35s;

}

.service-card:hover .service-meta{

    border-top-color:rgba(47,84,235,.18);

}


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

.service-cta{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    color:#2f54eb;

    transition:.35s;

}

.service-cta::after{

    content:"➜";

    transition:.35s;

}

.service-card:hover .service-cta{

    color:#1845d8;

}

.service-card:hover .service-cta::after{

    transform:translateX(8px);

}


/*==================================================
    SUBTLE BORDER GLOW
==================================================*/

.service-card{

    position:relative;

}

.service-card::after{

    pointer-events:none;

}

.service-card:hover{

    box-shadow:
        0 18px 40px rgba(47,84,235,.12),
        0 0 0 1px rgba(47,84,235,.08),
        0 0 30px rgba(47,84,235,.10);

}


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

@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }

    100%{

        background-position:100% 50%;

    }

}


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

@media (max-width:1100px){

    .services-grid{

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

        gap:28px;

    }

}


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

@media (max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .service-card{

        min-height:auto;

        padding:28px;

    }

    .service-card h3{

        font-size:1.28rem;

    }

    .service-meta{

        flex-direction:column;

        align-items:flex-start;

    }

}

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

.process-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    align-items:stretch;
    margin-top:20px;

}


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

.process-card{

    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    padding:40px 36px;

    border-radius:28px;

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

    border:1px solid rgba(47,84,235,.08);

    box-shadow:
        0 18px 45px rgba(0,0,0,.06),
        0 6px 18px rgba(47,84,235,.05);

    transition:all .45s ease;

}


/* Decorative Top Line */

.process-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:6px;

    background:linear-gradient(
        90deg,
        #2f54eb,
        #00b4ff,
        #00d084
    );

}


/* Decorative Background Circle */

.process-card::after{

    content:"";

    position:absolute;

    right:-90px;
    top:-90px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(47,84,235,.10),
        transparent 70%
    );

    transition:.45s;

}


/*==================================================
    HOVER EFFECT
==================================================*/

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 60px rgba(47,84,235,.16),
        0 12px 28px rgba(0,0,0,.08);

}

.process-card:hover::after{

    transform:scale(1.2);

}


/*==================================================
    PROCESS HEADING
==================================================*/

.process-card h3{

    position:relative;

    margin:0 0 18px;

    padding-left:72px;

    font-size:1.55rem;

    font-weight:700;

    color:#18386B;

    line-height:1.4;

}


/* Icon Circle */

.process-card h3::before{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:52px;
    height:52px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2f54eb,
        #00b4ff
    );

    box-shadow:
        0 12px 28px rgba(47,84,235,.25);

}


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

.process-card p{

    margin:0 0 28px;

    color:#5b6b81;

    line-height:1.9;

    font-size:1rem;

}


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

.process-list{

    list-style:none;

    padding:0;

    margin:0;

}


/*==================================================
    PROCESS ITEMS
==================================================*/

.process-list li{

    position:relative;

    padding:16px 0 16px 70px;

    color:#45566d;

    font-size:.98rem;

    line-height:1.8;

    border-bottom:1px solid rgba(47,84,235,.08);

    transition:.35s;

}

.process-list li:last-child{

    border-bottom:none;

}


/* Number Circle */

.process-list{

    counter-reset:steps;

}

.process-list li::before{

    counter-increment:steps;

    content:counter(steps);

    position:absolute;

    left:0;
    top:16px;

    width:40px;
    height:40px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #2f54eb,
        #00b4ff
    );

    box-shadow:
        0 8px 18px rgba(47,84,235,.22);

}


/* Vertical Timeline */

.process-list li::after{

    content:"";

    position:absolute;

    left:19px;

    top:56px;

    width:2px;

    height:calc(100% - 20px);

    background:rgba(47,84,235,.15);

}

.process-list li:last-child::after{

    display:none;

}


/*==================================================
    HOVER EFFECTS
==================================================*/

.process-list li:hover{

    padding-left:78px;

    color:#18386B;

}

.process-list li:hover::before{

    transform:scale(1.08);

    transition:.35s;

}


/*==================================================
    PROCESS CARD ANIMATION
==================================================*/

.process-card{

    animation:fadeUp .8s ease both;

}

.process-card:nth-child(2){

    animation-delay:.2s;

}


@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


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

@media (max-width:992px){

    .process-grid{

        grid-template-columns:1fr;

    }

}


@media (max-width:768px){

    .process-card{

        padding:30px;

    }

    .process-card h3{

        font-size:1.35rem;
        padding-left:65px;

    }

    .process-list li{

        padding-left:62px;

    }

}

/*==================================================
    CALL TO ACTION PANEL
==================================================*/

.cta-panel{

    position:relative;
    overflow:hidden;

    margin-top:70px;

    padding:55px 60px;

    border-radius:30px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:35px;
    flex-wrap:wrap;

    background:linear-gradient(
        135deg,
        #1f4fd8 0%,
        #2f54eb 35%,
        #3b82f6 100%
    );

    box-shadow:
        0 30px 70px rgba(47,84,235,.28);

}


/*==================================================
    DECORATIVE BACKGROUND
==================================================*/

.cta-panel::before{

    content:"";

    position:absolute;

    top:-140px;
    right:-140px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.18),
        transparent 72%
    );

}

.cta-panel::after{

    content:"";

    position:absolute;

    left:-120px;
    bottom:-120px;

    width:280px;
    height:280px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.12),
        transparent 72%
    );

}


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

.cta-panel p{

    position:relative;
    z-index:2;

    flex:1;

    margin:0;

    max-width:760px;

    color:#ffffff;

    font-size:1.15rem;

    line-height:2;

    font-weight:500;

}


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

.cta-panel .btn{

    position:relative;
    z-index:2;

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

    padding:18px 34px;

    border-radius:50px;

    text-decoration:none;

    font-size:1rem;
    font-weight:700;

    transition:.35s ease;

}


/* Secondary Button */

.cta-panel .btn-secondary{

    background:#ffffff;

    color:#1f4fd8;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

}


/* Arrow */

.cta-panel .btn-secondary::after{

    content:" →";

    transition:.35s;

}


/* Hover */

.cta-panel .btn-secondary:hover{

    transform:translateY(-5px);

    background:#eef5ff;

    color:#143ba8;

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

}

.cta-panel .btn-secondary:hover::after{

    transform:translateX(8px);

}


/*==================================================
    SHIMMER EFFECT
==================================================*/

.cta-panel .btn-secondary{

    overflow:hidden;

}

.cta-panel .btn-secondary::before{

    content:"";

    position:absolute;

    top:0;
    left:-130%;

    width:55%;
    height:100%;

    transform:skewX(-25deg);

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

    transition:.75s;

}

.cta-panel .btn-secondary:hover::before{

    left:150%;

}


/*==================================================
    FLOATING ANIMATION
==================================================*/

.cta-panel{

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

}

@keyframes ctaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

}


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

@media (max-width:992px){

    .cta-panel{

        padding:45px 35px;

        text-align:center;

        justify-content:center;

    }

    .cta-panel p{

        max-width:100%;

    }

}


@media (max-width:768px){

    .cta-panel{

        padding:35px 25px;

        border-radius:22px;

    }

    .cta-panel p{

        font-size:1rem;

        line-height:1.8;

    }

    .cta-panel .btn{

        width:100%;

    }

}

/*====================================================
    PART 5
    RESPONSIVE DESIGN & FINAL POLISH
=====================================================*/


/*----------------------------------------------------
    LARGE DESKTOPS
----------------------------------------------------*/

@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

    .hero-grid{
        gap:80px;
    }

    .services-grid{
        gap:40px;
    }

}



/*----------------------------------------------------
    DESKTOP
----------------------------------------------------*/

@media (max-width:1200px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

    .hero h1{

        max-width:100%;

    }

    .hero p{

        max-width:850px;

        margin:auto;

    }

    .hero-card{

        justify-content:center;

    }

    .card{

        max-width:700px;

        width:100%;

    }

    .services-grid{

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

    }

}



/*----------------------------------------------------
    TABLETS
----------------------------------------------------*/

@media (max-width:992px){

    main{

        margin-top:95px;

    }

    .hero{

        padding:80px 0 70px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .hero-card{

        width:100%;

    }

    .card{

        width:100%;

        max-width:100%;

    }

    .section{

        padding:75px 0;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .services-grid{

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

        gap:28px;

    }

    .service-card{

        min-height:auto;

    }

    .process-grid{

        grid-template-columns:1fr;

    }

    .cta-panel{

        flex-direction:column;

        text-align:center;

    }

}



/*----------------------------------------------------
    MOBILE
----------------------------------------------------*/

@media (max-width:768px){

    main{

        margin-top:85px;

    }

    .hero{

        padding:65px 0 55px;

    }

    .hero-grid{

        gap:35px;

    }

    .eyebrow{

        font-size:.75rem;

        padding:8px 16px;

    }

    .hero h1{

        font-size:2.2rem;

        line-height:1.2;

    }

    .hero p{

        font-size:1rem;

        line-height:1.8;

    }

    .card{

        padding:32px 28px;

        border-radius:22px;

    }

    .card-title{

        font-size:1.5rem;

    }

    .section{

        padding:65px 0;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .section-heading p{

        font-size:1rem;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .service-card{

        padding:30px 26px;

        border-radius:22px;

    }

    .service-card h3{

        font-size:1.3rem;

    }

    .service-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .process-card{

        padding:30px 25px;

        border-radius:22px;

    }

    .process-card h3{

        font-size:1.35rem;

    }

    .process-list li{

        padding-left:60px;

    }

    .cta-panel{

        padding:35px 28px;

        border-radius:22px;

    }

    .cta-panel p{

        font-size:1rem;

    }

    .cta-panel .btn{

        width:100%;

        justify-content:center;

    }

}



/*----------------------------------------------------
    SMALL MOBILE
----------------------------------------------------*/

@media (max-width:480px){

    main{

        margin-top:80px;

    }

    .hero{

        padding:55px 0 45px;

    }

    .hero h1{

        font-size:1.9rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .card{

        padding:25px;

    }

    .card-title{

        font-size:1.35rem;

    }

    .section{

        padding:55px 0;

    }

    .section-heading{

        margin-bottom:40px;

    }

    .section-heading h2{

        font-size:1.8rem;

    }

    .service-card{

        padding:25px;

    }

    .service-tag{

        font-size:.68rem;

    }

    .service-card h3{

        font-size:1.2rem;

    }

    .process-card{

        padding:25px;

    }

    .process-card h3{

        font-size:1.2rem;

    }

    .process-list li{

        font-size:.95rem;

        padding-left:55px;

    }

    .cta-panel{

        padding:28px 20px;

    }

}



/*----------------------------------------------------
    SMOOTH ANIMATIONS
----------------------------------------------------*/

.hero,
.section,
.card,
.service-card,
.process-card,
.cta-panel{

    transition:all .35s ease;

}

.service-card:hover,
.process-card:hover,
.card:hover{

    will-change:transform;

}



/*----------------------------------------------------
    CUSTOM SCROLLBAR
----------------------------------------------------*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf3ff;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        #2f54eb,
        #00b4ff
    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#1e40af;

}



/*----------------------------------------------------
    TEXT SELECTION
----------------------------------------------------*/

::selection{

    background:#2f54eb;

    color:#ffffff;

}



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

img{

    max-width:100%;

    height:auto;

    display:block;

}



/*----------------------------------------------------
    ACCESSIBILITY
----------------------------------------------------*/

a,
button{

    transition:all .3s ease;

}

a:focus,
button:focus{

    outline:3px solid rgba(47,84,235,.35);

    outline-offset:4px;

}



/*----------------------------------------------------
    END OF SERVICES PAGE CSS
----------------------------------------------------*/

 


    .popup-overlay{
      position:fixed;
      inset:0;
      background:rgba(16,32,51,.62);
      backdrop-filter:blur(6px);
      z-index:999;
    }
    .popup-modal{
      position:fixed;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:min(92%,640px);
      max-height:90vh;
      overflow:auto;
      background:#fff;
      border-radius:28px;
      padding:1.5rem;
      box-shadow:0 30px 80px rgba(0,0,0,.28);
      z-index:1000;
      border:1px solid rgba(16,32,51,.08);
    }
    .popup-header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .popup-badge{
      display:inline-block;
      padding:.35rem .7rem;
      border-radius:999px;
      background:#edf4ff;
      color:#1746a2;
      font-size:.8rem;
      font-weight:700;
      margin-bottom:.7rem;
    }
    .popup-header h2{
      margin:0 0 .4rem;
      font-size:1.7rem;
    }
    .popup-header p{
      margin:0;
      color:#60738d;
    }
    .popup-close{
      width:42px;
      height:42px;
      border:0;
      border-radius:12px;
      background:#f1f5fb;
      color:#102033;
      font-size:1.8rem;
      line-height:1;
      cursor:pointer;
    }
    .popup-form{margin-top:1rem}
    .form-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:1rem;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:.45rem;
    }
    .field label{
      font-weight:700;
      color:#102033;
      font-size:.9rem;
    }
    .field input,
    .field textarea{
      width:100%;
      padding:1rem 1.05rem;
      border-radius:14px;
      border:1px solid #cbd7ea;
      font:inherit;
      background:#fff;
      outline:none;
    }
   .field input:focus,
.field textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
    .field-full{grid-column:1 / -1}
    .popup-submit{margin-top:1.2rem;width:100%}
    body.modal-open{overflow:hidden}

.go-top-btn{
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  width:32px;
  height:32px;
   border-radius:8px;
  border:0;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:800;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.go-top-btn.show{
  display:flex;
  opacity:1;
}
.go-top-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(37,99,235,.45);
}


    @media (max-width: 1024px){
      .hero-grid,.services-grid,.process-grid,.footer-grid{grid-template-columns:1fr 1fr}
      .header-contact{margin-left:0}
      .main-nav{justify-content:flex-start}
    }
    @media (max-width: 900px){
      .hero-grid,.process-grid,.footer-grid{grid-template-columns:1fr}
      .services-grid{grid-template-columns:1fr 1fr}
      .main-nav{
        width:100%;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:.65rem;
        padding:1rem 0 .25rem;
      }
      .main-nav.show{display:flex}
      .nav-item{
        width:100%;
        min-width:unset;
        justify-content:flex-start;
      }
      
      .header-contact{
        width:100%;
        justify-content:space-between;
      }
    }
    @media (max-width: 640px){
      .services-grid{grid-template-columns:1fr}
      .brand-tagline{display:none}
      .phone-link{font-size:.95rem}
      .apply-btn{padding:.75rem 1rem}
      .header-contact{gap:.75rem}
      .form-grid{grid-template-columns:1fr}
    }