/* ==========================================================
   NHẬT NAM TECHNOLOGY WEBSITE 2.0
   File        : style.css
   Version     : 2.0
   Author      : ChatGPT & Trần Đức Thế
   ========================================================== */


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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Be Vietnam Pro',sans-serif;

    font-size:16px;

    line-height:1.7;

    font-weight:400;

    color:#333333;

    background:#ffffff;

    overflow-x:hidden;

}


/* ==========================================================
   ROOT
========================================================== */

:root{

    /* Brand */

    --nn-primary:#2E7D32;
    --nn-primary-dark:#1B5E20;
    --nn-primary-light:#81C784;

    /* Accent */

    --nn-accent:#C62828;

    /* Neutral */

    --nn-white:#ffffff;
    --nn-light:#f8f9fa;
    --nn-border:#e5e5e5;
    --nn-text:#333333;
    --nn-text-light:#666666;

    /* Shadow */

    --nn-shadow:
        0 10px 30px rgba(0,0,0,.08);

    /* Radius */

    --nn-radius:12px;

    /* Transition */

    --nn-transition:.35s ease;

}


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

a{

    text-decoration:none;

    transition:var(--nn-transition);

}

a:hover{

    text-decoration:none;

}


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

img{

    max-width:100%;

    height:auto;

    display:block;

}


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

section{

    position:relative;

    padding:80px 0;

}


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

.container{

    max-width:1200px;

}


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

.btn{

    border-radius:50px;

    padding:14px 30px;

    font-weight:600;

    transition:var(--nn-transition);

}

.nn-btn-primary{

    background:var(--nn-primary);

    color:#ffffff;

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

}

.nn-btn-primary:hover{

    background:var(--nn-primary-dark);

    border-color:var(--nn-primary-dark);

    color:#ffffff;

    transform:translateY(-2px);

}

.nn-btn-outline{

    background:#ffffff;

    color:var(--nn-primary);

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

}

.nn-btn-outline:hover{

    background:var(--nn-primary);

    color:#ffffff;

}

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

.nn-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:1050;

    background:var(--nn-white);

    transition:all .35s ease;

}

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

.nn-header-top{

    background:var(--nn-primary-dark);

    color:var(--nn-white);

    font-size:.90rem;

    padding:8px 0;

}

.nn-header-slogan{

    font-weight:500;

    letter-spacing:.3px;

}

.nn-header-contact{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.nn-header-phone{

    color:var(--nn-white);

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:8px;

}

.nn-header-phone:hover{

    color:#FFE082;

}

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

.nn-navbar{

    min-height:88px;

    background:#ffffff;

    padding:12px 0;

}

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

.nn-logo{

    display:flex;

    align-items:center;

}

.nn-logo img{

    height:80px;

    width:auto;

    display:block;

    transition:var(--nn-transition);

}

.nn-logo:hover img{

    transform:scale(1.03);

}

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

.nn-navbar .navbar-nav{

    gap:12px;

}

.nn-navbar .nav-link{

    color:var(--nn-text);

    font-size:1rem;

    font-weight:600;

    padding:10px 14px;

    position:relative;

}

.nn-navbar .nav-link:hover{

    color:var(--nn-primary);

}

.nn-navbar .nav-link.active{

    color:var(--nn-primary);

}

/* Gạch chân khi Hover */

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

    content:"";

    position:absolute;

    left:14px;

    bottom:2px;

    width:0;

    height:2px;

    background:var(--nn-primary);

    transition:width .3s ease;

}

.nn-navbar .nav-link:hover::after,

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

    width:calc(100% - 28px);

}

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

.nn-navbar .nn-btn-primary{

    padding:12px 24px;

    border-radius:50px;

    font-size:.95rem;

    font-weight:700;

    box-shadow:0 8px 18px rgba(46,125,50,.20);

}

.nn-navbar .nn-btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(46,125,50,.30);

}

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

.navbar-toggler{

    border:0;

    padding:6px;

    box-shadow:none !important;

}

.navbar-toggler:focus{

    box-shadow:none;

}

/* ==========================================================
   HEADER SHRINK
   (sẽ kích hoạt bằng JavaScript ở Part 01C)
========================================================== */

.nn-header.nn-scrolled{

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

}

.nn-header.nn-scrolled .nn-navbar{

    min-height:76px;

    transition:all .3s ease;

}

.nn-header.nn-scrolled .nn-logo img{

    height:52px;

}

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

.nn-hero{

    background:linear-gradient(
        135deg,
        #F8FFF8 0%,
        #FFFFFF 55%,
        #EDF7ED 100%
    );

    overflow:hidden;

    padding:100px 0;

}

.nn-hero .row{

    min-height:620px;

}


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

.nn-hero-subheading{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(46,125,50,.10);

    color:var(--nn-primary);

    font-weight:700;

    font-size:.92rem;

    letter-spacing:.8px;

    text-transform:uppercase;

}

.nn-hero-title{

    font-size:3rem;

    line-height:1.25;

    font-weight:800;

    color:var(--nn-text);

    margin-bottom:28px;

}

.nn-hero-title span{

    color:var(--nn-primary);

}

.nn-hero-description{

    font-size:1.1rem;

    color:var(--nn-text-light);

    margin-bottom:36px;

    max-width:620px;

}


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

.nn-hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

.nn-hero-buttons .btn{

    min-width:220px;

    justify-content:center;

    display:inline-flex;

    align-items:center;

    gap:10px;

}


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

.nn-hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.nn-hero-image img{

    width:100%;

    max-width:620px;

    border-radius:24px;

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

    transition:transform .5s ease;

}

.nn-hero-image img:hover{

    transform:translateY(-8px);

}


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

.nn-hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    top:-150px;

    border-radius:50%;

    background:rgba(46,125,50,.05);

}

.nn-hero::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(198,40,40,.05);

}

/* ==========================================================
   MOBILE MENU ICON
========================================================== */

.navbar-toggler i{

    color:var(--nn-primary);

    font-size:2rem;

    transition:all .3s ease;

}

.navbar-toggler:hover i{

    color:var(--nn-primary-dark);

}


/* ==========================================================
   BACK TO TOP
========================================================== */

.nn-backtotop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:var(--nn-primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:9999;

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

}

.nn-backtotop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.nn-backtotop:hover{

    background:var(--nn-primary-dark);

    transform:translateY(-4px);

}

/* ==========================================================
   SECTION 03 - PROBLEM & SOLUTION
========================================================== */

.nn-problem{

    position:relative;

    padding:100px 0;

    background:#ffffff;

    overflow:hidden;

}

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

.nn-section-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:50px;

    background:rgba(46,125,50,.08);

    color:var(--nn-primary);

    font-size:.90rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.nn-section-title{

    margin-bottom:22px;

    color:var(--nn-text);

    font-size:2.45rem;

    font-weight:800;

    line-height:1.35;

}

.nn-section-description{

    color:var(--nn-text-light);

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:0;

}

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

.nn-problem-card{

    height:100%;

    padding:40px 32px;

    background:#ffffff;

    border-radius:20px;

    border:1px solid #E8ECEF;

    transition:all .35s ease;

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

}

.nn-problem-card:hover{

    transform:translateY(-10px);

    border-color:rgba(46,125,50,.30);

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

}

.nn-problem-icon{

    width:72px;

    height:72px;

    margin-bottom:24px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(46,125,50,.10);

    color:var(--nn-primary);

    transition:all .35s ease;

}

.nn-problem-card:hover .nn-problem-icon{

    background:var(--nn-primary);

    color:#ffffff;

    transform:rotate(-8deg);

}

.nn-problem-icon i{

    font-size:2rem;

}

.nn-problem-card h3{

    margin-bottom:18px;

    color:var(--nn-text);

    font-size:1.35rem;

    font-weight:700;

}

.nn-problem-card p{

    margin:0;

    color:var(--nn-text-light);

    line-height:1.9;

}

/* ==========================================================
   SOLUTION
========================================================== */

.nn-solution-list{

    margin:35px 0;

    padding:0;

    list-style:none;

}

.nn-solution-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:18px;

    color:var(--nn-text);

    line-height:1.8;

}

.nn-solution-list li i{

    margin-top:4px;

    color:var(--nn-primary);

    font-size:1.15rem;

    flex-shrink:0;

}

.nn-solution-list strong{

    color:var(--nn-primary-dark);

}

.nn-solution-image{

    text-align:center;

}

.nn-solution-image img{

    width:100%;

    max-width:620px;

    border-radius:22px;

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

    transition:all .40s ease;

}

.nn-solution-image img:hover{

    transform:translateY(-8px);

}

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

.nn-problem .nn-btn-primary{

    min-width:240px;

}

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

.nn-problem::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:rgba(46,125,50,.04);

}

.nn-problem::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    left:-80px;

    bottom:-80px;

    border-radius:50%;

    background:rgba(198,40,40,.04);

}

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

@media (max-width:991.98px){

    .nn-problem{

        padding:80px 0;

    }

    .nn-section-title{

        font-size:2rem;

    }

    .nn-problem-card{

        padding:32px 24px;

    }

    .nn-solution-image{

        margin-top:40px;

    }

}

@media (max-width:767.98px){

    .nn-problem{

        padding:60px 0;

    }

    .nn-section-title{

        font-size:1.75rem;

    }

    .nn-section-description{

        font-size:1rem;

    }

    .nn-problem-card{

        text-align:center;

        padding:28px 22px;

    }

    .nn-problem-icon{

        margin:0 auto 22px;

    }

    .nn-solution-list li{

        text-align:left;

    }

    .nn-problem .nn-btn-primary{

        width:100%;

    }

}

/* ==========================================================
   SECTION 04 - CORE SERVICES
========================================================== */

#services{
    padding:100px 0;
    background:#f8fafc;
}

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

.nn-section-subtitle{
    display:inline-block;
    margin-bottom:12px;
    font-size:0.95rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--nn-primary);
}

.nn-section-title{
    margin-bottom:20px;
    font-size:2.2rem;
    font-weight:700;
    color:var(--nn-dark);
    line-height:1.35;
}

.nn-section-description{
    max-width:760px;
    margin:auto;
    font-size:1.05rem;
    color:#667085;
    line-height:1.8;
}

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

.nn-service-card{

    display:flex;
    flex-direction:column;

    height:100%;

    padding:38px 34px;

    background:#ffffff;

    border:1px solid #e8edf3;

    border-radius:18px;

    transition:all .35s ease;

    box-shadow:0 10px 28px rgba(0,0,0,.04);

}

.nn-service-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,128,0,.18);

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

}

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

.nn-service-icon{

    width:78px;

    height:78px;

    margin-bottom:24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,128,0,.08);

}

.nn-service-icon i{

    font-size:2rem;

    color:var(--nn-primary);

}

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

.nn-service-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

    font-weight:700;

    color:var(--nn-dark);

}

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

.nn-service-card>p{

    margin-bottom:26px;

    color:#667085;

    line-height:1.8;

    flex-grow:1;

}

/* ==========================================================
   SERVICE TARGET
========================================================== */

.nn-service-target{

    margin-bottom:30px;

    padding:18px 20px;

    background:#f8fafc;

    border:1px solid #e6edf5;

    border-radius:12px;

}

.nn-service-target span{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

    font-size:0.95rem;

    font-weight:600;

    color:var(--nn-dark);

}

.nn-service-target span i{

    color:var(--nn-primary);

    font-size:1rem;

}

.nn-service-target div{

    font-size:0.95rem;

    line-height:1.7;

    color:#667085;

}

/* ==========================================================
   SERVICE ACTIONS
========================================================== */

.nn-service-actions{

    display:flex;

    gap:15px;

    margin-top:auto;

    flex-wrap:wrap;

}

.nn-service-actions .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:180px;

    min-height:48px;

    padding:12px 24px;

    font-weight:600;

    border-radius:10px;

    transition:all .30s ease;

    text-decoration:none;

}

.nn-service-actions .btn i{

    font-size:1rem;

}

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

.nn-btn-outline{

    color:var(--nn-primary);

    background:#ffffff;

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

}

.nn-btn-outline:hover{

    color:#ffffff;

    background:var(--nn-primary);

    border-color:var(--nn-primary);

    transform:translateY(-2px);

}

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

.nn-btn-primary{

    color:#ffffff;

    background:var(--nn-primary);

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

}

.nn-btn-primary:hover{

    color:#ffffff;

    background:var(--nn-primary-dark);

    border-color:var(--nn-primary-dark);

    transform:translateY(-2px);

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

}

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

@media (max-width:991.98px){

    #services{

        padding:80px 0;

    }

    .nn-section-title{

        font-size:1.9rem;

    }

    .nn-service-card{

        padding:30px;

    }

}

@media (max-width:767.98px){

    #services{

        padding:70px 0;

    }

    .nn-section-title{

        font-size:1.65rem;

    }

    .nn-section-description{

        font-size:1rem;

    }

    .nn-service-card{

        padding:26px;

    }

    .nn-service-actions{

        flex-direction:column;

    }

    .nn-service-actions .btn{

        width:100%;

        min-width:100%;

    }

}

@media (max-width:575.98px){

    .nn-service-icon{

        width:68px;

        height:68px;

    }

    .nn-service-icon i{

        font-size:1.75rem;

    }

    .nn-service-card h3{

        font-size:1.3rem;

    }

    .nn-service-card{

        padding:22px;

        border-radius:16px;

    }

}

/* ==========================================================
   SECTION 05 - WORK PROCESS
========================================================== */

#process{
    padding:100px 0;
    background:#ffffff;
}

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

.nn-process-card{

    position:relative;

    height:100%;

    padding:36px 30px;

    text-align:center;

    background:#ffffff;

    border:1px solid #e8edf3;

    border-radius:18px;

    box-shadow:0 10px 28px rgba(0,0,0,.04);

    transition:all .35s ease;

}

.nn-process-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,128,0,.18);

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

}

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

.nn-process-number{

    position:absolute;

    top:18px;

    right:18px;

    font-size:.95rem;

    font-weight:700;

    color:rgba(0,128,0,.18);

    letter-spacing:1px;

}

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

.nn-process-icon{

    width:82px;

    height:82px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,128,0,.08);

}

.nn-process-icon i{

    font-size:2rem;

    color:var(--nn-primary);

}

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

.nn-process-card h3{

    margin-bottom:18px;

    font-size:1.35rem;

    font-weight:700;

    color:var(--nn-dark);

}

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

.nn-process-card p{

    margin:0;

    color:#667085;

    line-height:1.8;

    font-size:1rem;

}

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

.nn-process-card:hover .nn-process-icon{

    background:var(--nn-primary);

    transform:rotateY(180deg);

    transition:all .45s ease;

}

.nn-process-card:hover .nn-process-icon i{

    color:#ffffff;

}

/* ==========================================================
   CARD TITLE HOVER
========================================================== */

.nn-process-card:hover h3{

    color:var(--nn-primary);

}

/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:992px){

    #process{

        padding:100px 0;

    }

}

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

@media (max-width:991.98px){

    #process{

        padding:80px 0;

    }

    .nn-process-card{

        padding:30px 24px;

    }

    .nn-process-number{

        top:16px;

        right:16px;

        font-size:.90rem;

    }

}

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

@media (max-width:767.98px){

    #process{

        padding:70px 0;

    }

    .nn-process-card{

        padding:28px 22px;

        border-radius:16px;

    }

    .nn-process-icon{

        width:72px;

        height:72px;

        margin-bottom:20px;

    }

    .nn-process-icon i{

        font-size:1.8rem;

    }

    .nn-process-card h3{

        font-size:1.25rem;

    }

    .nn-process-card p{

        font-size:.95rem;

        line-height:1.7;

    }

}

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

@media (max-width:575.98px){

    .nn-process-card{

        padding:24px 20px;

    }

    .nn-process-number{

        top:14px;

        right:14px;

        font-size:.85rem;

    }

    .nn-process-icon{

        width:66px;

        height:66px;

    }

    .nn-process-icon i{

        font-size:1.6rem;

    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .nn-process-card,

    .nn-process-icon,

    .nn-process-icon i{

        transition:none !important;

        animation:none !important;

        transform:none !important;

    }

}

/* ==========================================================
   SECTION 06 - PARTNERS & BRANDS
========================================================== */

#partners{

    padding:100px 0;

    background:#f8fafc;

}

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

.nn-brand-card{

    display:flex;

    flex-direction:column;

    height:100%;

    padding:36px 32px;

    background:#ffffff;

    border:1px solid #e7edf3;

    border-radius:18px;

    box-shadow:0 10px 28px rgba(0,0,0,.04);

    transition:all .35s ease;

}

.nn-brand-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,128,0,.18);

    box-shadow:0 18px 42px rgba(0,0,0,.08);

}

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

.nn-brand-icon{

    width:80px;

    height:80px;

    margin-bottom:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(22,163,74,.08);

}

.nn-brand-icon i{

    font-size:2rem;

    color:var(--nn-primary);

}

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

.nn-brand-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

    font-weight:700;

    color:var(--nn-dark);

}

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

.nn-brand-card > p{

    margin-bottom:22px;

    line-height:1.8;

    color:#667085;

}

/* ==========================================================
   BRAND NOTE
========================================================== */

.nn-brand-note{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:22px;

    padding:12px 14px;

    border-left:4px solid var(--nn-primary);

    background:#f0fdf4;

    border-radius:8px;

}

.nn-brand-note i{

    margin-top:2px;

    color:var(--nn-primary);

    font-size:1rem;

    flex-shrink:0;

}

.nn-brand-note span{

    font-size:.92rem;

    line-height:1.6;

    color:#4b5563;

}

/* ==========================================================
   BRAND LOGO LIST
========================================================== */

.nn-brand-logos{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:30px;

}

/* ==========================================================
   BRAND LOGO ITEM
========================================================== */

.nn-brand-logo-item{

    display:flex;

    align-items:center;

    justify-content:center;

    width:120px;

    height:72px;

    padding:12px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    text-decoration:none;

    transition:all .30s ease;

}

.nn-brand-logo-item:hover{

    transform:translateY(-4px);

    border-color:var(--nn-primary);

    box-shadow:0 8px 18px rgba(0,0,0,.08);

    background:#f8fffa;

}

.nn-brand-logo-item img{

    max-width:100%;

    max-height:42px;

    width:auto;

    height:auto;

    object-fit:contain;

    transition:transform .30s ease;

}

.nn-brand-logo-item:hover img{

    transform:scale(1.05);

}

/* ==========================================================
   BRAND ACTIONS
========================================================== */

.nn-brand-actions{

    margin-top:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-top:12px;

}

.nn-brand-actions .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:220px;

    min-height:48px;

    padding:12px 26px;

    border-radius:10px;

    font-weight:600;

    transition:all .30s ease;

}

.nn-brand-actions .btn i{

    font-size:1rem;

}

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

.nn-brand-actions .nn-btn-primary{

    color:#ffffff;

    background:var(--nn-primary);

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

}

.nn-brand-actions .nn-btn-primary:hover{

    background:var(--nn-primary-dark);

    border-color:var(--nn-primary-dark);

    color:#ffffff;

    transform:translateY(-2px);

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

}

/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:992px){

    .nn-brand-card{

        min-height:100%;

    }

}

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

@media (max-width:991.98px){

    #partners{

        padding:80px 0;

    }

    .nn-brand-card{

        padding:30px 24px;

    }

    .nn-brand-logo-item{

        width:110px;

        height:68px;

    }

}

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

@media (max-width:767.98px){

    #partners{

        padding:70px 0;

    }

    .nn-brand-card{

        padding:26px 20px;

    }

    .nn-brand-icon{

        width:70px;

        height:70px;

        margin-bottom:20px;

    }

    .nn-brand-icon i{

        font-size:1.8rem;

    }

    .nn-brand-card h3{

        font-size:1.30rem;

    }

    .nn-brand-card>p{

        font-size:.96rem;

    }

    .nn-brand-note{

        padding:10px 12px;

    }

    .nn-brand-logos{

        justify-content:center;

        gap:14px;

    }

    .nn-brand-logo-item{

        width:105px;

        height:66px;

    }

    .nn-brand-actions .btn{

        width:100%;

        min-width:100%;

    }

}

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

@media (max-width:575.98px){

    .nn-brand-card{

        padding:22px 18px;

        border-radius:16px;

    }

    .nn-brand-logo-item{

        width:92px;

        height:60px;

        padding:10px;

    }

    .nn-brand-logo-item img{

        max-height:34px;

    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .nn-brand-card,

    .nn-brand-logo-item,

    .nn-brand-logo-item img,

    .nn-brand-actions .btn{

        transition:none !important;

        animation:none !important;

        transform:none !important;

    }

}

/* ==========================================================
   SECTION 07 - CTA
========================================================== */

#cta{

    padding:100px 0;

    background:linear-gradient(
        135deg,
        #f8fafc 0%,
        #eef8f1 100%
    );

}

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

.nn-cta-benefits{

    margin-top:36px;

}

.nn-cta-item{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.nn-cta-item i{

    color:var(--nn-primary);

    font-size:1.20rem;

    flex-shrink:0;

}

.nn-cta-item span{

    color:#374151;

    line-height:1.7;

}

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

.nn-cta-card{

    background:#ffffff;

    border-radius:20px;

    padding:40px;

    border:1px solid #e5e7eb;

    box-shadow:0 18px 45px rgba(0,0,0,.06);

}

.nn-cta-card h3{

    margin-bottom:10px;

    font-size:1.75rem;

    font-weight:700;

    color:var(--nn-dark);

}

.nn-cta-card>p{

    margin-bottom:30px;

    color:#6b7280;

    line-height:1.7;

}

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

.nn-contact-form .form-control{

    min-height:54px;

    border-radius:12px;

    border:1px solid #d1d5db;

    padding:14px 18px;

    font-size:1rem;

    transition:all .30s ease;

}

.nn-contact-form textarea.form-control{

    min-height:150px;

    resize:vertical;

}

.nn-contact-form .form-control:focus{

    border-color:var(--nn-primary);

    box-shadow:0 0 0 .2rem rgba(22,163,74,.15);

}

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

.nn-form-note{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:22px 0 28px;

    padding:14px 16px;

    border-radius:10px;

    background:#f0fdf4;

    border-left:4px solid var(--nn-primary);

}

.nn-form-note i{

    color:var(--nn-primary);

    font-size:1rem;

    margin-top:2px;

}

.nn-form-note span{

    font-size:.92rem;

    line-height:1.6;

    color:#4b5563;

}

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

.nn-submit-btn{

    width:100%;

    min-height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    font-size:1rem;

    font-weight:600;

    border:none;

    border-radius:12px;

    transition:all .30s ease;

}

.nn-submit-btn:hover{

    transform:translateY(-2px);

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

}

.nn-submit-btn:disabled{

    opacity:.75;

    cursor:not-allowed;

}

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

.nn-form-result{

    display:none;

    margin-top:20px;

    padding:16px 18px;

    border-radius:12px;

    font-size:.95rem;

    line-height:1.7;

}

.nn-form-result.success{

    display:block;

    color:#166534;

    background:#dcfce7;

    border:1px solid #86efac;

}

.nn-form-result.error{

    display:block;

    color:#991b1b;

    background:#fee2e2;

    border:1px solid #fca5a5;

}

/* ==========================================================
   QUICK CONTACT
========================================================== */

.nn-quick-contact{

    margin-top:36px;

    padding-top:28px;

    border-top:1px solid #e5e7eb;

}

.nn-quick-contact-title{

    margin-bottom:18px;

    text-align:center;

    font-weight:600;

    color:var(--nn-dark);

}

.nn-quick-contact-buttons{

    display:flex;

    gap:16px;

}

.nn-contact-btn{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:50px;

    padding:12px 18px;

    color:var(--nn-primary);

    background:#ffffff;

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

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    transition:all .30s ease;

}

.nn-contact-btn:hover{

    color:#ffffff;

    background:var(--nn-primary);

    transform:translateY(-2px);

}

.nn-contact-btn i{

    font-size:1.05rem;

}

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

@media (max-width:991.98px){

    #cta{

        padding:80px 0;

    }

    .nn-cta-card{

        padding:32px 28px;

    }

}

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

@media (max-width:767.98px){

    #cta{

        padding:70px 0;

    }

    .nn-cta-card{

        padding:24px;

    }

    .nn-cta-card h3{

        font-size:1.45rem;

    }

    .nn-quick-contact-buttons{

        flex-direction:column;

    }

    .nn-contact-btn{

        width:100%;

    }

}

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

@media (max-width:575.98px){

    .nn-cta-card{

        padding:20px 18px;

        border-radius:16px;

    }

    .nn-contact-form .form-control{

        min-height:50px;

        padding:12px 14px;

    }

    .nn-contact-form textarea.form-control{

        min-height:130px;

    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .nn-submit-btn,

    .nn-contact-btn,

    .nn-cta-card,

    .nn-contact-form .form-control{

        transition:none !important;

        animation:none !important;

        transform:none !important;

    }

}

/* ==========================================================
   SECTION 08 - FOOTER
========================================================== */

.nn-footer{

    background:#0f172a;

    color:#cbd5e1;

    padding:80px 0 0;

    position:relative;

    overflow:hidden;

}

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

.nn-footer-logo{

    display:inline-block;

    margin-bottom:24px;

}

.nn-footer-logo img{

    max-width:220px;

    height:auto;

}

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

.nn-footer-description{

    color:#94a3b8;

    line-height:1.9;

    margin-bottom:30px;

    font-size:.98rem;

}

.nn-footer-description strong{

    color:#ffffff;

    font-weight:600;

}

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

.nn-footer-social{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.nn-footer-social a{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    color:#ffffff;

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

    transition:all .30s ease;

}

.nn-footer-social a:hover{

    background:var(--nn-primary);

    color:#ffffff;

    transform:translateY(-4px);

}

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

.nn-footer-title{

    color:#ffffff;

    font-size:1.20rem;

    font-weight:700;

    margin-bottom:28px;

}

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

.nn-footer-divider{

    margin:60px 0 30px;

    border:0;

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

}

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

.nn-footer-bottom{

    padding:0 0 30px;

}

.nn-footer-copyright{

    margin:0;

    color:#94a3b8;

    font-size:.95rem;

    line-height:1.7;

}

.nn-footer-copyright strong{

    color:#ffffff;

    font-weight:600;

}

/* ==========================================================
   FOOTER BOTTOM LINKS
========================================================== */

.nn-footer-bottom-links{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

}

.nn-footer-bottom-links li{

    margin:0;

}

.nn-footer-bottom-links a{

    color:#94a3b8;

    text-decoration:none;

    font-size:.95rem;

    transition:all .30s ease;

}

.nn-footer-bottom-links a:hover{

    color:#ffffff;

}

/* ==========================================================
   FOOTER – NEW STRUCTURE
=========================================================== */

.nn-footer {
    background: #f4f8f5;
    border-top: 1px solid #dce9df;
    padding-top: 60px;
    color: #173b2a;
}


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

.nn-footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: 50px;
    padding-bottom: 50px;
}


/* ==========================================================
   BRAND
=========================================================== */

.nn-footer-logo {
    display: inline-block;
    margin-bottom: 20px;
}

.nn-footer-logo img {
    width: 185px;
    height: auto;
    display: block;
}

.nn-footer-description {
    max-width: 390px;
    margin: 0 0 22px;
    color: #52665a;
    font-size: 0.95rem;
    line-height: 1.75;
}

.nn-footer-description strong {
    color: #285943;
}


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

.nn-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nn-footer-social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #d5e4d9;

    color: #285943;
    font-size: 1rem;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.nn-footer-social a:hover {
    background: #2e7d32;
    color: #ffffff;
    transform: translateY(-2px);
}


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

.nn-footer-title {
    position: relative;

    margin: 4px 0 20px;

    color: #173b2a;

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

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nn-footer-title::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin-top: 9px;

    background: #2e7d32;
    border-radius: 3px;
}


.nn-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nn-footer-links li {
    margin-bottom: 11px;
}

.nn-footer-links a {
    color: #52665a;
    text-decoration: none;

    font-size: 0.92rem;
    line-height: 1.5;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}

.nn-footer-links a:hover {
    color: #2e7d32;
    padding-left: 4px;
}


/* ==========================================================
   CONTACT BAR
=========================================================== */

.nn-footer-contact-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 25px 28px;

    background: #ffffff;

    border: 1px solid #dce9df;
    border-radius: 14px;

    box-shadow: 0 8px 25px rgba(23, 59, 42, 0.05);
}


.nn-footer-contact-content {
    flex: 1;
}

.nn-footer-contact-heading {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-bottom: 16px;
}

.nn-footer-contact-label {
    color: #2e7d32;

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

    letter-spacing: 0.08em;
}

.nn-footer-contact-heading strong {
    color: #173b2a;
    font-size: 1.05rem;
}


/* ==========================================================
   CONTACT ITEMS
=========================================================== */

.nn-footer-contact-items {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
}

.nn-footer-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #52665a;
    text-decoration: none;

    font-size: 0.88rem;
}

.nn-footer-contact-item i {
    color: #2e7d32;
    font-size: 0.95rem;
}

a.nn-footer-contact-item:hover {
    color: #2e7d32;
}


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

.nn-footer-cta {
    flex-shrink: 0;

    white-space: nowrap;

    padding: 12px 22px;

    border-radius: 30px;
}


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

.nn-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 40px;
    padding: 22px 0;

    border-top: 1px solid #dce9df;
}

.nn-footer-copyright {
    margin: 0;

    color: #718078;

    font-size: 0.82rem;
}

.nn-footer-copyright strong {
    color: #285943;
}


.nn-footer-bottom-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 22px;

    list-style: none;

    padding: 0;
    margin: 0;
}

.nn-footer-bottom-links a {
    color: #718078;
    text-decoration: none;

    font-size: 0.82rem;

    transition: color 0.2s ease;
}

.nn-footer-bottom-links a:hover {
    color: #2e7d32;
}


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

@media (max-width: 991.98px) {

    .nn-footer-main {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 40px;
    }

    .nn-footer-brand {
        grid-column: 1 / -1;
    }

    .nn-footer-description {
        max-width: 600px;
    }

    .nn-footer-contact-bar {
        align-items: flex-start;
    }

}


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

@media (max-width: 767.98px) {

    .nn-footer {
        padding-top: 45px;
    }

    .nn-footer-main {
        grid-template-columns: 1fr;
        gap: 32px;

        padding-bottom: 35px;
    }

    .nn-footer-brand {
        grid-column: auto;
    }

    .nn-footer-logo img {
        width: 165px;
    }

    .nn-footer-title {
        margin-bottom: 16px;
    }

    .nn-footer-contact-bar {
        flex-direction: column;
        gap: 22px;

        padding: 22px 20px;
    }

    .nn-footer-contact-items {
        flex-direction: column;
        gap: 12px;
    }

    .nn-footer-cta {
        width: 100%;
        text-align: center;
    }

    .nn-footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        margin-top: 30px;
    }

    .nn-footer-bottom-links {
        justify-content: flex-start;
        gap: 12px 18px;
    }

}