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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f7f8fc;
    color:#111;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}


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

.header{

    position:fixed;

    top:25px;
    left:0;
    width:100%;

    z-index:999;

    transition:.35s ease;

}

.header .container{

    height:90px;

    background:#fff;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 35px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    transition:.35s;

}


/* Sticky */

.header.sticky{

    top:0;

}

.header.sticky .container{

    border-radius:0;

    width:100%;

    max-width:100%;

    padding:0 60px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.08);

}


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

.logo img{

    width:155px;

}


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

.desktop-nav{

    flex:1;

    display:flex;

    justify-content:center;

}

.desktop-nav>ul{

    display:flex;

    align-items:center;

    gap:18px;

}

.desktop-nav>ul>li{

    position:relative;

}

.desktop-nav>ul>li>a{

    display:flex;

    align-items:center;

    gap:6px;

    padding:32px 12px;

    font-size:16px;

    font-weight:600;

    color:#171717;

    transition:.3s;

    position:relative;

}


/* Hover */

.desktop-nav>ul>li>a:hover{

    color:#FFC21C;

}


/* Active */

.desktop-nav>ul>li>a.active{

    color:#111;

}

.desktop-nav>ul>li>a.active::after{

    content:"";

    position:absolute;

    left:12px;

    bottom:20px;

    width:45px;

    height:3px;

    background:#FFC21C;

    border-radius:20px;

}


/* Arrow */

.desktop-nav i{

    font-size:18px;

    transition:.3s;

}

.dropdown:hover i{

    transform:rotate(180deg);

}


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

.cta-btn{

    display:flex;

    align-items:center;

    gap:12px;

    background:#FFC21C;

    color:#111;

    font-weight:700;

    padding:18px 28px;

    border-radius:60px;

    transition:.35s;

    white-space:nowrap;

}

.cta-btn i{

    font-size:20px;

    transition:.35s;

}

.cta-btn:hover{

    background:#111;

    color:#fff;

    transform:translateY(-2px);

}

.cta-btn:hover i{

    transform:translateX(5px);

}


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

.hero{

    min-height:180vh;

    padding-top:180px;

}

.hero-content{

    text-align:center;

}

.hero h1{

    font-size:58px;

    font-weight:700;

    margin-bottom:10px;

}

.hero p{

    font-size:20px;

    color:#666;

}


/*==============================
    HIDE MOBILE NAV
==============================*/

.mobile-navigation{

    display:none;

}
/*==================================
        MEGA DROPDOWN MENU
==================================*/

.dropdown{
    position:relative;
}

/* Mega Menu */

.mega-menu{

    position:absolute;

    top:120%;

    left:50%;

    transform:translateX(-50%) translateY(25px);

    width:820px;

    background:#fff;

    border-radius:22px;

    padding:35px;

    display:grid;

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

    gap:30px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:all .35s ease;

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

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

    z-index:999;

}

/* Show Menu */

.dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}

/* Column */

.mega-column{

    display:flex;

    flex-direction:column;

}

/* Heading */

.mega-column h4{

    font-size:18px;

    font-weight:700;

    margin-bottom:18px;

    color:#111;

    position:relative;

    padding-bottom:12px;

}

.mega-column h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:40px;

    height:3px;

    border-radius:30px;

    background:#FFC21C;

}

/* Links */

.mega-column a{

    display:flex;

    align-items:center;

    padding:12px 15px;

    margin-bottom:8px;

    color:#444;

    font-size:15px;

    font-weight:500;

    border-radius:12px;

    transition:.3s;

}

/* Left Accent */

.mega-column a::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:#FFC21C;

    margin-right:12px;

    opacity:0;

    transition:.3s;

}

/* Hover */

.mega-column a:hover{

    background:#FFF9E7;

    color:#111;

    padding-left:22px;

}

.mega-column a:hover::before{

    opacity:1;

}

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

.dropdown:hover .mega-column:nth-child(1){

    animation:fadeUp .35s ease;

}

.dropdown:hover .mega-column:nth-child(2){

    animation:fadeUp .45s ease;

}

.dropdown:hover .mega-column:nth-child(3){

    animation:fadeUp .55s ease;

}

/*==============================
        KEYFRAMES
==============================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================
      SMALL ARROW ON TOP
==============================*/

.mega-menu::before{

    content:"";

    position:absolute;

    top:-10px;

    left:50%;

    transform:translateX(-50%) rotate(45deg);

    width:20px;

    height:20px;

    background:#fff;

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

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

}

/*==============================
      HOVER DELAY FIX
==============================*/

.dropdown::after{

    content:"";

    position:absolute;

    left:0;

    top:100%;

    width:100%;

    height:25px;

}
/*=========================================
        MOBILE FOOTER NAVIGATION
=========================================*/

@media (max-width:991px){

/* Hide Desktop */

.header{
    display:none;
}

/* Hero */

.hero{
    padding:40px 20px 120px;
    min-height:100vh;
}

.hero h1{
    font-size:36px;
}

.hero p{
    font-size:16px;
}

/*=============================
    Bottom Navigation
=============================*/

.mobile-navigation{

    position:fixed;

    left:50%;

    bottom:0px;

    transform:translateX(-50%);

    width:100%;

    max-width:100%;

    height:78px;

    background:#fff;

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    z-index:9999;

}

/* Navigation */

.mobile-navigation ul{

    position:relative;

    width:100%;

    display:flex;

}

/* Item */

.mobile-navigation ul li{

    position:relative;

    width:20%;

    height:78px;

    list-style:none;

    z-index:2;

}

/* Link */

.mobile-navigation ul li a{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    width:100%;

    height:100%;

    font-weight:500;

}

/* Icon */

.mobile-navigation ul li a .icon{

    position:relative;

    display:block;

    line-height:80px;

    font-size:24px;

    color:#888;

    transition:.45s;

}

/* Active Icon */

.mobile-navigation ul li.active a .icon{

    transform:translateY(-10px);

    color:#FFC21C;

}

/* Text */

.mobile-navigation ul li a .text{

    position:absolute;

    color:#FFC21C;

    font-size:12px;

    font-weight:600;

    letter-spacing:.4px;

    opacity:0;

    transform:translateY(18px);

    transition:.35s;

}

/* Active Text */

.mobile-navigation ul li.active a .text{

    opacity:1;

    transform:translateY(10px);

}

/*============================
        INDICATOR
============================*/

.indicator{

    position:absolute;

    top:-34px;

    left:0;

    width:70px;

    height:70px;

    background:#FFC21C;

    border-radius:50%;

    border:6px solid #f7f8fc;

    transition:.45s;

}

/* Curves */

.indicator::before{

    content:'';

    position:absolute;

    top:50%;

    left:-24px;

    width:24px;

    height:24px;

    background:transparent;

    border-top-right-radius:24px;

    box-shadow:2px -8px 0 #f7f8fc;

}

.indicator::after{

    content:'';

    position:absolute;

    top:50%;

    right:-24px;

    width:24px;

    height:24px;

    background:transparent;

    border-top-left-radius:24px;

    box-shadow:-2px -8px 0 #f7f8fc;

}

/*=================================
    INDICATOR POSITION
=================================*/

.mobile-navigation ul li:nth-child(1).active ~ .indicator{
    transform:translateX(calc(76px * 0));
}

.mobile-navigation ul li:nth-child(2).active ~ .indicator{
    transform:translateX(calc(76px * 1));
}

.mobile-navigation ul li:nth-child(3).active ~ .indicator{
    transform:translateX(calc(76px * 2));
}

.mobile-navigation ul li:nth-child(4).active ~ .indicator{
    transform:translateX(calc(76px * 3));
}

.mobile-navigation ul li:nth-child(5).active ~ .indicator{
    transform:translateX(calc(76px * 4));
}

}

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

@media (max-width:480px){

.mobile-navigation{

    width:100%;

    left:0;

    bottom:0;

    transform:none;

    border-radius:22px 22px 0 0;

}

}
/*====================================
        PREMIUM FINISH
====================================*/

/* Smooth transitions */

*,
*::before,
*::after{
    transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    transform .3s ease,
    opacity .3s ease;
}


/* Header Blur */

.header{

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

}

.header .container{

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

}


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

.desktop-nav>ul>li>a{

    border-radius:12px;

}

.desktop-nav>ul>li>a:hover{

    background:#fafafa;

}


/* Underline Animation */

.desktop-nav>ul>li>a::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:16px;

    width:0;

    height:3px;

    background:#FFC21C;

    border-radius:30px;

    transform:translateX(-50%);

    transition:.35s;

}

.desktop-nav>ul>li>a:hover::before{

    width:60%;

}

.desktop-nav>ul>li>a.active::before{

    width:60%;

}


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

.logo{

    display:flex;
    align-items:center;

}

.logo img{

    transition:.35s;

}

.logo:hover img{

    transform:scale(1.05);

}


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

.cta-btn{

    position:relative;

    overflow:hidden;

}

.cta-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-30deg);

}

.cta-btn:hover::before{

    left:120%;

    transition:.8s;

}


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

.mega-menu{

    overflow:hidden;

}

.mega-column a{

    position:relative;

}

.mega-column a::after{

    content:"➜";

    position:absolute;

    right:18px;

    opacity:0;

    transition:.3s;

}

.mega-column a:hover::after{

    opacity:1;

    right:12px;

}


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

.hero{

    background:

    linear-gradient(
    to bottom,
    #ffffff,
    #f8f9fc
    );

}


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

.mobile-navigation{

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

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

}

.mobile-navigation ul li a{

    user-select:none;

}

.mobile-navigation ul li .icon{

    transition:.35s;

}

.mobile-navigation ul li:hover .icon{

    color:#FFC21C;

}


/* Indicator Glow */

.indicator{

    box-shadow:

    0 12px 30px rgba(37,99,235,.35);

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:#FFC21C;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#111;

}


/*=========================
      SELECTION
=========================*/

::selection{

    background:#FFC21C;

    color:#111;

}


/*=========================
      PAGE LOAD
=========================*/

body{

    opacity:0;

    transition:.4s;

}

body.loaded{

    opacity:1;

}


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

@media (max-width:1200px){

.header .container{

    padding:0 25px;

}

.desktop-nav>ul{

    gap:8px;

}

.desktop-nav>ul>li>a{

    font-size:15px;

    padding:30px 10px;

}

.mega-menu{

    width:700px;

}

}

@media (max-width:991px){

.desktop-nav{

    display:none;

}

.cta-btn{

    display:none;

}

}
/*=========================================
      MOBILE SERVICES SIDEBAR
=========================================*/

.mobile-sidebar,
.sidebar-overlay{
    display:none;
}

@media (max-width:991px){

/* Overlay */

.sidebar-overlay{

    display:block;

    position:fixed;
    inset:0;

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

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:9998;

}

.sidebar-overlay.show{

    opacity:1;
    visibility:visible;

}

/* Sidebar */

.mobile-sidebar{

    display:flex;
    flex-direction:column;

    position:fixed;

    top:0;
    left:-340px;

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

    height:100vh;

    background:#fff;

    transition:.35s ease;

    z-index:9999;

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

}

/* Show Sidebar */

.mobile-sidebar.show{

    left:0;

}

/* Header */

.sidebar-header{

    height:70px;

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

    padding:0 20px;

    border-bottom:1px solid #eee;

}

.sidebar-header h2{

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

}

.sidebar-header button{

    width:40px;
    height:40px;

    border:none;
    outline:none;

    background:#f5f5f5;

    border-radius:50%;

    cursor:pointer;

}

.sidebar-header button i{

    font-size:22px;

}

/* Body */

.sidebar-body{

    flex:1;

    overflow-y:auto;

    padding:15px;

}

/* Accordion */

.accordion{

    border-bottom:1px solid #eee;

}

.accordion-btn{

    width:100%;

    display:flex;

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

    padding:18px 5px;

    background:none;

    border:none;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    color:#222;

}

.accordion-btn i{

    font-size:22px;

    transition:.3s;

}

/* Rotate Arrow */

.accordion.active .accordion-btn i{

    transform:rotate(180deg);

}

/* Dropdown */

.accordion-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

/* Links */

.accordion-content a{

    display:block;

    padding:12px 18px;

    margin-bottom:8px;

    border-radius:10px;

    color:#555;

    background:#fafafa;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}

.accordion-content a:hover{

    background:#FFC21C;

    color:#111;

    padding-left:24px;

}

/* Scrollbar */

.sidebar-body::-webkit-scrollbar{

    width:5px;

}

.sidebar-body::-webkit-scrollbar-thumb{

    background:#ccc;

    border-radius:20px;

}

}
/*=========================================
        MOBILE TAX CALCULATOR
==========================================*/

.tax-overlay,
.mobile-tax-panel{
    display:none;
}

@media (max-width:991px){

/* Overlay */

.tax-overlay{

    display:block;

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9998;

}

.tax-overlay.show{

    opacity:1;

    visibility:visible;

}

/* Panel */

.mobile-tax-panel{

    display:flex;

    flex-direction:column;

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:#F7F8FC;

    transition:.4s ease;

    z-index:9999;

}

.mobile-tax-panel.show{

    right:0;

}

/* Header */

.tax-header{

    height:75px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 20px;

    background:#fff;

    border-bottom:1px solid #ececec;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.tax-header button{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#F4F4F4;

    cursor:pointer;

    transition:.3s;

}

.tax-header button:hover{

    background:#FFC107;

}

.tax-header button i{

    font-size:24px;

}

.tax-header h2{

    font-size:20px;

    font-weight:700;

    color:#111;

}

.tax-header span{

    display:block;

    margin-top:2px;

    font-size:13px;

    color:#888;

}

/* Body */

.tax-body{

    flex:1;

    overflow-y:auto;

    padding:25px 20px 120px;

}

/* Form */

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;

}

.form-group input,
.form-group select{

    width:100%;

    height:52px;

    padding:0 16px;

    border:1px solid #ddd;

    border-radius:14px;

    outline:none;

    background:#fff;

    font-size:15px;

    transition:.3s;

}

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

    border-color:#FFC107;

    box-shadow:0 0 0 4px rgba(255,193,7,.15);

}

/* Button */

.calculate-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:16px;

    background:#FFC107;

    color:#111;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    margin-top:10px;

    transition:.3s;

}

.calculate-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(255,193,7,.35);

}

.calculate-btn i{

    margin-right:8px;

}

/* Results */

.tax-result{

    margin-top:30px;

}

.result-card{

    background:#fff;

    border-radius:18px;

    padding:18px 20px;

    margin-bottom:15px;

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

}

.result-card span{

    display:block;

    font-size:13px;

    color:#888;

    margin-bottom:6px;

}

.result-card strong{

    font-size:22px;

    color:#111;

}

/* Scrollbar */

.tax-body::-webkit-scrollbar{

    width:5px;

}

.tax-body::-webkit-scrollbar-thumb{

    background:#ccc;

    border-radius:20px;

}

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

.hero{

    padding:200px 0 0;

    background:
    radial-gradient(circle at top right,#ffe8e8 0%,transparent 0%),
    linear-gradient(#ffffff,#fffaf9);

    overflow:hidden;

}

.hero .container{

    width:1320px;

    max-width:calc(100% - 80px);

    margin:auto;

}

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

.hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    margin-bottom:55px;

}

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

.hero-content{

    max-width:640px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:12px 24px;

    background:#FFE7E7;

    border-radius:50px;

    margin-bottom:28px;

}

.hero-badge span{

    color:#FFC21C;

    font-weight:600;

    font-size:16px;

}

.hero-content h1{

    font-size:50px;

    line-height:1.08;

    font-weight:800;

    color:#161616;

    letter-spacing:-2px;

    margin-bottom:28px;

}

.hero-content h1 span{

    color:#FFC21C;

}

.hero-content p{

    font-size:24px;

    line-height:1.8;

    color:#6E6E73;

    margin-bottom:40px;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:45px;

}

.btn-primary{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:200px;

    height:60px;

    background:#FFC21C;

    color:black;

    font-size:18px;

    font-weight:700;

    border-radius:18px;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-5px);

    background:#FFC21C;

}

.btn-secondary{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:250px;

    height:60px;

    background:#fff;

    color:#222;

    border:2px solid #ECECEC;

    border-radius:18px;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.btn-secondary:hover{

    border-color:#25D366;

    color:#25D366;

}

.btn-secondary i{

    font-size:20px;

    color:#25D366;

}

.btn-primary i{

    font-size:20px;

}

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

.hero-stats{

    display:flex;

    gap:50px;

    align-items:center;

}

.stat-item{

    display:flex;

    align-items:center;

    gap:16px;

}

.stat-icon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;


}

.stat-icon i{

    font-size:20px;

    color:#FFC21C;

}

.stat-item h3{

    font-size:20px;

    color:#111;

    font-weight:800;

    margin-bottom:4px;

}

.stat-item span{

    font-size:18px;

    color:#777;

}

/*=========================
      RIGHT IMAGE
=========================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:flex-end;

}

.hero-image img{

    width:100%;

    max-width:760px;

    display:block;

}

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

.hero a{

    text-decoration:none;

}

/* Desktop only */

@media (max-width:1199px){

.hero{

    display:none;

}

}
/*=========================================
        HERO FEATURE SECTION
=========================================*/

.hero-features{

    display:grid;

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

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    border:1px solid #ececec;

    margin-bottom:40px;

}

.feature-box{

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px 24px;

    border-right:1px solid #ececec;

    transition:.35s;

    cursor:pointer;

    position:relative;

    background:#fff;

}

.feature-box:last-child{

    border-right:none;

}

.feature-box:hover{

    background:#fff9f4;

    transform:translateY(-6px);

}

.feature-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:#FFC21C;

    transform:scaleY(0);

    transition:.35s;

}

.feature-box:hover::before{

    transform:scaleY(1);

}

.feature-box i{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;


    color:#FFC21C;

    font-size:22px;

    flex-shrink:0;

    transition:.35s;

}

.feature-box:hover i{

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

}

.feature-box h4{

    font-size:20px;

    font-weight:700;

    color:#181818;

    margin-bottom:6px;

    line-height:1.3;

}

.feature-box p{

    color:#777;

    font-size:14px;

    line-height:1.6;

}

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

.hero-content{

    animation:heroLeft .8s ease forwards;

}

.hero-image{

    animation:heroRight .9s ease forwards;

}

.hero-stats{

    animation:heroUp 1s ease forwards;

}

.hero-features{

    animation:heroBottom 1.1s ease forwards;

}

@keyframes heroLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroBottom{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Floating image animation */

.hero-image img{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Button hover effects */

.btn-primary,
.btn-secondary{

    overflow:hidden;

    position:relative;

}

.btn-primary::after,
.btn-secondary::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.btn-primary:hover::after,
.btn-secondary:hover::after{

    left:150%;

}

/* Stats hover */

.stat-item{

    transition:.3s;

}

.stat-item:hover{

    transform:translateY(-6px);

}

.stat-item:hover .stat-icon{

    transform:scale(1.1);

    background:#FFC21C;

}

.stat-item:hover .stat-icon i{

    color:#fff;

}


/* ================================
   HIDE MOBILE HEADER DESKTOP
================================ */

.fg-mobile-header{
    display:none;
}



/* ================================
   SHOW ONLY MOBILE VIEW
================================ */

@media(max-width:768px){


.fg-mobile-header{

    display:block;

    width:100%;
    background:#ffffff;

    position:sticky;
    top:0;
    z-index:999;

    padding:12px 18px;

    box-shadow:0 2px 10px rgba(0,0,0,0.06);

}



.fg-mobile-header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* LOGO */

.fg-mobile-logo img{

    width:130px;
    height:auto;

}



/* TAX BUTTON */

.fg-mobile-tax-btn a{

    background:#FFC21C;

    color:Black;

    padding:15px 25px;

    border-radius:30px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}



.fg-mobile-tax-btn a:active{

    transform:scale(.95);

}


}



/* SMALL MOBILE */

@media(max-width:400px){


.fg-mobile-logo img{

    width:115px;

}


.fg-mobile-tax-btn a{

    font-size:11px;

    padding:9px 12px;

}


}


/* =================================
   MOBILE YELLOW SCROLL BAR
================================= */

.fg-scroll-progress{
    display:none;
}



@media(max-width:768px){

    .fg-scroll-progress{

        display:block;

        position:fixed;

        top:0;
        left:0;

        width:100%;
        height:4px;

        background:#eee;

        z-index:99999;

    }


    .fg-scroll-progress-bar{

        height:100%;

        width:0%;

        background:#ffc400;

        transition:width .1s ease;

    }

}

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

.footer{
    padding:70px 0 25px;
    background:transparent;
    border-top:1px solid #e5e7eb;
}

.footer-container{
    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
}

.footer-logo img{
    width:170px;
    margin-bottom:18px;
}

.footer-logo p{
    color:#6b7280;
    line-height:1.8;
}

.footer h4{
    margin-bottom:18px;
    font-size:17px;
    color:#111827;
}

.footer-links{
    display:flex;
    flex-direction:column;
}

.footer-links a{
    text-decoration:none;
    color:#6b7280;
    margin-bottom:12px;
    transition:.3s;
}

.footer-links a:hover{
    color:#FFC21C;
}

.footer-contact p{
    color:#6b7280;
    margin-bottom:12px;
}

.footer-bottom{
    border-top:1px solid #e5e7eb;
    margin-top:50px;
    padding-top:20px;
    text-align:center;
    color:#6b7280;
    font-size:14px;
}

/* Mobile */

@media (max-width:768px){

.footer{
    padding:50px 0 20px;
}

.footer-container{
    grid-template-columns:1fr;
    gap:35px;
}

.footer-logo{
    text-align:center;
}

.footer-logo img{
    margin:auto auto 18px;
}

.footer-links,
.footer-contact{
    text-align:center;
}

}

/* ===============================
   MOBILE CONTENT WRAPPER
================================ */

.fg-mobile-content{
    display:none;
}

@media (max-width:768px){

    .fg-mobile-content{
        display:block;
        width:100%;
        max-width:100%;
        margin:0 auto;
        padding:0 18px;
        box-sizing:border-box;
    }

    .fg-mobile-content section{
        margin-bottom:50px;
    }

}

@media (max-width:480px){

    .fg-mobile-content{
        padding:0 16px;
    }

}

@media (max-width:360px){

    .fg-mobile-content{
        padding:0 14px;
    }

}
/* ==========================================
   MOBILE HERO SECTION
========================================== */

.fg-mobile-hero{
    display:none;
}

@media (max-width:768px){

.fg-mobile-hero{

    display:block;
    padding:20px 20px 10px;
    overflow:hidden;

}

.fg-hero-content{

    width:100%;
    max-width:420px;
    margin:auto;
    text-align:center;

}


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

.fg-hero-title{

    font-size:38px;
    font-weight:800;
    line-height:1.15;
    color:#1f1f1f;

    margin-bottom:25px;
    margin-top:50px;

}

.fg-hero-title span{

    color:#FFC21C;

}


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

.fg-hero-image{

    margin-bottom:25px;

}

.fg-hero-image img{

    width:100%;
    max-width:380px;

    display:block;
    margin:auto;

}


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

.fg-hero-description{

    font-size:16px;
    line-height:1.7;
    color:#666;

    margin-bottom:28px;

}


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

.fg-hero-buttons{

    display:flex;
    gap:14px;

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

}


/* Primary */

.fg-btn-primary{

    background:#FFC21C;

    color:Black;

    text-decoration:none;

    padding:15px 20px;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    flex:1;

    transition:.3s;

}


.fg-btn-primary:hover{

    background:#FFC21C;

}


/* Secondary */

.fg-btn-secondary{

    border:1px solid #d9d9d9;

    background:#fff;

    color:#25D366;

    text-decoration:none;

    padding:14px 20px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:0px;

    flex:1;

    font-size:15px;

    font-weight:700;

    transition:.3s;

}


.fg-btn-secondary:hover{

    background:#f6f6f6;

}



/* ===========================
      SMALL PHONES
=========================== */

@media (max-width:430px){

.fg-mobile-hero{

    padding:18px 16px;

}

.fg-hero-title{

    font-size:32px;

}

.fg-hero-description{

    font-size:15px;

}

.fg-hero-buttons{

    flex-direction:column;

}

.fg-btn-primary,
.fg-btn-secondary{

    width:100%;

}

}

}
/* ==========================================
   MOBILE STATS
========================================== */

.fg-mobile-stats{

    display:grid;

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

    gap:10px;

    margin:18px 16px 24px;

}



.fg-stat{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}



.fg-stat-icon{

    width:44px;
    height:44px;

    border-radius:50%;

    color:#FFC21C;

    font-size:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:10px;

}



.fg-stat h3{

    font-size:24px;

    font-weight:800;

    color:#111;

    margin-bottom:4px;

}



.fg-stat p{

    font-size:13px;

    color:#777;

    line-height:1.3;

}





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

.fg-feature-grid{

    display:grid;

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

    gap:12px;

    padding:0 16px 30px;

}





.fg-feature-card{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:16px;

    padding:18px 15px;

    display:flex;

    gap:14px;

    align-items:flex-start;

    transition:.3s;

}



.fg-feature-card:hover{

    border-color:#FFC21C;

    transform:translateY(-3px);

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

}





.fg-feature-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    color:#FFC21C;

    font-size:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}





.fg-feature-card h4{

    font-size:15px;

    color:#111;

    margin-bottom:6px;

    font-weight:700;

}





.fg-feature-card p{

    font-size:13px;

    line-height:1.5;

    color:#777;

}





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

@media(max-width:430px){

.fg-mobile-stats{

    gap:8px;

}



.fg-stat h3{

    font-size:20px;

}



.fg-stat p{

    font-size:12px;

}



.fg-feature-grid{

    grid-template-columns:1fr;

}



.fg-feature-card{

    padding:16px;

}



.fg-feature-icon{

    width:42px;

    height:42px;

}



}

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

.fg-process-section{

    padding:80px 0;
    background:transparent;

}

.fg-process-grid{

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

    margin:auto;

    display:grid;

    grid-template-columns:1.35fr 1fr;

    gap:35px;

}



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

.fg-process-card,
.fg-why-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:22px;

    padding:55px;

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

    position:relative;

    overflow:hidden;

}



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

.fg-section-title{

    font-size:52px;

    font-weight:800;

    color:#181818;

    margin-bottom:55px;

    letter-spacing:-1px;

    line-height:1.1;

}



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

.fg-steps{

    display:flex;

    justify-content:space-between;

    position:relative;

    gap:25px;

}



/* dotted connecting line */

.fg-step-line{

    position:absolute;

    top:42px;

    left:11%;

    width:78%;

    height:2px;

    background:

    repeating-linear-gradient(
        to right,
        #f7b8be 0,
        #f7b8be 6px,
        transparent 6px,
        transparent 11px
    );

    z-index:1;

}



/* ==========================================
      INDIVIDUAL STEP
========================================== */

.fg-step{

    flex:1;

    position:relative;

    text-align:center;

    z-index:2;

}



.fg-step-icon{

    width:100px;

    height:100px;

    margin:auto auto 30px;

    background:#fdecef;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}



.fg-step-icon img{

    width:46px;

    height:46px;

    object-fit:contain;

}



.fg-step h3{

    font-size:20px;

    font-weight:700;

    color:#222;

    line-height:1.35;

    margin-bottom:15px;

}



.fg-step p{

    color:#6c7280;

    font-size:18px;

    line-height:1.7;

    max-width:220px;

    margin:auto;

}

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


.fg-process-section{
    padding:90px 0;
}

.fg-container{
    width:90%;
    max-width:1400px;
    margin:auto;

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



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

.fg-card{

    background:#fff;

    border-radius:28px;

    padding:30px;

    border:1px solid #edf1f5;

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

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.fg-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);

}



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

.fg-heading{

    margin-bottom:10px;

}

.fg-tag{

    display:inline-block;


    color:#FFC21C;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    padding:8px 18px;

    border-radius:50px;

    margin-bottom:20px;

}

.fg-heading h2{

    font-size:25px;

    line-height:1.15;

    font-weight:800;

    color:#111827;

    margin-bottom:18px;

}

.fg-heading p{

    max-width:600px;

    font-size:16px;

    line-height:1.8;

    color:#6b7280;
    margin-top:-10px;

}



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

.fg-process-wrapper{

    display:flex;

    justify-content:space-between;

    gap:30px;

    margin-top: 50px;
    position:relative;

}

.fg-process-line{

    position:absolute;

    top:48px;

    left:10%;

    width:80%;

    border-top:2px dashed #FFC21C;

    z-index:1;

}



/* ===========================
      STEP
=========================== */

.fg-step{

    position:relative;

    flex:1;

    text-align:center;

    z-index:2;

}

.fg-step-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    background:#fff3f3;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    transition:.35s;

}

.fg-step-icon i{

    font-size:40px;

    color:#FFC21C;

}

.fg-step h4{

    font-size:15px;

    font-weight:700;

    margin-bottom:12px;

    color:#111827;

}

.fg-step p{

    font-size:15px;

    line-height:1.7;

    color:#6b7280;

}



/* Hover */

.fg-step:hover .fg-step-icon{

    background:#FFC21C;

    transform:translateY(-6px);

}

.fg-step:hover i{

    color:#fff;

}

.fg-step:hover h4{

    color:#FFC21C;

}
/* ==========================================
   WHY CHOOSE US
========================================== */

.fg-why-wrapper{

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

}


/* LEFT SIDE */

.fg-features{

    flex:1;

}


.fg-feature{

    display:flex;
    align-items:flex-start;
    gap:20px;

    padding:18px 0;

    border-bottom:1px solid #edf1f5;

    transition:.35s;

}

.fg-feature:last-child{

    border-bottom:none;

}



/* ICON */

.fg-feature-icon{

    width:60px;
    height:60px;

    min-width:60px;

    border-radius:18px;

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

    transition:.35s;

}


.fg-feature-icon i{

    font-size:25px;

    color:#FFC21C;

    transition:.35s;

}



/* TEXT */

.fg-feature h4{

    font-size:18px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;

}


.fg-feature p{

    font-size:16px;

    line-height:1.7;

    color:#6b7280;

}



/* HOVER */

.fg-feature:hover{

    transform:translateX(8px);

}


.fg-feature:hover .fg-feature-icon{

    background:#FFC21C;

}


.fg-feature:hover .fg-feature-icon i{

    color:#fff;

}



/* ==========================================
      CONSULTANT IMAGE
========================================== */

.fg-person{

    width:320px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



.fg-person-circle{

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:#ecfdf5;

}



.fg-person img{

    width:280px;

    position:relative;

    z-index:2;

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

}



/* FLOAT */

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}



/* ==========================================
      BUTTON (OPTIONAL)
========================================== */

.fg-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:35px;

    background:#FFC21C;

    color:#fff;

    padding:15px 28px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.fg-btn:hover{

    background:#FFC21C;

    transform:translateY(-3px);

}

.fg-btn i{

    font-size:14px;

}

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

.mobile-process{

    display:none;

}

@media (max-width:768px){

.mobile-process{

    display:flex;
    flex-direction:column;
    gap:22px;

    padding:20px 16px 40px;

    background:#f7f8fb;

}

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

.mobile-card{

    background:#fff;

    border-radius:22px;

    padding:24px;

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

    border:1px solid #edf0f5;

}


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

.section-tag{

    display:inline-block;

    color:#FFC21C;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:12px;

}


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

.mobile-card h2{

    font-size:30px;

    line-height:1.2;

    font-weight:800;

    color:#111827;

    margin-bottom:14px;

}


.section-text{

    color:#6b7280;

    font-size:16px;

    line-height:1.8;

    margin-bottom:30px;

}



/*==============================
 TIMELINE
==============================*/

.timeline{

    position:relative;

    padding-left:18px;

}


.timeline::before{

    content:"";

    position:absolute;

    left:22px;

    top:10px;

    bottom:10px;

    width:2px;

    background:#ffd56a;

}



/*==============================
 STEP
==============================*/

.timeline-item{

    display:flex;

    gap:18px;

    position:relative;

    margin-bottom:28px;

}

.timeline-item:last-child{

    margin-bottom:0;

}



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

.timeline-icon{

    width:46px;
    height:46px;

    min-width:46px;

    border-radius:50%;

    background:#fff8eb;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFC21C;

    font-size:20px;

    position:relative;

    z-index:5;

    transition:.35s;

}

.timeline-item:hover .timeline-icon{

    background:#FFC21C;

    color:#fff;

}



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

.timeline-content h4{

    font-size:18px;

    color:#111827;

    margin-bottom:8px;

    font-weight:700;

}


.timeline-content p{

    color:#6b7280;

    font-size:15px;

    line-height:1.7;

}

}
/*==========================================
    MOBILE PROCESS SECTION
==========================================*/

.fg-mobile-process,
.fg-mobile-why{
    display:none;
}

@media (max-width:768px){

.fg-mobile-process,
.fg-mobile-why{

    display:block;

    padding:60px 20px;

    background:#fff;

}

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

.fg-mobile-heading{

    text-align:center;

    margin-bottom:40px;

}

.fg-mobile-heading span{

    display:inline-block;

    padding:8px 18px;


    color:#FFC21C;

    font-size:12px;

    font-weight:700;

    border-radius:30px;

    letter-spacing:1px;

    margin-bottom:18px;

}

.fg-mobile-heading h2{

    font-size:34px;

    font-weight:800;

    line-height:1.2;

    color:#111827;

    margin-bottom:15px;

}

.fg-mobile-heading strong{

    color:#FFC21C;

}

.fg-mobile-heading p{

    font-size:16px;

    line-height:1.8;

    color:#6b7280;

}


/*==================================
        TIMELINE
==================================*/

.fg-mobile-timeline{

    position:relative;

    margin-top:30px;

    padding-left:22px;

}

.fg-mobile-timeline::before{

    content:"";

    position:absolute;

    left:27px;

    top:20px;

    bottom:20px;

    width:3px;

    background:#ececec;

}


/*==================================
        STEP
==================================*/

.fg-mobile-step{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:35px;

    position:relative;

}

.fg-mobile-step:last-child{

    margin-bottom:0;

}


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

.fg-step-circle{

    width:56px;

    height:56px;

    min-width:56px;

    border-radius:50%;

    background:#FFC21C;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    z-index:2;

    box-shadow:0 10px 20px rgba(239,68,68,.18);

}

.fg-step-circle i{

    font-size:22px;


}


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

.fg-step-content{

    background:#fff;

    border:1px solid #edf1f5;

    border-radius:18px;

    padding:18px;

    width:100%;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.fg-step-content h3{

    font-size:20px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;

}

.fg-step-content p{

    font-size:15px;

    line-height:1.7;

    color:#6b7280;

}

.fg-mobile-step:hover .fg-step-circle{

    transform:scale(1.08);

}

.fg-mobile-step:hover .fg-step-content{

    border-color:#FFC21C;

}


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

.fg-mobile-process{

    padding-bottom:30px;

}

.fg-mobile-why{

    padding-top:30px;

}

}
/*==========================================
      WHY CHOOSE US
==========================================*/

.fg-mobile-person{

    position:relative;

    width:240px;

    height:240px;

    margin:0 auto 45px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.fg-mobile-circle{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:linear-gradient(135deg,#ecfdf5,#d1fae5);

}

.fg-mobile-person img{

    position:relative;

    width:210px;

    z-index:2;

    animation:fgFloat 4s ease-in-out infinite;

}



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

.fg-mobile-features{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.fg-mobile-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:20px;

    border-radius:18px;

    background:#ffffff;

    border:1px solid #edf1f5;

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

    transition:.35s;

}



.fg-mobile-feature i{

    width:52px;

    height:52px;

    min-width:52px;

    border-radius:14px;

    background:#FFC21C;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    transition:.35s;

}



.fg-mobile-feature h4{

    font-size:18px;

    font-weight:700;

    color:#111827;

    margin-bottom:6px;

}



.fg-mobile-feature p{

    font-size:15px;

    line-height:1.7;

    color:#6b7280;

}



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

.fg-mobile-feature:hover{

    transform:translateY(-4px);

    border-color:#FFC21C;

}



.fg-mobile-feature:hover i{

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

}



/*==========================================
      FLOATING IMAGE
==========================================*/

@keyframes fgFloat{

0%{

    transform:translateY(0);

}

50%{

    transform:translateY(-10px);

}

100%{

    transform:translateY(0);

}

}



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

@media (max-width:480px){

.fg-mobile-person{

    width:200px;

    height:200px;

}

.fg-mobile-circle{

    width:180px;

    height:180px;

}

.fg-mobile-person img{

    width:170px;

}

.fg-mobile-feature{

    padding:18px;

}

.fg-mobile-feature i{

    width:46px;

    height:46px;

    min-width:46px;

    font-size:18px;

}

.fg-mobile-feature h4{

    font-size:17px;

}

.fg-mobile-feature p{

    font-size:14px;

}

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

@media (max-width:768px){

.fg-mobile-process,
.fg-mobile-why{

    overflow:hidden;

}

.fg-mobile-heading{

    padding:0 5px;

}

.fg-mobile-feature{

    width:100%;

}

}



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

@media (max-width:430px){

.fg-mobile-process,
.fg-mobile-why{

    padding:50px 16px;

}

.fg-mobile-heading h2{

    font-size:28px;

}

.fg-mobile-heading p{

    font-size:15px;

}

.fg-step-circle{

    width:50px;
    height:50px;
    min-width:50px;

}

.fg-step-circle i{

    font-size:18px;

}

.fg-step-content{

    padding:16px;

}

.fg-step-content h3{

    font-size:18px;

}

.fg-step-content p{

    font-size:14px;

}

}



/*==========================================
      EXTRA SMALL DEVICES
==========================================*/

@media (max-width:360px){

.fg-mobile-heading h2{

    font-size:25px;

}

.fg-mobile-feature{

    padding:16px;

}

.fg-mobile-feature h4{

    font-size:16px;

}

.fg-mobile-feature p{

    font-size:13px;

}

}



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

.fg-step-circle,
.fg-step-content,
.fg-mobile-feature,
.fg-mobile-feature i{

    transition:.35s ease;

}

.fg-mobile-step:hover .fg-step-circle{

    background:#FFC21C;

    transform:scale(1.08);

}

.fg-mobile-step:hover .fg-step-content{

    transform:translateY(-4px);

    box-shadow:0 20px 35px rgba(0,0,0,.08);

}

.fg-mobile-feature:hover{

    transform:translateY(-5px);

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

}



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

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}



/*==========================================
      FLOAT ANIMATION
==========================================*/

@keyframes floatMobile{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.fg-mobile-person img{

    animation:floatMobile 4s ease-in-out infinite;

}



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

@keyframes cardPop{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fg-mobile-step{

    animation:cardPop .6s ease both;

}

.fg-mobile-step:nth-child(1){

    animation-delay:.1s;

}

.fg-mobile-step:nth-child(2){

    animation-delay:.2s;

}

.fg-mobile-step:nth-child(3){

    animation-delay:.3s;

}

.fg-mobile-step:nth-child(4){

    animation-delay:.4s;

}



/*==========================================
      FEATURE ANIMATION
==========================================*/

.fg-mobile-feature{

    animation:cardPop .7s ease both;

}

.fg-mobile-feature:nth-child(1){

    animation-delay:.2s;

}

.fg-mobile-feature:nth-child(2){

    animation-delay:.3s;

}

.fg-mobile-feature:nth-child(3){

    animation-delay:.4s;

}

.fg-mobile-feature:nth-child(4){

    animation-delay:.5s;

}

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

.pricing-section{
    padding:120px 0;
    background:white;
    font-family:'Inter',sans-serif;
}

.pricing-container{
    width:1200px;
    max-width:90%;
    margin:auto;
}

/* Heading */

.pricing-heading{
    text-align:center;
    margin-bottom:70px;
}

.pricing-subtitle{
    display:inline-block;
    padding:10px 20px;
    background:#e8f0ff;
    color:#FFC21C;
    font-size:13px;
    font-weight:600;
    border-radius:50px;
    letter-spacing:1px;
    margin-bottom:20px;
}

.pricing-heading h2{
    font-size:52px;
    line-height:1.2;
    font-weight:700;
    color:#111827;
    margin-bottom:20px;
}

.pricing-heading p{
    max-width:750px;
    margin:auto;
    color:#6b7280;
    font-size:18px;
    line-height:1.8;
}

/* Toggle */

.pricing-switch{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:35px;
}

.pricing-switch span{
    font-size:15px;
    font-weight:600;
    color:#6b7280;
    transition:.3s;
}

.pricing-switch span.active{
    color:#111827;
}

.switch{
    position:relative;
    width:62px;
    height:34px;
}

.switch input{
    display:none;
}

.slider{
    position:absolute;
    inset:0;
    background:#dbe2ea;
    border-radius:50px;
    cursor:pointer;
    transition:.4s;
}

.slider::before{
    content:"";
    width:26px;
    height:26px;
    position:absolute;
    left:4px;
    top:4px;
    background:#fff;
    border-radius:50%;
    transition:.4s;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.switch input:checked + .slider{
    background:#FFC21C;
}

.switch input:checked + .slider::before{
    transform:translateX(28px);
}

/* Cards */

.pricing-cards{
    display:flex;
    justify-content:center;
    gap:35px;
}

.price-card{
    flex:1;
    background:#fff;
    border-radius:30px;
    padding:50px 40px;
    position:relative;
    transition:.4s;
    border:1px solid #edf0f4;
    box-shadow:0 10px 40px rgba(0,0,0,.04);
}

.price-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.10);
}

.price-card h3{
    font-size:28px;
    font-weight:700;
    color:#111827;
    margin-bottom:25px;
}

.price{
    display:flex;
    align-items:flex-start;
    margin-bottom:10px;
}

.currency{
    font-size:24px;
    font-weight:700;
    margin-right:5px;
    color:#111827;
}

.price-value{
    font-size:60px;
    line-height:1;
    font-weight:800;
    color:#111827;
}

.duration{
    color:#6b7280;
    margin-bottom:30px;
}

/* Features */

.price-card ul{
    list-style:none;
    padding:0;
    margin:0 0 35px;
}

.price-card ul li{
    padding:14px 0;
    border-bottom:1px solid #f1f5f9;
    color:#374151;
    font-size:15px;
}

/* Button */

.price-btn{
    display:block;
    text-align:center;
    text-decoration:none;
    padding:16px;
    border-radius:14px;
    background:#FFC21C;
    color:black;
    font-weight:600;
    transition:.3s;
}

.price-btn:hover{
    background:black;
    color:white;
}

/* Featured Card */

.featured{
    background:white;
    transform:scale(1.05);
    overflow:hidden;
}

.featured h3,
.featured .currency,
.featured .price-value,
.featured ul li{
    color:black;
}

.featured .duration{
    color:rgba(255,255,255,.75);
}

.featured ul li{
    border-color:rgba(255,255,255,.10);
}

.featured .price-btn{
    background:#FFC21C;
}

.featured .price-btn:hover{
        background:#FFC21C;
}

.badge{
    position:absolute;
    top:22px;
    right:-35px;
    background:#FFC21C;
    color:#fff;
    padding:10px 45px;
    transform:rotate(45deg);
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
}

/* Decorative Glow */

.featured::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    top:-100px;
    right:-100px;
    filter:blur(50px);
}

/* Desktop Only */

@media(min-width:1200px){
    .pricing-cards{
        align-items:stretch;
    }
}

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

.pricing-section{
    position:relative;
    padding:100px 0;
    background:transparent;
    overflow:hidden;
}





.pricing-section .container{
    max-width:1320px;
    margin:auto;
    padding:0 20px;
    position:relative;
    z-index:2;
}

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

.pricing-header{
    max-width:760px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;
}

.pricing-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:40px;
    background:#fff;
    color:#FFC21C;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.pricing-header h2{
    margin-top:25px;
    font-size:52px;
    font-weight:700;
    line-height:1.2;
    color:#111;
}

.pricing-header p{
    margin-top:20px;
    font-size:18px;
    line-height:30px;
    color:#666;
}

/*====================================================
  TOGGLE
====================================================*/

.pricing-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:45px;
}

.toggle-label{
    font-size:16px;
    font-weight:600;
    color:#777;
    transition:.3s;
}

.toggle-label.active{
    color:#FFC21C;
}

.switch{
    position:relative;
    width:70px;
    height:36px;
}

.switch input{
    display:none;
}

.slider{
    position:absolute;
    inset:0;
    cursor:pointer;
    border-radius:40px;
    background:#d8d8d8;
    transition:.35s;
}

.slider::before{
    content:"";
    position:absolute;
    width:28px;
    height:28px;
    left:4px;
    top:4px;
    border-radius:50%;
    background:#fff;
    transition:.35s;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.switch input:checked + .slider{
    background:#FFC21C;
}

.switch input:checked + .slider::before{
    transform:translateX(34px);
}

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

.pricing-wrapper{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    align-items:stretch;
}

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

.pricing-card{
    position:relative;
    background:#ffffff;
    border-radius:24px;
    padding:45px 35px;
    border:1px solid #e9eef5;
    transition:all .35s ease;
    box-shadow:0 15px 45px rgba(0,0,0,.06);
    overflow:hidden;
}

.pricing-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#FFC21C;
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.pricing-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.pricing-card:hover::before{
    transform:scaleX(1);
}

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

.pricing-card.featured{
    background:white;
    color:black;
    transform:scale(1.05);
    border:none;
}

.pricing-card.featured::before{
    background:#ffffff;
    transform:scaleX(1);
    color:black;
}

.pricing-card.featured:hover{
    transform:scale(1.05) translateY(-12px);
}

.badge{
    position:absolute;
    top:22px;
    right:-42px;
    width:180px;
    text-align:center;
    background:#ffffff;
    color:#FFC21C;
    padding:8px 0;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    transform:rotate(45deg);
    text-transform:uppercase;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/*====================================================
  TITLE & DESCRIPTION
====================================================*/

.pricing-card h3{
    font-size:30px;
    font-weight:700;
    margin-bottom:12px;
    color:#111;
}

.pricing-card.featured h3{
    color:black;
}

.card-text{
    font-size:15px;
    line-height:28px;
    color:black;
    margin-bottom:30px;
}

.pricing-card.featured .card-text{
    color:black;
}

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

.price{
    display:flex;
    align-items:flex-start;
    margin-bottom:10px;
}

.currency{
    font-size:24px;
    font-weight:700;
    margin-top:10px;
    color:black;
}

.price-value{
    font-size:58px;
    font-weight:800;
    line-height:1;
    margin-left:6px;
    color:#111;
}

.billing{
    display:block;
    margin-bottom:30px;
    font-size:15px;
    color:#888;
}

.pricing-card.featured .currency,
.pricing-card.featured .price-value,
.pricing-card.featured .billing{
    color:black;
}

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

.pricing-card ul{
    list-style:none;
    margin:0;
    padding:0;
}

.pricing-card ul li{
    display:flex;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #edf2f7;
    color:#555;
    font-size:15px;
    font-weight:500;
}

.pricing-card ul li:last-child{
    border-bottom:none;
}

.pricing-card.featured ul li{
    color:#ffffff;
    border-color:rgba(255,255,255,.15);
}

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

.pricing-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:35px;
    padding:16px 24px;
    border-radius:12px;
    background:#FFC21C;
    color:black;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
}

.pricing-btn:hover{
    background:black;
    transform:translateY(-2px);
    color:white;
}

.pricing-card.featured .pricing-btn{
    background:#ffffff;
    color:#FFC21C;
}

.pricing-card.featured .pricing-btn:hover{
    background:#f3f6fb;
    color:#FFC21C;
}

/*====================================================
  LARGE TABLET (1199px)
====================================================*/

@media (max-width:1199px){

.pricing-section{
    padding:90px 0;
}

.pricing-header h2{
    font-size:44px;
}

.pricing-wrapper{
    gap:25px;
}

.pricing-card{
    padding:40px 28px;
}

.price-value{
    font-size:48px;
}

.pricing-card h3{
    font-size:26px;
}

}

/*====================================================
  TABLET (991px)
====================================================*/

@media (max-width:991px){

.pricing-header{
    margin-bottom:55px;
}

.pricing-header h2{
    font-size:38px;
    line-height:1.3;
}

.pricing-header p{
    font-size:16px;
    line-height:28px;
}

.pricing-wrapper{
    grid-template-columns:1fr;
    max-width:600px;
    margin:auto;
    gap:30px;
}

.pricing-card{
    width:100%;
}

.pricing-card.featured{
    transform:none;
}

.pricing-card.featured:hover{
    transform:translateY(-10px);
}

.badge{
    right:-48px;
}

}

/*====================================================
  MOBILE (768px)
====================================================*/

@media (max-width:768px){

.pricing-section{
    padding:70px 0;
}

.pricing-section .container{
    padding:0 18px;
}

.pricing-header{
    margin-bottom:45px;
}

.pricing-tag{
    font-size:12px;
    padding:9px 18px;
}

.pricing-header h2{
    font-size:32px;
    line-height:42px;
    margin-top:18px;
}

.pricing-header p{
    font-size:15px;
    line-height:26px;
}

.pricing-toggle{
    margin-top:35px;
    gap:14px;
}

.toggle-label{
    font-size:15px;
}

.switch{
    width:62px;
    height:32px;
}

.slider::before{
    width:24px;
    height:24px;
}

.switch input:checked + .slider::before{
    transform:translateX(30px);
}

.pricing-card{
    padding:35px 25px;
    border-radius:20px;
}

.pricing-card h3{
    font-size:24px;
}

.card-text{
    font-size:14px;
    line-height:25px;
}

.price-value{
    font-size:46px;
}

.currency{
    font-size:20px;
}

.billing{
    font-size:14px;
}

.pricing-card ul li{
    font-size:14px;
    padding:12px 0;
}

.pricing-btn{
    padding:15px;
    font-size:15px;
}

.badge{
    width:165px;
    font-size:10px;
}

}

/*====================================================
  SMALL MOBILE (480px)
====================================================*/

@media (max-width:480px){

.pricing-section{
    padding:60px 0;
}

.pricing-header h2{
    font-size:28px;
    line-height:36px;
}

.pricing-header p{
    font-size:14px;
    line-height:24px;
}

.pricing-toggle{
    transform:scale(.92);
}

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

.pricing-card h3{
    font-size:22px;
}

.price-value{
    font-size:40px;
}

.currency{
    font-size:18px;
}

.pricing-card ul li{
    font-size:13px;
}

.pricing-btn{
    font-size:14px;
}

.badge{
    right:-55px;
    width:150px;
    font-size:9px;
}

}

/*====================================================
  EXTRA SMALL DEVICES (360px)
====================================================*/

@media (max-width:360px){

.pricing-header h2{
    font-size:24px;
}

.price-value{
    font-size:34px;
}

.pricing-card{
    padding:24px 18px;
}

.pricing-btn{
    padding:14px;
}

}

/*==========================================
   TAX CALCULATOR SECTION
==========================================*/

.tax-calculator-section{
    position:relative;
    padding:110px 0;
    background:transparent;
    overflow:hidden;
}


.tax-calculator-section .container{
    width:100%;
    max-width:1280px;
    margin:auto;
    padding:0 20px;
    position:relative;
    z-index:2;
}

/*==========================================
   WRAPPER
==========================================*/

.calculator-wrapper{
    display:grid;
    grid-template-columns:1fr 480px;
    align-items:center;
    gap:70px;
}

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

.calculator-content{
    max-width:620px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 22px;
    border-radius:40px;
    background:#ffffff;
    color:#FFC21C;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.calculator-content h2{
    margin-top:24px;
    font-size:54px;
    line-height:1.15;
    color:#111827;
    font-weight:700;
}

.calculator-content p{
    margin-top:22px;
    color:#6b7280;
    font-size:17px;
    line-height:31px;
}

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

.calculator-features{
    margin-top:45px;
    display:flex;
    flex-direction:column;
    gap:25px;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.feature-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    background:#FFC21C;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    flex-shrink:0;
    box-shadow:0 15px 30px rgba(13,110,253,.25);
}

.feature-item h4{
    font-size:20px;
    color:#111827;
    margin-bottom:6px;
}

.feature-item p{
    margin:0;
    font-size:15px;
    line-height:26px;
    color:#6b7280;
}

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

.calculator-card{
    background:#ffffff;
    border-radius:26px;
    padding:42px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    border:1px solid #eef2f7;
}

.calculator-card h3{
    font-size:28px;
    color:#111827;
    margin-bottom:30px;
}

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

.form-group{
    margin-bottom:22px;
}

.form-group label{
    display:block;
    font-size:15px;
    font-weight:600;
    color:#374151;
    margin-bottom:10px;
}

.form-group input,
.form-group select{
    width:100%;
    height:58px;
    padding:0 18px;
    border:1px solid #dce3eb;
    border-radius:14px;
    background:#ffffff;
    outline:none;
    font-size:15px;
    transition:.3s;
}

.form-group input:focus,
.form-group select:focus{
    border-color:#FFC21C;
    box-shadow:0 0 0 4px rgba(13,110,253,.10);
}

.calculate-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:14px;
    background:#FFC21C;
    color:black;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.calculate-btn:hover{
    background:black;
    color:white;
    transform:translateY(-2px);
}

/*==========================================
   RESULT BOX
==========================================*/

.result-box{
    margin-top:30px;
    padding:25px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    display:none;
    animation:fadeUp .4s ease;
}

.result-box.active{
    display:block;
}

.result-title{
    font-size:18px;
    font-weight:700;
    color:#111827;
    margin-bottom:20px;
}

.result-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;
    border-bottom:1px solid #e5e7eb;
}

.result-item:last-child{
    border-bottom:none;
}

.result-item span{
    color:#6b7280;
    font-size:15px;
    font-weight:500;
}

.result-item strong{
    color:#111827;
    font-size:24px;
    font-weight:700;
}

.result-item.highlight strong{
    color:#FFC21C;
}

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

.reset-btn{
    width:100%;
    margin-top:25px;
    height:52px;
    border:none;
    border-radius:12px;
    background:#111827;
    color:#ffffff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.reset-btn:hover{
    background:#000;
    transform:translateY(-2px);
}

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

.calculator-card{
    transition:.35s ease;
}

.calculator-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 80px rgba(0,0,0,.12);
}

/*==========================================
   INPUT ICON STYLE (OPTIONAL)
==========================================*/

.form-group{
    position:relative;
}

.form-group input::placeholder{
    color:#9ca3af;
}

.form-group select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5 8 12l6.5-6.5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 18px center;
}

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

.calculate-btn:active,
.reset-btn:active{
    transform:scale(.98);
}

/*==========================================
   FADE ANIMATION
==========================================*/

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*==========================================
   NUMBER EMPHASIS
==========================================*/

#annualTax,
#monthlyTax,
#taxRate{
    transition:.3s ease;
}

/*==========================================
   SUCCESS STATE
==========================================*/

.result-box.success{
    border-color:#FFC21C;
    background:linear-gradient(
        180deg,
        #ffffff,
        #f4f9ff
    );
}

/*==========================================
    LARGE LAPTOP
==========================================*/

@media (max-width:1200px){

.tax-calculator-section{
    padding:90px 0;
}

.calculator-wrapper{
    grid-template-columns:1fr 430px;
    gap:50px;
}

.calculator-content h2{
    font-size:46px;
}

.calculator-card{
    padding:35px;
}

}

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

@media (max-width:991px){

.calculator-wrapper{
    grid-template-columns:1fr;
    gap:50px;
}

.calculator-content{
    max-width:100%;
    text-align:center;
}

.calculator-features{
    max-width:550px;
    margin:40px auto 0;
}

.feature-item{
    text-align:left;
}

.calculator-card{
    max-width:600px;
    width:100%;
    margin:auto;
}

}

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

@media (max-width:768px){

.tax-calculator-section{
    padding:70px 0;
}

.tax-calculator-section .container{
    padding:0 18px;
}

.section-tag{
    font-size:12px;
    padding:8px 18px;
}

.calculator-content h2{
    font-size:34px;
    line-height:1.25;
    margin-top:18px;
}

.calculator-content p{
    font-size:15px;
    line-height:27px;
}

.calculator-features{
    gap:20px;
}

.feature-item{
    gap:15px;
}

.feature-icon{
    width:46px;
    height:46px;
    font-size:18px;
}

.feature-item h4{
    font-size:18px;
}

.feature-item p{
    font-size:14px;
}

.calculator-card{
    padding:28px;
    border-radius:20px;
}

.calculator-card h3{
    font-size:24px;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    font-size:14px;
}

.form-group input,
.form-group select{
    height:54px;
    font-size:14px;
}

.calculate-btn{
    height:54px;
    font-size:15px;
}

.result-box{
    padding:20px;
}

.result-item{
    padding:14px 0;
}

.result-item span{
    font-size:14px;
}

.result-item strong{
    font-size:20px;
}

.reset-btn{
    height:50px;
    font-size:14px;
}

}

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

@media (max-width:480px){

.tax-calculator-section{
    padding:60px 0;
}

.calculator-content h2{
    font-size:28px;
}

.calculator-content p{
    font-size:14px;
    line-height:24px;
}

.calculator-card{
    padding:22px;
}

.feature-icon{
    width:42px;
    height:42px;
    font-size:16px;
}

.feature-item h4{
    font-size:16px;
}

.feature-item p{
    font-size:13px;
}

.result-item{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}

.result-item strong{
    font-size:18px;
}

.calculate-btn,
.reset-btn{
    font-size:14px;
}

}

.reviews-section{
    padding:90px 0;
    background:transparent;
    font-family:Arial, sans-serif;
}


.reviews-container{
    width:1200px;
    margin:auto;
}


.reviews-heading{
    text-align:center;
    margin-bottom:45px;
}


.reviews-heading span{
    color:#0066ff;
    font-weight:600;
}


.reviews-heading h2{
    font-size:42px;
    margin:15px 0;
}


.reviews-heading p{
    color:#666;
    font-size:17px;
}


/* Slider */

.reviews-wrapper{
    display:flex;
    align-items:center;
    gap:20px;
}


.reviews-slider{

    overflow:hidden;
    width:100%;

}


.reviews-track{

    display:flex;
    gap:30px;
    transition:.5s ease;

}



/* Card */

.review-card{

    min-width:380px;
    background:white;

    border:1px solid #eee;
    border-radius:20px;

    padding:35px;

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

}



.customer-info{

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

}


.customer-avatar{

    width:60px;
    height:60px;

    background:#111;
    color:white;

    border-radius:50%;

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

    font-weight:bold;
}



.customer-info h3{
    margin:0;
}


.customer-info p{
    margin:5px 0;
    color:#777;
}


.stars{

    color:#ffb400;
    font-size:22px;
    margin:20px 0;

}


.review-card p{

    color:#555;
    line-height:1.7;

}


/* Buttons */


.review-btn{

    width:45px;
    height:45px;

    border:none;
    border-radius:50%;

    background:#111;
    color:white;

    cursor:pointer;

    font-size:22px;

}

.mobile-reviews{

    width:100%;
    padding:60px 15px;
    background:transparent;
    font-family:Arial,sans-serif;

}



.mobile-reviews-header{

    text-align:center;
    margin-bottom:35px;

}



.mobile-reviews-header span{

    color:#0066ff;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;

}



.mobile-reviews-header h2{

    font-size:30px;
    color:#111;
    margin:12px 0;

}



.mobile-reviews-header p{

    color:#777;
    font-size:15px;
    line-height:1.6;

}




/* Slider */


.mobile-review-slider{

    width:100%;
    overflow:hidden;

}



.mobile-review-track{

    display:flex;
    gap:20px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

}



.mobile-review-track::-webkit-scrollbar{

    display:none;

}




/* Card */


.mobile-review-card{

    flex:0 0 100%;

    background:#fff;

    border-radius:20px;

    padding:25px;

    border:1px solid #ededed;

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

}





.mobile-customer{

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

}



.mobile-avatar{


    width:55px;
    height:55px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

}




.mobile-customer h3{

    margin:0;

    font-size:18px;

    color:#111;

}



.mobile-customer p{

    margin:5px 0 0;

    font-size:14px;

    color:#777;

}




.mobile-stars{

    margin:20px 0;

    color:#ffb400;

    font-size:22px;

    letter-spacing:3px;

}




.mobile-review-text{

    color:#555;

    font-size:15px;

    line-height:1.8;

}

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

.cta-section{

    width:100%;
    height:300px;
    padding:70px 0;
background-color:transparent
}

.cta-container{

    width:88%;
    max-width:1400px;

    margin:auto;

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

    gap:60px;
}

.cta-content{

    width:60%;
}

.cta-content h2{

    color:black;

    font-size:40px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:28px;
}

.cta-content p{

    color:Black;

    font-size:28px;

    line-height:1.8;

    max-width:850px;

    font-weight:400;
}

.cta-button{

    width:250px;
    display:flex;

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

}

.cta-button a{

   width:250px;
    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:black;

    color:White;
    margin-bottom:20px;

    text-decoration:none;

    border-radius:18px;

    font-size:33px;

    font-weight:700;

    transition:.35s;
}

.cta-button a:hover{

    background:black;

    color:#fff;

    transform:translateY(-6px);

    box-shadow:0 25px 40px rgba(0,0,0,.18);
}

/*=========================================
    MOBILE DEADLINE SECTION
=========================================*/

.mobile-deadline{
    display:none;
}

@media (max-width:768px){

.mobile-deadline{

    display:block;

    width:100%;

    padding:45px 20px;

    background:#ffffff;
}

.mobile-deadline-container{

    max-width:450px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:left;
}

.mobile-deadline-content{

    width:100%;
}

.mobile-deadline-content h2{

    font-size:34px;

    font-weight:800;

    color:#111;

    line-height:1.2;

    margin-bottom:22px;
}

.mobile-deadline-content p{

    font-size:20px;

    color:#444;

    line-height:1.8;

    font-weight:400;

    margin-bottom:35px;
}

.mobile-deadline-content strong{

    color:#000;

    font-weight:700;
}

.mobile-tax-btn{

    width:100%;

    height:60px;

    border-radius:50px;

    background:#FFC21C;

    color:black;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

    transition:.3s;
}

.mobile-tax-btn:hover{

    background:black;
    color: white;

}

}
.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:64px;
    height:64px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    z-index:9999;
    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.08);
}

.whatsapp-icon{
    width:38px;
    height:38px;
}

@media(max-width:768px){
    .whatsapp-float{
        width:56px;
        height:56px;
        right:18px;
        bottom:18px;
    }

    .whatsapp-icon{
        width:34px;
        height:34px;
    }
}
.whatsapp-float i{
    font-size:38px;
    color:#fff;
}

/* Hide on Mobile & Tablet */
.company-registration{
    display:none;
    margin-top:100px;
}

/* Desktop Only */
@media (min-width: 992px){

.company-registration{
    display:block;
    width:100%;
    background:#f5f6fb;
    padding:90px 0;
    font-family:'Poppins',sans-serif;
}

.company-registration .container{
    width:1200px;
    max-width:95%;
    margin:auto;
}

.section-heading{
    margin-bottom:50px;
}

.section-heading h2{
    font-size:35px;
    font-weight:700;
    line-height:1.2;
    color:#111;
    margin-bottom:20px;
}

.section-heading h2 span{
    color:#FDB515;
    font-size:35px;
}

.section-heading p{
    width:760px;
    max-width:100%;
    font-size:18px;
    line-height:20px;
    color:#666;
}

.registration-card{
    background:#fff;
    border-radius:28px;
    padding:65px;
    display:flex;
    justify-content:space-between;
    gap:100px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.card-left{
    flex:1;
}

.card-left h3{
    font-size:25px;
    font-weight:700;
    color:#111;
    line-height:1.3;
    margin-bottom:15px;
}

.card-left .description{
    font-size:16px;
    color:#666;
    line-height:20px;
    margin-bottom:40px;
}

.card-left h4{
    font-size:16px;
    font-weight:700;
    margin-bottom:25px;
}

.card-left ul{
    list-style:none;
    padding:0;
    margin:0;
}

.card-left ul li{
    display:flex;
    align-items:center;
    gap:18px;
    font-size:16px;
    color:#444;
    margin-bottom:28px;
}

.check{
    width:25px;
    height:25px;
    border-radius:50%;
    background:#FDB515;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.check i{
    font-size:16px;
    color:#111;
}

.card-right{
    width:330px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
}

.price-box{
    text-align:right;
}

.price-box h2{
    font-size:25px;
    font-weight:700;
    color:#111;
    margin-bottom:10px;
}

.price-box p{
    font-size:18px;
    color:#333;
}

.whatsapp-btn{
    width:210px;
    height:60px;
    border:2px solid #25D366;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#25D366;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.whatsapp-btn:hover{
    background:#25D366;
    color:#fff;
}

}

/* Hide on Desktop */

.mobile-company-registration{
    display:none;
}

/* Mobile */

@media (max-width:768px){

.mobile-company-registration{
    display:block;
    padding:25px 18px;
    background:#f7f8fc;
}

.mobile-heading h2{
    font-size:34px;
    font-weight:700;
    line-height:42px;
    color:#111;
    margin-bottom:15px;
}

.mobile-heading span{
    color:#FDB813;
}

.mobile-heading p{
    font-size:15px;
    color:#666;
    line-height:28px;
}

.mobile-card{
    margin-top:28px;
    background:#fff;
    border-radius:22px;
    padding:24px;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
}

.mobile-card h3{
    font-size:25px;
    font-weight:700;
    line-height:35px;
    color:#111;
}

.service-desc{
    margin-top:12px;
    color:#666;
    line-height:28px;
    font-size:15px;
}

.price-box{
    margin-top:24px;
    padding:18px;
    background:#fafafa;
    border-radius:15px;
    text-align:center;
}

.price-box h4{
    font-size:34px;
    font-weight:700;
    color:#111;
}

.price-box span{
    display:block;
    margin-top:5px;
    font-size:15px;
    color:#555;
}

.requirements{
    margin-top:28px;
}

.requirements h4{
    font-size:23px;
    margin-bottom:18px;
    color:#111;
}

.requirements ul{
    list-style:none;
}

.requirements li{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
    font-size:17px;
    color:#444;
}

.check{
    width:28px;
    height:28px;
    background:#FDB813;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
    font-weight:700;
    flex-shrink:0;
}

.whatsapp-btn{
    margin-top:30px;
    width:100%;
    height:58px;
    border:2px solid #25D366;
    color:#25D366;
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.whatsapp-btn:hover{
    background:#25D366;
    color:#fff;
}

}

/* Floating WhatsApp Button */
.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    z-index:9999;
    transition:.3s ease;
    animation:whatsappPulse 2s infinite;
}

.whatsapp-float:hover{
    transform:scale(1.1);
    background:#1ebe5d;
}

.whatsapp-float svg{
    width:34px;
    height:34px;
}

@keyframes whatsappPulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }
    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

/* Mobile */
@media(max-width:768px){
    .whatsapp-float{
        width:58px;
        height:58px;
        right:18px;
        bottom:18px;
    }

    .whatsapp-float svg{
        width:30px;
        height:30px;
    }
}
/*=========================
      END
=========================*/