/*==================================
    1. Variables
==================================*/

/*==================================
    2. Reset
==================================*/

/*==================================
    3. Typography
==================================*/

/*==================================
    4. Buttons
==================================*/



body{
    font-family:'Cairo',sans-serif;
    padding-top:60px;
    background:#ffffff;
}

/*==================================
    5. Navbar
==================================*/
.navbar{
    transition:.3s;
}

.navbar-brand{
    font-size:1.6rem;
}
.text-primary{
    color:#00A8A8 !important;
}

.nav-link{
    margin:0 10px;
    font-weight:600;
    color:#333 !important;
}

.nav-link:hover{
    color:#00A8A8 !important;
}

.btn-primary{
    background:#00A8A8;
    border:none;
    border-radius:10px;
    font-weight:600;
    padding:10px 24px;
}

.btn-primary:hover{
    background:#008b8b;
}

/*==================================
        Active Navbar
===================================*/

.navbar-nav .nav-link{

    position:relative;

}

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-6px;

    width:0;

    height:3px;

    background:#00A8A8;

    border-radius:20px;

    transform:translateX(-50%);

    transition:.3s;

}

.navbar-nav .nav-link:hover::after{

    width:100%;

}

.navbar-nav .nav-link.active{

    color:#00A8A8 !important;

    font-weight:700;

}

.navbar-nav .nav-link.active::after{

    width:100%;

}
/*==================================
    6. Hero (Home)
==================================*/

.hero{

    position:relative;

    min-height:700px;

    display:flex;

    align-items:center;

    overflow:hidden;

}
.hero-home{

    background-image:url("../images/hero.webp");

}
.hero-background
{
    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;
}
.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        270deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.82) 35%,
        rgba(255,255,255,.15) 70%,
        rgba(255,255,255,0) 100%
    );

}
.hero .container{

    position:relative;

    z-index:2;

}
.hero-content{

    max-width:650px;

}
.hero-tag{

    display:inline-block;

    background:#E8FAFA;

    color:#00A8A8;

    padding:8px 18px;

    border-radius:50px;

    font-weight:600;

}

.hero-title{

    font-size:3rem;

    font-weight:800;

    line-height:1.4;

    color:#1F2937;

}

.hero-text{

    font-size:1.15rem;

    color:#6B7280;

    line-height:2;

}

.hero-image{

    max-width:95%;

}

.hero-buttons .btn{

    padding:14px 28px;

    border-radius:12px;

}
/*=========================
      Responsive
==========================*/

@media(max-width:991px){
 .hero-home {
        background-image: url("../images/hero-home-mobile.webp");
    }
    .hero-title {
    font-size: 2rem;
    }

}

/*==================================
    7. Problem Section
==================================*/

.problem-section{

    background:#F8FAFC;

    padding:100px 0;

}

.section-tag{

    display:inline-block;

    background:#E8FAFA;

    color:#00A8A8;

    padding:8px 18px;

    border-radius:50px;

    font-weight:600;

}

.section-title h2{

    font-size:2.4rem;

    font-weight:800;

    margin-top:20px;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:#6B7280;

    line-height:2;

}

.problem-card{

    background:white;

    padding:35px;

    border-radius:16px;

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

    height:100%;

    transition:.3s;

}

.problem-card:hover{

    transform:translateY(-5px);

}

.problem-card i{

    font-size:2rem;

    color:#00A8A8;

}

.problem-card .card-title{

    margin-top:20px;

    font-weight:700;

    font-size: 1.25rem;
}

.problem-card p{

    color:#6B7280;

    line-height:1.8;

}
/*==================================
    8. Solution Section
==================================*/

.solution-section{

    padding:100px 0;

    background:#ffffff;

}

.solution-card{

    background:#fff;

    border:1px solid #EEF2F7;

    border-radius:16px;

    padding:35px;

    height:100%;

    transition:.3s;

}

.solution-card:hover{

    transform:translateY(-5px);

    box-shadow:0 8px 24px rgba(0,0,0,.06);

}

.solution-card i{

    font-size:2rem;

    color:#00A8A8;

}

.solution-card .card-title{

    margin-top:20px;

    font-weight:700;

    font-size: 1.25rem;

}

.solution-card p{

    color:#6B7280;

    line-height:1.8;

}
/*==================================
    9. Trust Section
==================================*/

.trust-section{

    background:#0F172A;

    color:#fff;

    padding:100px 0;

}

.trust-section .section-title h2{

    color:#fff;

}

.trust-section .section-title p{

    color:#CBD5E1;

    max-width:800px;

    margin:auto;

    line-height:2;

}

.trust-card{

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

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

    border-radius:18px;

    padding:35px;

    height:100%;

    transition:.3s;

}

.trust-card:hover{

    transform:translateY(-6px);

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

}

.icon-box{

    width:65px;

    height:65px;

    border-radius:16px;

    background:#00A8A8;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.icon-box i{

    font-size:28px;

    color:white;

}

.trust-card h5{

    font-weight:700;

    margin-bottom:15px;

}

.trust-card p{

    color:#CBD5E1;

    line-height:1.9;

}
/*==================================
   10. Evidence
==================================*/

.evidence-section{

    padding:100px 0;

    background:#ffffff;

}

.stat-card{

    background:#F8FAFC;

    border-radius:16px;

    padding:30px;

    height:100%;

}

.stat-card .counter-number{

    color:#00A8A8;

    font-size:2.4rem;

    font-weight:800;

}

.stat-card span{

    color:#64748B;

    font-weight:600;

}
/*==================================
   11. Testimonials
==================================*/

.testimonials-section{

    padding:100px 0;

    background:#F8FAFC;

}

.testimonial-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    height:100%;

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

    transition:.3s;

}

.testimonial-card:hover{

    transform:translateY(-6px);

}

.stars{

    color:#FBBF24;

    font-size:22px;

    margin-bottom:20px;

}

.testimonial-card p{

    line-height:2;

    color:#475569;

    min-height:120px;

}

.client{

    margin-top:25px;

    border-top:1px solid #E5E7EB;

    padding-top:20px;

}

.client strong{

    display:block;

    color:#0F172A;

}

.client span{

    color:#64748B;

    font-size:.9rem;

}
/*==================================
   12. Screenshots
==================================*/

.screenshots-section{

    padding:100px 0;

    background:#ffffff;

}

.screen-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;

}

.screen-card:hover{

    transform:translateY(-8px);

}

.screen-card img{

    width:100%;

    display:block;

}

.screen-content{

    padding:28px;

}

.screen-content h4,
.screen-content h5{

    font-weight:700;

    margin-bottom:15px;

}

.screen-content p{

    color:#64748B;

    line-height:1.8;

}

.featured-screen img{

    max-height:520px;

    object-fit:cover;

}
/*==================================
   13. CTA
==================================*/


.final-cta{

    padding:100px 0;

   /* background:#00A8A8;
    background: linear-gradient(135deg, #00A8A8, #007D7D);*/
}

.cta-box{

    /*max-width:850px;*/

    margin:auto;

    color:white;

}

.cta-box h2{

    font-size:2.7rem;

    font-weight:800;

    margin-top:20px;

}

.cta-box p{

    font-size:1.15rem;

    line-height:2;

    margin-top:20px;

    color:#F8FAFC;

}

.final-cta .btn{

    padding:15px 30px;

    border-radius:12px;

}

.final-cta .btn-outline-light{

    border-width:2px;

}

.cta-box small{

    opacity:.9;

}
/*==================================
   14. Footer
==================================*/

.footer{

    background:#0F172A;

    color:#CBD5E1;

    padding:80px 0 30px;

}

.footer-logo{

    color:white;

    font-weight:800;

    margin-bottom:20px;

}

.footer h5{

    color:white;

    margin-bottom:20px;

}

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#CBD5E1;

    text-decoration:none;

}

.footer-links a:hover{

    color:#00A8A8;

}

.footer hr{

    border-color:rgba(255,255,255,.08);

    margin:50px 0 25px;

}

.footer-bottom{

    text-align:center;

    color:#94A3B8;

}
/*==================================
    Floating WhatsApp
===================================*/

.floating-whatsapp{

    position:fixed;

    left:30px;

    bottom:30px;

    z-index:9999;

    display:flex;

    align-items:center;

    gap:12px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    padding:14px 22px;

    border-radius:60px;

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

    transition:.3s;

}

.floating-whatsapp:hover{

    color:#fff;

    transform:translateY(-4px);

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

}

.floating-whatsapp i{

    font-size:28px;

}

.floating-whatsapp span{

    font-weight:600;

    white-space:nowrap;

}

@media(max-width:768px){

.floating-whatsapp{

    width:62px;

    height:62px;

    padding:0;

    justify-content:center;

    left:18px;

    bottom:18px;

}

.floating-whatsapp span{

    display:none;

}

.floating-whatsapp i{

    font-size:30px;

}

}
/****************************************
        Assessment Page
****************************************/

/*==================================
    Assessment Hero
==================================*/

.assessment-hero{

    padding:120px 0 100px;
    background-image:url("../images/free-assessment.webp");

}

.assessment-hero h1{

    font-size:3rem;

    font-weight:800;

    color:#0F172A;

    line-height:1.4;

    margin:20px 0;

}

.assessment-hero .hero-text{

    font-size:1.15rem;

    color:#475569;

    line-height:2;

    margin-bottom:35px;

    max-width:600px;

}

.assessment-hero .hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.assessment-hero .btn{

    padding:15px 30px;

    border-radius:12px;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    margin-top:35px;

    color:#64748B;

    font-size:.95rem;

    font-weight:500;

}

.hero-image{

    max-width:100%;

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

}

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================
      Responsive
==========================*/

@media(max-width:992px){

    .assessment-hero{

        text-align:center;

        padding:80px 0;

        background-image: url("../images/hero-assessment-mobile.webp");
    

    }

    .assessment-hero h1{

        font-size:2.3rem;

    }

    .assessment-hero .hero-text{

        margin-left:auto;
        margin-right:auto;

    }

    .assessment-hero .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-image{

        margin-top:50px;

    }

}

/*==================================
        Assessment Benefits
===================================*/

.benefits-section{

    padding:100px 0;

    background:#F8FAFC;

}

.benefit-card{

    background:#fff;

    padding:35px;

    border-radius:18px;

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

    transition:.3s;

    height:100%;

}

.benefit-card:hover{

    transform:translateY(-6px);

}

.benefit-card i{

    font-size:2rem;

    color:#00A8A8;

}

.benefit-card h5{

    margin-top:20px;

    font-weight:700;

}

.benefit-card p{

    margin-top:15px;

    color:#64748B;

    line-height:1.9;

}
/*==================================
      Session Benefits
===================================*/

.session-benefits{

    background:#F8FAFC;

}

.benefits-box{

    background:#fff;

    padding:50px;

    border-radius:22px;

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

}

.benefit-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.benefit-item i{

    font-size:32px;

    color:#00A8A8;

    flex-shrink:0;

}

.benefit-item h5{

    font-weight:700;

    margin-bottom:8px;

}

.benefit-item p{

    color:#64748B;

    margin:0;

    line-height:1.8;

}
/*==================================
      Assessment Timeline
===================================*/

.timeline-section{

    padding:100px 0;

    background:#ffffff;

}

.timeline{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.timeline-item{

    text-align:center;

    position:relative;

}

.timeline-number{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background:#00A8A8;

    color:#fff;

    font-size:1.4rem;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.timeline-item h5{

    font-weight:700;

    margin-bottom:15px;

}

.timeline-item p{

    color:#64748B;

    line-height:1.8;

}

@media(max-width:992px){

    .timeline{

        grid-template-columns:1fr;

    }

}

/*==================================
      Request Form
===================================*/

.request-section{

    padding:100px 0;

    background:#F8FAFC;

}

.request-card{

    background:#fff;

    border-radius:20px;

    padding:50px;

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

}

.request-card .form-label{

    font-weight:600;

    margin-bottom:10px;

    color:#334155;

}

.request-card .form-control,
.request-card .form-select{

    border-radius:12px;

    padding:14px 16px;

    border:1px solid #CBD5E1;

    transition:.3s;

}

.request-card .form-control:focus,
.request-card .form-select:focus{

    border-color:#00A8A8;

    box-shadow:0 0 0 .2rem rgba(0,168,168,.15);

}

.request-card textarea{

    resize:none;

}

.request-card .btn{

    padding:15px 40px;

    border-radius:12px;

}
/*==================================
      Process Card
===================================*/

.process-card{

    background:#F8FAFC;

    border-radius:18px;

    padding:35px;

    border:1px solid #E2E8F0;

    height:100%;

}

.process-card h4{

    font-weight:700;

    margin-bottom:20px;

    color:#0F172A;

}

.process-card p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:25px;

}

.process-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.process-card li{

    padding:12px 0;

    color:#334155;

    border-bottom:1px solid #E2E8F0;

}

.process-card li:last-child{

    border-bottom:none;

}

.form-note{

    color:#64748B;

    font-size:.95rem;

    line-height:1.8;

    margin-bottom:20px;

    text-align:center;

}
/*==================================
                FAQ
===================================*/

.faq-section{

    padding:100px 0;

    background:#ffffff;

}

.accordion-item{

    border:none;

    margin-bottom:15px;

    border-radius:15px;

    overflow:hidden;

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

}

.accordion-button{

    font-weight:600;

    padding:22px;

}

.accordion-button:not(.collapsed){

    background:#00A8A8;

    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    line-height:2;

    color:#64748B;

}

/*==================================================
Solutions Hero
==================================================*/

.solutions-hero{

    position:relative;

    overflow:hidden;

    padding:120px 0 90px;

    background:#F8FBFD;

}

.solutions-hero .container{

    position:relative;

    z-index:2;

}

/* Badge */

.hero-badge{

    display:inline-block;

    background:#E9FAFA;

    color:#00A8A8;

    padding:10px 22px;

    border-radius:50px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:25px;

}

/* Heading */

.solutions-hero h1{

    font-size:3rem;

    font-weight:800;

    line-height:1.4;

    color:#0F172A;

    margin-bottom:25px;

}

/* Description */

.solutions-hero p{

    max-width:760px;

    margin:auto;

    color:#64748B;

    font-size:1.1rem;

    line-height:2;

    margin-bottom:40px;

}

/* Buttons */

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

/* Decorative Shapes */

.hero-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    opacity:.25;

}

.hero-shape-1{

    width:300px;

    height:300px;

    background:#00ffff;

    top:-60px;

    left:-80px;

}

.hero-shape-2{

    width:220px;

    height:220px;

    background:#00ffff;

    right:-60px;

    bottom:-70px;

}

/*==================================================
Solutions Navigation
==================================================*/

.solutions-nav{

    background:#ffffff;

    border-top:1px solid #EEF2F7;

    border-bottom:1px solid #EEF2F7;

}

.solutions-menu{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

}

.solutions-menu a{

    display:flex;

    align-items:center;

    gap:8px;

    padding:22px 28px;

    color:#334155;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.solutions-menu a:hover{

    color:#00A8A8;

    background:#F8FBFD;

}

.solutions-menu i{

    font-size:1.1rem;

    color:#00A8A8;

}

/*==================================================
Responsive
==================================================*/

@media(max-width:992px){

    .solutions-hero{

        padding:90px 0 70px;

    }

    .solutions-hero h1{

        font-size:2.2rem;

    }

}

@media(max-width:768px){

    .solutions-menu{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        scrollbar-width:none;

    }

    .solutions-menu::-webkit-scrollbar{

        display:none;

    }

    .solutions-menu a{

        white-space:nowrap;

    }

}

@media(max-width:576px){

    .solutions-hero h1{

        font-size:1.8rem;

    }

    .solutions-hero p{

        font-size:1rem;

    }

}
/*------------------------------------------*/
/*======================================
Solutions Hero
=======================================*/

/*.solutions-hero{

    position:relative;

    overflow:hidden;

    padding:120px 0 90px;

    background:#F8FBFD;

}

.solutions-hero .container{

    position:relative;

    z-index:2;

}
/* Breadcrumb */

.breadcrumb-nav{

    text-align:center;

    margin-bottom:35px;

    font-size:.95rem;

}

.breadcrumb-nav a{

    color:#64748B;

    text-decoration:none;

}

.breadcrumb-nav a:hover{

    color:#00A8A8;

}

.breadcrumb-nav span{

    color:#94A3B8;

    margin:0 6px;

}

/* Hero */

.solutions-hero .section-tag{

    margin-bottom:20px;

}

.solutions-hero h1{

    font-size:3rem;

    font-weight:800;

    line-height:1.4;

    color:#0F172A;

    margin-bottom:25px;

}

.solutions-hero p{

    max-width:760px;

    margin:auto;

    color:#64748B;

    line-height:2;

    font-size:1.1rem;

    margin-bottom:40px;

}

/* Decorative Shapes */

.hero-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

}

.shape-one{

    width:260px;

    height:260px;

    background:#00A8A8;

    top:-70px;

    left:-80px;

}

.shape-two{

    width:220px;

    height:220px;

    background:#3B82F6;

    bottom:-70px;

    right:-60px;

}

/* Responsive */

@media(max-width:991px){

    .solutions-hero{

        padding:90px 0 70px;

    }

    .solutions-hero h1{

        font-size:2.2rem;

    }

}

@media(max-width:576px){

    .solutions-hero h1{

        font-size:1.8rem;

    }

    .solutions-hero p{

        font-size:1rem;

    }

}*/
/*==================================================
Solution Section
==================================================*/

.solution-section{

    padding:100px 0;

    background:#ffffff;

}

.solution-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#E9FAFA;

    color:#00A8A8;

    font-weight:600;

    font-size:.9rem;

    margin-bottom:20px;

}

.solution-section h2{

    font-size:2.3rem;

    font-weight:700;

    color:#0F172A;

    margin-bottom:25px;

    line-height:1.4;

}

.solution-intro{

    color:#64748B;

    font-size:1.05rem;

    line-height:2;

    margin-bottom:40px;

}

/*==================================================
Features
==================================================*/

.solution-features{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.feature-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.feature-item i{

    font-size:1.3rem;

    color:#00A8A8;

    margin-top:3px;

}

.feature-item h5{

    margin-bottom:8px;

    color:#0F172A;

    font-weight:700;

}

.feature-item p{

    margin:0;

    color:#64748B;

    line-height:1.9;

}

/*==================================================
Result Card
==================================================*/

.solution-result-card{

    background:#F8FBFD;

    border:1px solid #E5EDF5;

    border-radius:20px;

    padding:45px;

    height:100%;

    box-shadow:0 12px 30px rgba(15,23,42,.05);

}

.result-icon{

    width:75px;

    height:75px;

    border-radius:18px;

    background:#E9FAFA;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

}

.result-icon i{

    font-size:2rem;

    color:#00A8A8;

}

.solution-result-card h3{

    font-size:1.5rem;

    font-weight:700;

    margin-bottom:18px;

    color:#0F172A;

}

.solution-result-card p{

    color:#64748B;

    line-height:2;

    margin:0;

}

/*==================================================
Responsive
==================================================*/

@media(max-width:991px){

    .solution-section{

        padding:80px 0;

    }

    .solution-section h2{

        font-size:1.9rem;

    }

    .solution-result-card{

        margin-top:20px;

    }

}
/*==================================================
Final CTA
==================================================*/

.solutions-cta{

    padding:110px 0;

    background:linear-gradient(180deg,#F8FBFD,#FFFFFF);

}

.cta-tag{

    display:inline-block;

    background:#E9FAFA;

    color:#00A8A8;

    padding:10px 24px;

    border-radius:40px;

    font-weight:600;

    margin-bottom:20px;

}

.final-cta h2{

    font-size:2.6rem;

    font-weight:800;

    color:#0F172A;

    margin-bottom:25px;

}

.final-cta p{

    max-width:760px;

    margin:auto;

    color:#64748B;

    line-height:2;

    font-size:1.08rem;

}

.cta-card{

    background:#ffffff;

    border:1px solid #E5EDF5;

    border-radius:20px;

    padding:45px;

    text-align:center;

    height:100%;

    transition:.3s;

}

.cta-card:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 32px rgba(15,23,42,.08);

}

.cta-card.primary{

    border:2px solid #00A8A8;

}

.cta-card i{

    font-size:3rem;

    color:#00A8A8;

    margin-bottom:25px;

}

.cta-card h4{

    font-weight:700;

    margin-bottom:18px;

    color:#0F172A;

}

.cta-card p{

    font-size:1rem;

    margin-bottom:30px;

}

.cta-card .btn{

    min-width:220px;

}
/*==================================================
Guide Hero
==================================================*/

.guide-hero{

    padding:120px 0 100px;

    background:linear-gradient(180deg,#F8FBFD,#FFFFFF);

}

.guide-hero h1{

    font-size:3rem;

    font-weight:800;

    color:#0F172A;

    line-height:1.4;

    margin:25px 0;

}

.guide-hero p{

    max-width:760px;

    margin:auto;

    color:#64748B;

    line-height:2;

    font-size:1.1rem;

}

.hero-search{

    margin-top:50px;

    display:flex;

    justify-content:center;

    gap:15px;

    max-width:700px;

    margin-left:auto;

    margin-right:auto;

}

.hero-search input{

    height:58px;

    border-radius:12px;

}

.hero-search button{

    min-width:140px;

    border-radius:12px;

}

@media(max-width:768px){

    .guide-hero{

        padding:90px 0 70px;

    }

    .guide-hero h1{

        font-size:2.1rem;

    }

    .hero-search{

        flex-direction:column;

    }

    .hero-search button{

        width:100%;

    }

}
/*==================================================
Guide Categories
==================================================*/

.guide-categories{

    padding:100px 0;

    background:#ffffff;

}

.guide-category-card{

    display:block;

    height:100%;

    padding:35px;

    background:#ffffff;

    border:1px solid #E8EEF4;

    border-radius:18px;

    text-decoration:none;

    transition:.3s;

}

.guide-category-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 30px rgba(15,23,42,.06);

    border-color:#00A8A8;

}

.category-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#E9FAFA;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.category-icon i{

    font-size:1.8rem;

    color:#00A8A8;

}

.guide-category-card h4{

    color:#0F172A;

    font-weight:700;

    margin-bottom:15px;

}

.guide-category-card p{

    color:#64748B;

    line-height:1.9;

    margin:0;

}
/*==================================================
Featured Guide
==================================================*/

.featured-guide{

    padding:100px 0;

    background:#F8FBFD;

}

.featured-wrapper{

    background:#fff;

    border-radius:24px;

    padding:60px;

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

}

.featured-intro{

    color:#64748B;

    line-height:2;

    margin:25px 0 35px;

}

.featured-list{

    list-style:none;

    padding:0;

    margin:0;

}

.featured-list li{

    display:flex;

    gap:15px;

    align-items:flex-start;

    margin-bottom:18px;

    color:#334155;

}

.featured-list i{

    color:#00A8A8;

    margin-top:4px;

}

.featured-card{

    border:1px solid #E8EEF4;

    border-radius:20px;

    padding:40px;

    background:#FCFDFE;

}

.featured-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#E9FAFA;

    color:#00A8A8;

    font-weight:600;

    margin-bottom:20px;

}

.featured-stats{

    display:flex;

    justify-content:space-between;

    margin-top:35px;

}

.featured-stats strong{

    display:block;

    font-size:1.8rem;

    color:#0F172A;

}

.featured-stats span{

    color:#64748B;

    font-size:.9rem;

}
/*==================================================
Latest Articles
==================================================*/

.latest-articles{

    padding:100px 0;

    background:#ffffff;

}

.article-card{

    height:100%;

    padding:35px;

    border:1px solid #E8EEF4;

    border-radius:18px;

    background:#ffffff;

    transition:.3s;

}

.article-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 30px rgba(15,23,42,.06);

    border-color:#00A8A8;

}

.article-meta{

    display:flex;

    gap:10px;

    margin-bottom:22px;

}

.article-category{

    padding:6px 14px;

    border-radius:30px;

    background:#E9FAFA;

    color:#00A8A8;

    font-size:.85rem;

    font-weight:600;

}

.article-code{

    padding:6px 14px;

    border-radius:30px;

    background:#F1F5F9;

    color:#475569;

    font-size:.85rem;

    font-weight:700;

}

.article-card h4{

    color:#0F172A;

    font-size:1.35rem;

    line-height:1.7;

    margin-bottom:18px;

}

.article-card p{

    color:#64748B;

    line-height:1.9;

    margin-bottom:30px;

}

.article-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:auto;

    border-top:1px solid #EEF2F7;

    padding-top:20px;

}

.article-footer span{

    color:#64748B;

    font-size:.95rem;

}

.article-footer i{

    margin-left:5px;

}

.article-footer a{

    color:#00A8A8;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.article-footer a:hover{

    color:#008B8B;

}
/*==================================================
Explore More
==================================================*/

.explore-more{

    padding:100px 0;

    background:#F8FBFD;

}

.explore-link{

    display:flex;

    align-items:center;

    gap:15px;

    padding:22px 25px;

    background:#ffffff;

    border:1px solid #E8EEF4;

    border-radius:16px;

    text-decoration:none;

    color:#0F172A;

    font-weight:600;

    transition:.3s;

}

.explore-link:hover{

    transform:translateX(-5px);

    border-color:#00A8A8;

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

    color:#00A8A8;

}

.explore-link i{

    font-size:1.2rem;

    color:#00A8A8;

    flex-shrink:0;

}
/*==================================================
Guide CTA
==================================================*/

.cta{

    padding:100px 0;

    background:#ffffff;

}

.cta-box{

    background:linear-gradient(135deg,#00A8A8,#007D7D);

    color:#ffffff;

    border-radius:24px;

    padding:80px 60px;

    text-align:center;

    overflow:hidden;

    position:relative;

}

.cta-box h2{

    font-size:2.4rem;

    font-weight:800;

    line-height:1.5;

    margin:25px 0;

    color:#fff;

}

.cta-box p{

    max-width:760px;

    margin:auto;

    font-size:1.1rem;

    line-height:2;

    opacity:.95;

}

.cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-box .btn-primary{

    background:#ffffff;

    color:#00A8A8;

    border:none;

    padding:15px 35px;

    font-weight:700;

}

.cta-box .btn-primary:hover{

    background:#F8FAFC;

    color:#007D7D;

}

.cta-box .btn-outline-primary{

    border:2px solid rgba(255,255,255,.8);

    color:#ffffff;

    padding:15px 35px;

    font-weight:700;

}

.cta-box .btn-outline-primary:hover{

    background:#ffffff;

    color:#00A8A8;

}

@media(max-width:768px){

    .cta-box{

        padding:60px 30px;

    }

    .cta-box h2{

        font-size:1.9rem;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

}
/*==================================================
About Hero
==================================================*/

.about-hero{

    padding:120px 0 100px;

   background-image:url("../images/about-hero.webp");

}

.about-hero .container{

    position:relative;

    z-index:2;

}
.about-hero h1{

    font-size:3rem;

    font-weight:800;

    line-height:1.4;

    color:#0F172A;

    margin:25px 0;

}

.about-hero p{

    font-size:1.1rem;

    line-height:2;

    color:#64748B;

    max-width:530px;

}

.about-hero .hero-buttons{

    margin-top:40px;

}

.about-hero img{

    max-width:420px;

}

@media(max-width:991px){
.about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        270deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.82) 35%,
        rgba(255,255,255,.15) 70%,
        rgba(255,255,255,0) 100%
    );

}
    .about-hero{

        text-align:center;

        padding:90px 0 70px;
        background-image:url("../images/hero-about-mobile.webp");
    }

    .about-hero h1{

        font-size:2.3rem;

    }

    .about-hero p{

        margin:auto;

    }

    .about-hero img{

        margin-top:50px;

        max-width:320px;

    }

}
/*==================================================
About Story
==================================================*/

.about-story{

    padding:100px 0;

    background:#ffffff;

}

.about-story img{

    border-radius: 18px;

}

.about-story h2{

    font-size:2.3rem;

    font-weight:800;

    color:#0F172A;

    margin:20px 0 30px;

    line-height:1.4;

}

.about-story p{

    color:#64748B;

    font-size:1.05rem;

    line-height:2;

    margin-bottom:20px;

}

@media(max-width:991px){

    .about-story{

        text-align:center;

    }

    .about-story img{

        margin-bottom:30px;

        max-width:330px;

    }

}
/*==================================================
A03 - How We Think
==================================================*/

.about-mindset{

    padding:100px 0;

    background:#F8FBFD;

}

.about-mindset img{

    border-radius: 18px;
}

.about-mindset h2{

    font-size:2.3rem;

    font-weight:800;

    color:#0F172A;

    line-height:1.4;

    margin:20px 0 30px;

}

.about-mindset p{

    color:#64748B;

    font-size:1.05rem;

    line-height:2;

    margin-bottom:20px;

}

@media(max-width:991px){

    .about-mindset{

        text-align:center;

    }

    .about-mindset img{

        max-width:330px;

        margin-bottom:30px;

    }

}
/*==================================================
A04 - Methodology
==================================================*/

.about-methodology{

    padding:100px 0;

    background:#ffffff;

}

.method-card{

    height:100%;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:35px;

    transition:.3s;

}

.method-card:hover{

    transform:translateY(-6px);

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

}

.method-icon{

    width:70px;

    height:70px;

    border-radius:16px;

    background:#E8F8F8;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.method-icon i{

    font-size:1.9rem;

    color:#00A8A8;

}

.method-card h4{

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:18px;

    color:#0F172A;

}

.method-card p{

    color:#64748B;

    line-height:2;

    margin:0;

}
/*==================================================
A05 - Process Timeline
==================================================*/

.about-process{

    padding:100px 0;

    background:#F8FBFD;

}

.process-timeline{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.process-step{

    position:relative;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    transition:.3s;

}

.process-step:hover{

    transform:translateY(-6px);

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

}

.step-number{

    width:60px;

    height:60px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#00A8A8;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

    font-weight:700;

}

.process-step h4{

    margin-bottom:18px;

    font-size:1.25rem;

    font-weight:700;

    color:#0F172A;

}

.process-step p{

    color:#64748B;

    line-height:1.9;

    margin:0;

}

@media(max-width:991px){

    .process-timeline{

        grid-template-columns:1fr;

        gap:25px;

    }

}
/*==================================================
A06 - CTA
==================================================*/

.about-cta{

    padding:110px 0;

    background:#ffffff;

}

/*.about-cta .cta-box{

    max-width:900px;

    margin:auto;

    background:#F8FBFD;

    border-radius:24px;

    padding:70px 50px;

    border:1px solid #E5E7EB;

}*/

.about-cta h2{

    font-size:2.5rem;

    font-weight:800;

    color:#0F172A;

    margin:20px 0 30px;

    line-height:1.4;

}

.about-cta p{

    max-width:720px;

    margin:auto;

    color:#64748B;

    font-size:1.1rem;

    line-height:2;

}

.cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

@media(max-width:991px){

    .about-cta .cta-box{

        padding:50px 30px;

    }

    .about-cta h2{

        font-size:2rem;

    }

}
/*==================================================
C01 - Contact Hero
==================================================*/

.contact-hero{

    padding:120px 0 100px;
    background-image:url("../images/contact-hero.webp");
}
.contact-hero .container{

    position:relative;

    z-index:2;

}
.contact-hero h1{

    font-size:3rem;

    font-weight:800;

    color:#0F172A;

    line-height:1.3;

    margin:20px 0 30px;

}

.contact-hero p{

    font-size:1.1rem;

    color:#64748B;

    line-height:2;

    max-width:600px;

}

.contact-hero img{

    max-width:520px;

}

.hero-buttons{

    margin-top:40px;

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

@media(max-width:991px){

    .contact-hero{

        text-align:center;

        padding:90px 0;

    }
.contact-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        270deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.82) 35%,
        rgba(255,255,255,.15) 70%,
        rgba(255,255,255,0) 100%
    );

}
    .contact-hero{

        text-align:center;

        padding:90px 0 70px;
        background-image:url("../images/hero-contact-mobile.webp");
    }
    .contact-hero p{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .contact-hero img{

        margin-top:50px;

        max-width:350px;

    }

}
/*==================================================
C02 - Contact Methods
==================================================*/

.contact-methods{

    padding:100px 0;

    background:#ffffff;

}

.whatsapp-card{

    margin-top:60px;

    padding:45px;

    border-radius:22px;

    background:#F0FFF4;

    border:2px solid #25D366;

}

.whatsapp-card h3{

    margin:15px 0;

    font-size:2rem;

    font-weight:700;

}

.contact-icon{

    width:75px;

    height:75px;

    border-radius:18px;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

}

.contact-card{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:35px;

    text-align:center;

    height:100%;

    transition:.3s;

}

.contact-card:hover{

    transform:translateY(-5px);

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

}

.contact-card i{

    font-size:2rem;

    color:#00A8A8;

}

.contact-card h4{

    margin:20px 0 10px;

    font-weight:700;

}

.contact-card p{

    color:#64748B;

    margin:0;

}

@media(max-width:991px){

    .whatsapp-card{

        text-align:center;

    }

    .contact-icon{

        margin:0 auto 20px;

    }

    .whatsapp-card .btn{

        margin-top:30px;

    }

}
/*==================================================
C03 - Contact Process
==================================================*/

.contact-process{

    padding:100px 0;

    background:#F8FBFD;

}

.process-steps{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:20px;

    margin-top:70px;

    flex-wrap:wrap;

}

.process-item{

    flex:1;

    min-width:220px;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    transition:.3s;

}

.process-item:hover{

    transform:translateY(-5px);

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

}

.step-circle{

    width:60px;

    height:60px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#00A8A8;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.3rem;

    font-weight:700;

}

.process-item h4{

    margin-bottom:15px;

    font-weight:700;

    color:#0F172A;

}

.process-item p{

    color:#64748B;

    line-height:1.9;

    margin:0;

}

.process-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.8rem;

    color:#CBD5E1;

    padding-top:70px;

}

@media(max-width:991px){

    .process-arrow{

        display:none;

    }

}
/*==================================================
C04 - CTA
==================================================*/

.contact-cta{

    padding:110px 0;

    background:#ffffff;

}

.contact-cta .cta-box{

    max-width:900px;

    margin:auto;

    background:#F8FBFD;

    border:1px solid #E5E7EB;

    border-radius:24px;

    padding:70px 50px;

}

.contact-cta h2{

    font-size:2.4rem;

    font-weight:800;

    color:#0F172A;

    margin:20px 0 30px;

    line-height:1.4;

}

.contact-cta p{

    max-width:700px;

    margin:auto;

    color:#64748B;

    line-height:2;

    font-size:1.1rem;

}

.contact-cta .cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

@media(max-width:991px){

    .contact-cta .cta-box{

        padding:50px 30px;

    }

    .contact-cta h2{

        font-size:2rem;

    }

}
/* ================================
   Category Hero
================================ */

.category-hero {
    padding: 90px 0;
    background: #f8fafc;
}


.category-hero-content {
    max-width: 850px;
}


/* Category Badge */

.category-badge {

    width: 70px;
    height: 70px;

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

    border-radius: 18px;

    color: white;
    font-size: 32px;
    font-weight: 700;

    margin-bottom: 30px;

}


/* Revenue Category */

.revenue-theme .category-badge {

    background: #16A34A;

}


/* Title */

.category-hero h1 {

    font-size: 48px;

    line-height: 1.3;

    color: #0f172a;

    margin-bottom: 20px;

}


/* Description */

.category-hero p {

    font-size: 20px;

    line-height: 1.8;

    color: #475569;

    max-width: 720px;

    margin-bottom: 35px;

}


/* CTA */

.primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 32px;

    background: #0f766e;

    color: white;

    border-radius: 12px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    transition: 0.3s;

}


.primary-btn:hover {

    transform: translateY(-3px);

}
@media(max-width:768px){


.category-hero {

    padding: 60px 20px;

}


.category-hero h1 {

    font-size: 32px;

}


.category-hero p {

    font-size: 17px;

}


.category-badge {

    width:60px;

    height:60px;

    font-size:26px;

}


}
/*==================================
Category Overview
==================================*/

.category-overview{

    padding:80px 0;

    background:#ffffff;

}

.section-header{

    max-width:850px;

    margin:0 auto 55px;

    text-align:center;

}
.section-tag{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

  /*  background:#ecfdf5;

    color:#16A34A;*/

    background:#E8FAFA;

    color:#00A8A8;

    font-size:20px;

    font-weight:600;

    margin-bottom:18px;

}

.section-header h2{

    font-size:38px;

    color:#0f172a;

    margin-bottom:20px;

}

.section-header p{

    font-size:19px;

    line-height:1.9;

    color:#64748b;

}

.overview-grid{

    display:grid;

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

    gap:25px;

}

.overview-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:22px;

    border:1px solid #e2e8f0;

    border-radius:14px;

    transition:.3s;

}

.overview-item:hover{

    border-color:#16A34A;

    transform:translateY(-4px);

}

.overview-item span{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#dcfce7;

    color:#16A34A;

    font-weight:bold;

    flex-shrink:0;

}

.overview-item p{

    margin:0;

    color:#334155;

    font-size:17px;

    line-height:1.6;

}
/*==============================
Articles
==============================*/

.category-articles{

    padding:90px 0;

    background:#f8fafc;

}


.articles-grid{

    display:grid;

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

    gap:30px;

}


.article-card{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    border-top:5px solid #16A34A;

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

    transition:.3s;

}


.article-card:hover{

    transform:translateY(-6px);

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

}


.article-code{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    background:#dcfce7;

    color:#16A34A;

    border-radius:30px;

    font-weight:700;

    margin-bottom:20px;

}


.article-card h3{

    font-size:24px;

    color:#0f172a;

    margin-bottom:15px;

}


.article-card p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:28px;

}


.article-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #e2e8f0;

    padding-top:20px;

}


.article-footer span{

    color:#64748b;

    font-size:14px;

}


.article-footer a{

    text-decoration:none;

    color:#16A34A;

    font-weight:600;

}
/*==============================
Category CTA
==============================*/

.category-cta{

    padding:100px 0;

    background:#ffffff;

}

.category-cta .cta-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    padding:70px 50px;

    border-radius:24px;

    background:#0f172a;

}

.cta-box h2{

    color:#ffffff;

    font-size:40px;

    margin-bottom:20px;

}

.cta-box p{

    color:#cbd5e1;

    font-size:20px;

    line-height:1.9;

    max-width:650px;

    margin:0 auto 35px;

}
/*====================================================
ARTICLE HERO
====================================================*/

.article-hero{

    padding:70px 0 50px;

    background:#f8fafc;

    border-bottom:1px solid #e2e8f0;

}

/* Breadcrumb */

.breadcrumb{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:35px;

    font-size:14px;

}

.breadcrumb a{

    color:#64748b;

    text-decoration:none;

}

.breadcrumb a:hover{

    color:#0f766e;

}

.breadcrumb span{

    color:#94a3b8;

}

.breadcrumb .current{

    color:#16A34A;

    font-weight:600;

}

/* Article Header */

.article-header{

    max-width:820px;

}

.article-code{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    background:#dcfce7;

    color:#16A34A;

    border-radius:30px;

    font-weight:700;

    margin-bottom:24px;

}

.article-header h1{

    font-size:46px;

    line-height:1.3;

    color:#0f172a;

    margin-bottom:24px;

}

.article-header p{

    font-size:20px;

    line-height:1.9;

    color:#475569;

    margin-bottom:25px;

}

.article-meta{

    color:#64748b;

    font-size:15px;

}
/*====================================
Problem Reframing
====================================*/

.problem-reframing{

    padding:60px 0 20px;

}

.reframing-box{

    padding:35px;

    background:#f8fafc;

    border-right:6px solid #16A34A;

    border-radius:18px;

}

.wrong-view{

    font-size:24px;

    color:#0f172a;

    margin-bottom:20px;

}

.right-view{

    font-size:20px;

    line-height:2;

    color:#475569;

    margin:0;

}

.right-view strong{

    color:#16A34A;

}
/*====================================
ARTICLE CONTENT
====================================*/

.article-container{

    max-width:820px;

    margin:auto;

    padding:70px 20px;

}

.article-section{

    margin-bottom:80px;

}

.article-section h2{

    font-size:36px;

    color:#0f172a;

    margin-bottom:25px;

}

.article-section p{

    font-size:19px;

    line-height:2;

    color:#475569;

    margin-bottom:24px;

}

.article-note{

    margin-top:40px;

    padding:30px;

    border-radius:18px;

    background:#f8fafc;

    border-right:5px solid #16A34A;

}

.article-note h3{

    margin-bottom:20px;

    font-size:22px;

    color:#0f172a;

}

.article-note ul{

    margin:0;

    padding-right:20px;

}

.article-note li{

    margin-bottom:14px;

    line-height:1.8;

    color:#475569;

}
/*====================================================
WHY IT HAPPENS
====================================================*/

.reason-list{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:35px;

}

.reason-card{

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    padding:28px;

    transition:.3s;

}

.reason-card:hover{

    border-color:#16A34A;

    transform:translateY(-3px);

}

.reason-card h3{

    margin:0 0 12px;

    font-size:22px;

    color:#0f172a;

}

.reason-card p{

    margin:0;

    color:#475569;

    line-height:1.9;

    font-size:18px;

}
/*====================================================
HOW TO DETECT
====================================================*/

.checklist{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.check-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:20px 24px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:14px;

}

.check-icon{

    width:34px;

    height:34px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#dcfce7;

    color:#16A34A;

    border-radius:50%;

    font-weight:700;

}

.check-item p{

    margin:0;

    font-size:18px;

    line-height:1.8;

    color:#334155;

}
/*====================================================
IMPACT
====================================================*/

.impact-grid{

    display:grid;

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

    gap:24px;

    margin-top:35px;

}

.impact-card{

    padding:28px;

    border:1px solid #e2e8f0;

    border-radius:16px;

    background:#ffffff;

    transition:.3s;

}

.impact-card:hover{

    transform:translateY(-4px);

    border-color:#16A34A;

}

.impact-card h3{

    margin:0 0 15px;

    font-size:22px;

    color:#0f172a;

}

.impact-card p{

    margin:0;

    color:#475569;

    line-height:1.9;

    font-size:17px;

}
/*====================================================
COMMON MISTAKES
====================================================*/

.mistakes-list{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:35px;

}

.mistake-card{

    display:flex;

    gap:24px;

    padding:28px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    transition:.3s;

}

.mistake-card:hover{

    border-color:#dc2626;

    transform:translateY(-3px);

}

.mistake-number{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fee2e2;

    color:#dc2626;

    font-weight:700;

    font-size:18px;

}

.mistake-content{

    flex:1;

}

.mistake-content h3{

    margin:0 0 12px;

    font-size:22px;

    color:#0f172a;

}

.mistake-content p{

    margin:0;

    font-size:18px;

    line-height:1.9;

    color:#475569;

}
/*====================================================
PRACTICAL STEPS
====================================================*/

.steps-list{

    display:flex;

    flex-direction:column;

    gap:24px;

    margin-top:35px;

}

.step-card{

    display:flex;

    gap:24px;

    padding:30px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    transition:.3s;

}

.step-card:hover{

    border-color:#16A34A;

    transform:translateY(-3px);

}

.step-number{

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#16A34A;

    color:#ffffff;

    font-size:22px;

    font-weight:700;

}

.step-content{

    flex:1;

}

.step-content h3{

    margin:0 0 12px;

    font-size:22px;

    color:#0f172a;

}

.step-content p{

    margin:0;

    font-size:18px;

    line-height:1.9;

    color:#475569;

}
/*====================================================
HOW RCM HELPS
====================================================*/

.rcm-features{

    display:grid;

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

    gap:24px;

    margin-top:35px;

}

.rcm-feature{

    background:#f8fafc;

    border:1px solid #dbeafe;

    border-radius:16px;

    padding:28px;

    transition:.3s;

}

.rcm-feature:hover{

    transform:translateY(-3px);

    border-color:#16A34A;

}

.rcm-feature h3{

    margin:0 0 15px;

    font-size:22px;

    color:#0f172a;

}

.rcm-feature p{

    margin:0;

    font-size:18px;

    line-height:1.9;

    color:#475569;

}
/*====================================================
RELATED ARTICLES
====================================================*/

.related-articles{

    display:grid;

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

    gap:24px;

    margin-top:35px;

}

.related-card{

    display:block;

    padding:28px;

    text-decoration:none;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    transition:.3s;

}

.related-card:hover{

    border-color:#16A34A;

    transform:translateY(-3px);

}

.related-code{

    display:inline-block;

    padding:6px 14px;

    border-radius:20px;

    background:#dcfce7;

    color:#16A34A;

    font-weight:700;

    margin-bottom:18px;

}

.related-card h3{

    margin:0 0 12px;

    font-size:22px;

    color:#0f172a;

}

.related-card p{

    margin:0;

    font-size:17px;

    line-height:1.8;

    color:#475569;

}
/*====================================================
ARTICLE CTA
====================================================*/

.article-cta{

    padding:100px 0;

    background:#ffffff;

}

.article-cta .cta-box{

    /*max-width:900px;*/

    margin:auto;

    text-align:center;

    padding:80px 60px;

    border-radius:24px;

   /* background:#0f172a;*/

background: linear-gradient(135deg, #00A8A8, #007D7D);
    color: #ffffff;
    overflow: hidden;
    position: relative;

}

.article-cta .cta-box h2{

    color:#ffffff;

    font-size:40px;

    margin-bottom:20px;

}

.article-cta .cta-box p{

    max-width:650px;

    margin:0 auto 35px;

    color:#cbd5e1;

    font-size:20px;

    line-height:1.9;

}
/*=========================
    Coming Soon
=========================*/

.coming-wrapper{

    padding:90px 20px;

    background:#F8FAFC;

}

.coming-card{

    background:#fff;

    border-radius:26px;

    overflow:hidden;

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

}

.coming-image{

    width:100%;

    display:block;

    object-fit:cover;

}

.coming-body{

    padding:45px;

    text-align:center;

}

.coming-title{

    font-size:2rem;

    font-weight:800;

    color:#1F2937;

    margin-bottom:25px;

}

.coming-text{

    max-width:560px;

    margin:auto;

    line-height:2;

    color:#64748B;

    font-size:1.08rem;

}

.coming-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.coming-buttons .btn{

    min-width:260px;

    border-radius:14px;

    padding:15px 28px;

}
@media(max-width:768px){

.coming-body{

    padding:35px 25px;

}

.coming-title{

    font-size:1.6rem;

}

.coming-text{

    font-size:1rem;

}

.coming-buttons{

    flex-direction:column;

}

.coming-buttons .btn{

    width:100%;

}

}