
:root{--blue:#082B72;--orange:#F28C1B;--light:#f7f8fb;}
body{font-family:Segoe UI,Arial,sans-serif}
p{
    font-size: 19px;
    line-height: 1.9;
    
}
.topbar{background:var(--blue);color:#fff;font-size:1rem}
.topbar a{color:#fff;margin-right:12px}
.navbar{background:rgba(8,43,114,.88);backdrop-filter:blur(8px)}
.navbar-brand{font-size:1.8rem;font-weight:800;color:#fff}
.navbar-brand span{color:var(--orange)}
.nav-link{color:#fff!important;font-weight:600;margin-left: 30px;}
.nav-link:hover,.nav-link.active{cursor: pointer;color:var(--orange)!important}
.carousel-item{height:92vh;min-height:700px;background-size:cover;background-position:center;position:relative}
.carousel-item::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,43,114,.82),rgba(8,43,114,.45))}
.slide1{background-image:url('https://images.unsplash.com/photo-1553413077-190dd305871c?q=80&w=1800&auto=format&fit=crop')}
.slide2{background-image:url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=1800&auto=format&fit=crop')}
.slide3{background-image:url('https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=1800&auto=format&fit=crop')}
.caption{position:absolute;left:10%;top:50%;transform:translateY(-50%);z-index:2;max-width:700px;color:#fff}
.caption .tag{color:var(--orange);font-weight:700;letter-spacing:2px;text-transform:uppercase}
.caption h1{font-size:4rem;font-weight:800;margin:15px 0}
.caption p{font-size:1.15rem;color:#eef3ff}
.btn-main{background:var(--orange);color:#fff;padding:.9rem 2rem}
.btn-outline-light{padding:.9rem 2rem}
.about{padding:90px 0;background:var(--light)}
.feature{background:#fff;padding:24px;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.08);height:100%;transition:.3s;margin-bottom: 15px;}
.feature:hover{transform:translateY(-6px)}
.feature i{font-size:2rem;color:var(--orange)}
footer{background:var(--blue);color:#fff;padding:35px 0}
@media(max-width:768px){
.carousel-item{min-height:560px}
.caption{left:6%;right:6%}
.caption h1{font-size:2.3rem}
}
.btn{background:var(--orange);color:#fff;border:none;padding:10px 20px;font-weight:600}
.why-choose{padding:90px 0;background:#f7f8fb}
.section-tag{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.section-title{color:var(--blue);font-weight:800;font-size:2.5rem}
.section-desc{max-width:720px;margin:auto;color:#667085}
.choose-card{background:#fff;padding:35px;border-radius:12px;display:flex;gap:20px;height:100%;box-shadow:0 10px 25px rgba(0,0,0,.08);transition:.35s;border-top:4px solid transparent}
.choose-card:hover{transform:translateY(-8px);border-color:var(--orange)}
.icon-box{width:70px;height:70px;border-radius:50%;background:rgba(242,140,27,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-box i{font-size:30px;color:var(--orange)}
.number{font-weight:700;color:var(--orange);margin-bottom:6px}


/*.products{padding:90px 0;background:#fff}*/
/*.products .tag{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:1px}*/
/*.products .title{color:var(--blue);font-size:2.7rem;font-weight:800}*/
/*.products .desc{max-width:760px;margin:auto;color:#667085}*/
/*.product-card{position:relative;background:var(--blue);border-radius:16px;padding:30px;height:330px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.12);transition:.35s}*/
/*.product-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.18)}*/
/*.product-card h4{color:#fff;font-weight:700;margin-bottom:14px}*/
/*.product-card p{color:#d9e4ff;font-size:.95rem;line-height:1.7;padding-right:110px;min-height:95px}*/

/*.product-card img{position:absolute;right:18px;bottom:18px;width:90px;max-height:90px;object-fit:contain;transition:.35s}*/
/*.product-card:hover img{transform:scale(1.08)}*/
/*.prod-no{position:absolute;left:25px;bottom:18px;font-size:2rem;font-weight:800;color:rgba(255,255,255,.18)}*/


.products {
    padding: 70px 0;
    background: #eef4f8;
}


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

.products .tag {
    color: var(--orange);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.products .title {
    color: var(--blue);
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.products .desc {
    max-width: 760px;
    margin: 0 auto 45px;
   
}


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

.product-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    min-height: 445px;
    box-shadow: 0 8px 25px rgba(32, 61, 89, 0.08);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(32, 61, 89, 0.14);
}


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

.product-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #e8edf1;
}

.product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.04);
}


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

.product-content {
    padding: 18px 18px 22px;
}

.product-content h4 {
    margin: 0 0 20px;
    color: #171717;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
}

.product-content p {
    margin: 0;
    color: #8b8b8b;
    font-size: 17px;
    line-height: 1.35;
}


/* =========================================
   OPTIONAL LEARN MORE
   Keep hidden for exact reference style
========================================= */

.product-link {
    display: none;
}


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

@media (max-width: 1199px) {

    .product-content h4 {
        font-size: 21px;
    }

    .product-content p {
        font-size: 16px;
    }

    .product-image {
        height: 210px;
    }

}


@media (max-width: 991px) {

    .products {
        padding: 60px 0;
    }

    .products .title {
        font-size: 2.3rem;
    }

    .product-card {
        min-height: 430px;
    }

    .product-image {
        height: 220px;
    }

}


@media (max-width: 767px) {

    .products .title {
        font-size: 2rem;
    }

    .products .desc {
        margin-bottom: 35px;
    }

    .product-card {
        min-height: auto;
    }

    .product-image {
        height: 230px;
    }

    .product-content h4 {
        font-size: 21px;
    }

}


@media (max-width: 575px) {

    .products {
        padding: 50px 0;
    }

    .products .title {
        font-size: 1.8rem;
    }

    .product-image {
        height: 220px;
    }

    .product-content {
        padding: 18px;
    }

    .product-content h4 {
        font-size: 20px;
    }

    .product-content p {
        font-size: 16px;
    }

}
.navbar a,
.navbar .menu-item,
.navbar .dropdown-toggle {
    caret-color: transparent;
    user-select: none;
}
.carousel-item
{
height:92svh;
min-height:700px;

}

img{max-width:100%;height:auto}


.footer-section{

    background:#111;
    color:#c7c7c7;
    padding:80px 0 30px;

}

.footer-logo{

    max-width:180px;

}

.footer-text{

    line-height:1.9;
    color:#bfbfbf;

}

.footer-section h4{

    color:#fff;
    margin-bottom:25px;
    font-weight:700;

}

.footer-section ul{

    list-style:none;
    padding:0;
    margin:0;

}

.footer-section ul li{

    margin-bottom:14px;

}

.footer-section ul li a{

    color:#bfbfbf;
    text-decoration:none;
    transition:.3s;

}

.footer-section ul li a:hover{

    color:#ff6a00;
    padding-left:6px;

}

.footer-social a{

    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ff6a00;
    color:#fff;
    border-radius:50%;
    margin-right:10px;
    text-decoration:none;
    transition:.3s;

}

.footer-social a:hover{

    background:#fff;
    color:#ff6a00;

}

.phone a{

    color:#ff6a00;
    font-weight:700;
    margin:25px 0;

}

.contact-title{

    color:#fff;
    font-weight:500;

}

.footer-section hr{

    border-color:#333;
    margin:45px 0 25px;

}

.copyright{

    text-align:center;
    color:#999;

}

@media(max-width:991px){

.footer-section{

text-align:center;

}

.footer-social{

justify-content:center;

}

}
@media (max-width:1199px){.caption h1{font-size:3.2rem!important}}
@media (max-width:991.98px){
.navbar-collapse{background:#082B72;padding:18px;border-radius:10px;margin-top:12px}
.caption{left:6%!important;right:6%!important;max-width:100%!important}
.caption h1{font-size:2.8rem!important;line-height:1.15}
.caption p{font-size:1.05rem!important}
.about,.why-choose,.products{padding:70px 0!important}
.product-card{height:auto!important;min-height:320px}
}
@media (max-width:767.98px){
.topbar .container{flex-direction:column;gap:8px;text-align:center}
.carousel-item{height:85svh;min-height:560px}
.caption h1{font-size:2.2rem!important}
.caption p{font-size:1rem!important}
.caption .btn{display:block;width:220px;margin-bottom:12px}
.section-title,.title{font-size:2rem!important}
.product-card{min-height:280px!important;padding:24px!important}
/*.product-card img{width:72px!important;max-height:72px!important;right:16px!important;bottom:16px!important}*/
/*.product-card p{padding-right:80px!important;min-height:auto!important}*/
.choose-card{flex-direction:column;text-align:center;align-items:center}
}
@media (max-width:575.98px){
.navbar-brand{font-size:1.4rem!important}
.caption h1{font-size:1.8rem!important}
.caption .tag{font-size:.8rem}
.about,.why-choose,.products{padding:55px 0!important}
footer{padding:45px 20px!important;text-align:center}
}





/* Premium About Intro */
.about-intro{
position:relative;
padding:100px 0;
background:#f8fbff;
overflow:hidden;
}
.about-intro:before{
content:"";
position:absolute;
inset:0;
background:url('images/bg-pattern.png') center/cover no-repeat;
opacity:.15;
}
.about-intro:after{
content:"";
position:absolute;
inset:0;
background:rgba(255,255,255,.82);
}
.about-intro .container{position:relative;z-index:2}
.about-intro p{
max-width:1200px;
margin:auto;
text-align:center;
font-size:22px;
line-height:1.8;
font-weight:600;
color:#2d4d7d;
}
@media(max-width:768px){
.about-intro{padding:70px 20px}
.about-intro p{font-size:17px}
}

/* Who We Are */
.who-we-are{padding:110px 0;background:#fff}
.section-subtitle{display:flex;align-items:center;gap:12px;color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:15px;margin-bottom:18px}
.section-subtitle span{display:block;width:45px;height:3px;background:var(--orange)}
.who-we-are h2{font-size:58px;font-weight:800;color:var(--blue);line-height:1.1;margin-bottom:25px}
.title-line{width:110px;height:5px;background:var(--orange);border-radius:30px;margin-bottom:30px}
.who-we-are p{font-size:20px;line-height:1.9;color:#667085}
.about-image{border-radius:28px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.about-image img{width:100%;display:block}
@media(max-width:991px){.who-we-are{padding:80px 0}.who-we-are h2{font-size:42px}.who-we-are p{font-size:18px}}
@media(max-width:767px){.who-we-are h2{font-size:32px}.who-we-are p{font-size:16px}}


/* ===== Values Section ===== */
.values-section{padding:100px 0;background:#fff}
.value-box{padding:40px 30px;height:100%;border-right:1px solid #e9edf5;transition:.35s}
.value-box:last-child{border-right:none}
.value-box:hover{transform:translateY(-8px)}
.value-icon{width:90px;height:90px;border-radius:50%;background:rgba(242,140,27,.12);display:flex;align-items:center;justify-content:center;margin-bottom:25px}
.value-icon i{font-size:38px;color:var(--orange)}
.value-box h3{font-weight:800;color:var(--blue);font-size:2rem}
.value-box .line{width:60px;height:4px;background:var(--orange);border-radius:10px;margin:18px 0}
.value-box p{color:#667085;line-height:1.9;font-size:18px}
@media(max-width:991px){.value-box{border-right:none;border-bottom:1px solid #eee}}

/* ===== Contact Channels ===== */
.contact-channels{padding:100px 0;background:var(--light)}
.contact-wrap{background:#eef4ff;border-radius:26px;padding:45px}
.contact-card{background:#fff;border-radius:20px;padding:35px;height:100%;box-shadow:0 10px 25px rgba(8,43,114,.08)}
.contact-card.primary{background:var(--blue);color:#fff}
.contact-card i{font-size:34px;color:var(--orange)}
.contact-card.primary i,.contact-card.primary a{color:#fff}
.contact-card h3{font-weight:800;margin:18px 0}
.contact-card a{color:var(--orange);font-weight:700;text-decoration:none}

/* CTA Contact */
.cta-contact{padding:90px 0;background:#f5f8ff}
.cta-box{border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 15px 40px rgba(0,0,0,.08)}
.cta-left{position:relative;min-height:650px;background:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1200&auto=format&fit=crop') center/cover}
.cta-left:before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(8,43,114,.45),rgba(8,43,114,.65))}
.cta-content{position:absolute;z-index:2;color:#fff;padding:45px}
.cta-content h2{font-size:3rem;font-weight:800}
.cta-content h2 span{color:var(--orange)}
.badges{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(8,43,114,.88)}
.badges div{padding:22px 10px;color:#fff;text-align:center;border-right:1px solid rgba(255,255,255,.15)}
.badges i{font-size:28px;color:var(--orange);display:block;margin-bottom:8px}
.cta-form{padding:45px}
.cta-form h2{color:var(--blue);font-weight:800}
@media(max-width:991px){.cta-left{min-height:420px}.badges{grid-template-columns:repeat(2,1fr)}}

/* VNA PRODUCT PAGE STYLES */


.section{padding:90px 0}
.tag{color:#8b8b8b;font-weight:700; margin-bottom:10px}
.title{font-size:54px;font-weight:800;color:var(--blue);line-height:1.1;margin:12px 0 24px}
.desc{font-size:19px;line-height:1.9;color:#5d6675}
.btn-main{background:var(--orange);color:#fff;padding:14px 34px;border-radius:8px;text-decoration:none;font-weight:700;display: inline-block;}
.btn-main:hover{background:var(--blue);color:#fff}
.feature-card{background:#fff;border-radius:22px;box-shadow:0 18px 45px rgba(8,43,114,.12);overflow:hidden}
.feature-card img{width:100%;display:block}
.feature-content{padding:30px}
.feature-content h3{font-size:34px;font-weight:800;color:var(--blue)}
.feature-content li{list-style:none;padding:10px 0;font-size:18px}
.feature-content li i{color:var(--orange);margin-right:12px}
.bg-panel{background:#eef5ff;padding:70px 0}
.info-box{padding:25px}
.info-box h4{color:var(--blue);font-weight:800;margin:15px 0}
.info-box ul{padding-left:0}
.info-box li{list-style:none;padding:8px 0;color:#5d6675}
.info-box li i{color:var(--orange);margin-right:10px}
.app-card{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(8,43,114,.08);padding:25px;text-align:center;height:100%}
.app-card i{font-size:42px;color:var(--orange)}
.cta{background:linear-gradient(135deg,var(--blue),#0d4cb3);color:#fff;border-radius:24px;padding:60px}
.cta h2{font-weight:800}
@media(max-width:991px){.title{font-size:38px}}

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

.faq-section {
    padding: 80px 0;
    background: #fff;
}

.faq-section .container {
    max-width: 1200px;
}


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

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #f58220;
}

.section-tag i {
    font-size: 18px;
}


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

.section-title {
    margin: 0;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 800;
    color: #0b347d;
}

.section-title span {
    color: #0b347d;
}

.faq-intro {
    max-width: 570px;
    margin: 0 0 28px;

    font-size: 17px;
    line-height: 1.65;
    color: #5d6570;
}


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

.faq-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

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

    padding: 24px 26px;

    background: #fff;
    border-radius: 14px;

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

    border: 1px solid #f1f1f1;
}

.feature-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

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

    border-radius: 10px;

    background: #fff6ed;
    color: #f58220;

    font-size: 25px;
}

.feature-content h5 {
    margin: 0 0 7px;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;

    color: #172033;
}

.feature-content p {
    margin: 0;

    font-size: 15.5px;
    line-height: 1.55;

    color: #606975;
}


/* =========================
   FAQ ACCORDION
========================= */

.faq-accordion {
    width: 100%;

    border: 1px solid #dce2eb;
    border-radius: 10px;
    overflow: hidden;

    background: #fff;
}

.faq-accordion .accordion-item {
    border: 0;
    border-bottom: 1px solid #dce2eb;
}

.faq-accordion .accordion-item:last-child {
    border-bottom: 0;
}


/* QUESTION */

.faq-accordion .accordion-button {
    padding: 19px 24px;

    font-size: 17px;
    line-height: 1.4;
    font-weight: 500;

    color: #123f88;
    background: #fff;

    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: #0b347d;
    background: #dceaff;

    box-shadow: none;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
}


/* BODY */

.faq-accordion .accordion-body {
    padding: 20px 24px;

    font-size: 16px;
    line-height: 1.65;

    color: #202631;
    background: #fff;
}


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

@media (max-width: 991px) {

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

    .section-title {
        font-size: 40px;
    }

    .faq-intro {
        max-width: 100%;
    }

    .faq-accordion {
        margin-top: 10px;
    }
}


@media (max-width: 575px) {

    .faq-section {
        padding: 45px 0;
    }

    .section-title {
        font-size: 34px;
    }

    .section-tag {
        font-size: 13px;
    }

    .faq-intro {
        font-size: 15px;
    }

    .feature {
        padding: 20px;
        gap: 14px;
    }

    .feature-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 21px;
    }

    .feature-content h5 {
        font-size: 18px;
    }

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

    .faq-accordion .accordion-button {
        padding: 17px 18px;
        font-size: 15px;
    }

    .faq-accordion .accordion-body {
        padding: 17px 18px;
        font-size: 14px;
    }
}

/* =========================
   PAGE BANNER
========================= */

.page-banner {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url("https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* Dark Overlay */

.page-banner .overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(4, 28, 67, 0.88),
        rgba(4, 28, 67, 0.62),
        rgba(4, 28, 67, 0.75)
    );

    z-index: 1;
}


/* Banner Content */

.banner-content {
    position: relative;
    z-index: 2;

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

    padding: 60px 20px;

    text-align: center;
}


/* Heading */

.banner-content h1 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -0.5px;
}


/* Breadcrumb */

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin: 0;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.8px;

    color: rgba(255, 255, 255, 0.75);
}


/* Breadcrumb Link */

.breadcrumb a {
    color: #ffffff;
    text-decoration: none;

    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #f58220;
}


/* Arrow */

.breadcrumb span:nth-child(2) {
    color: #f58220;
    font-size: 12px;
}


/* Current Page */

.breadcrumb span:last-child {
    color: #f58220;
}


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

@media (max-width: 991px) {

    .page-banner {
        min-height: 300px;
    }

    .banner-content {
        padding: 50px 20px;
    }

    .banner-content h1 {
        font-size: 42px;
    }
}


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

@media (max-width: 575px) {

    .page-banner {
        min-height: 250px;
    }

    .banner-content {
        padding: 40px 15px;
    }

    .banner-content h1 {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .breadcrumb {
        gap: 8px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

.whatapp {
    right: 5px;
    bottom: 20px;
    z-index: 9;
    position: fixed;
  
}
.whatapp img{
      width: 70%;
      }
      
      
.image-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100%;
}

.image-row img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.image-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100%;
}

.image-row img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Mobile */
@media (max-width: 576px) {
    .image-row {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .image-row img {
        flex: 0 0 150px;
        width: 150px;
        height: 150px;
    }
}