/* =========================/* ========================================================= */
/* NTK WEBSITE - BASE CSS                                   */
/* ========================================================= */


/* ========================================================= */
/* GOOGLE FONT                                              */
/* ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');



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

:root {

    --primary: #003E7E;
    --hover: #0055AA;
    --background: #F7F9FC;
    --text: #1F2937;
    --border: #E5E7EB;
    --white: #ffffff;
    --shadow:0 15px 40px rgba(0,0,0,.08);
    --radius-btn:12px;
    --radius-card:20px;
    --radius-img:24px;
    --section-space:80px;

}

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


*,
*::before,
*::after {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:
    "Be Vietnam Pro",
    sans-serif;
    color:var(--text);
    background:
    var(--white);
    line-height:1.7;
    overflow-x:hidden;

}

img {

    max-width:100%;
    display:block;

}

a {

    text-decoration:none;
    color:inherit;

}

ul {

    list-style:none;

}

button,
input,
textarea {

    font-family:inherit;

}

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


.container {
	
    width:100%;
    max-width:1200px;
    margin:auto;
    padding-left:20px;
    padding-right:20px;

}


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


.section {

    padding:
    var(--section-space) 0;

}



.section-title {

    font-size:40px;
    font-weight:700;
    line-height:1.25;
    color:
    var(--primary);
    margin-bottom:20px;

}

.section-desc {

    font-size:17px;
    color:#6B7280;
    max-width:700px;

}



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


.btn {


    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 28px;
    border-radius:
    var(--radius-btn);
    font-size:16px;
    font-weight:600;
    transition:.3s ease;
    cursor:pointer;


}


/* PRIMARY BUTTON */

.btn-primary{

    background:linear-gradient(135deg,#0F3D8C,#2E73E8);
    color:#fff;
    border:none;

}

.btn-primary:hover{

    background:#0b3274;
    border-color:#0b3274;

}



/* SECONDARY BUTTON */


.btn-outline {
	
    border:
    1px solid var(--primary);
    color:
    var(--primary);
    background:
    transparent;

}



.btn-outline:hover {


    background:
    var(--primary);
    color:
    var(--white);

}


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


.card {


    background:
    var(--white);
    border-radius:
    var(--radius-card);
    box-shadow:
    var(--shadow);
    overflow:hidden;
    transition:.35s ease;

}



.card:hover {

    transform:
    translateY(-8px);

}

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


.fade-up {

    opacity:0;
    transform:
    translateY(30px);
    animation:
    fadeUp .8s ease forwards;

}



@keyframes fadeUp {

from {

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

}


to {

        opacity:1;
        transform:
        translateY(0);

}

}

.zoom-image {

    overflow:hidden;

}

.zoom-image img {

    transition:
    .5s ease;

}

.zoom-image:hover img {

    transform:
    scale(1.08);

}

/* ========================================================= */
/* UTILITY                                                  */
/* ========================================================= */


.text-center {

    text-align:center;

}

.mt-20 {

    margin-top:20px;

}

.mt-40 {

    margin-top:40px;

}

/* ========================================================= */
/* TOP BAR                                                    */
/* ========================================================= */

.topbar{

    background:#0F3D91;
    color:#fff;
    font-size:14px;
    padding:8px 0;

}

.topbar-content{

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

}

.topbar-left,
.topbar-right{

    display:flex;
    align-items:center;

}

.topbar-left a,
.topbar-right a{

    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;

}
/* ========================================================= */
/* NTK WEBSITE - HEADER CSS                                 */
/* ========================================================= */
/* ========================================================= */
/* HEADER                                                    */
/* ========================================================= */

.header{

    width:100%;
    position:relative;
    z-index:999;
    background:var(--white);
    padding-top:20px;   /* 👈 thêm dòng này */
    transition:.35s ease;

}

.header.scrolled{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    box-shadow:0 10px 35px rgba(0,0,0,.10);
    animation:headerDown .35s ease;

}

@keyframes headerDown{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(0);
    }

}

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

.header-container{

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

}

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

.logo{

    flex-shrink:0;
    margin-right:45px;

}

.logo img{
    width:200px;
    height:auto;
}

}

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

nav{

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

}

.main-menu{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:35px;
    margin:0;
    padding:0;
    list-style:none;

}

.main-menu li{

    position:relative;

}

.main-menu li a{

    position:relative;
    display:block;
    font-size:16px;
    font-weight:600;
    color:#1F2937;
    white-space:nowrap;
    text-decoration:none;
    transition:.3s;

}

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

.main-menu li a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.3s;

}

.main-menu li a:hover{

    color:var(--primary);

}

.main-menu li a:hover::after{

    width:100%;

}

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

.dropdown-menu{

    position:absolute;
    top:100%;
    left:0;
    width:240px;
    margin-top:15px;
    background:var(--white);
    border-radius:14px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    padding:12px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:.3s ease;
    z-index:999;

}

.dropdown:hover .dropdown-menu{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

.dropdown-menu li{

    width:100%;

}

.dropdown-menu li a{

    display:block;
    padding:12px 20px;
    font-size:15px;
    font-weight:500;
    color:var(--text);
    transition:.25s ease;

}

.dropdown-menu li a:hover{

    background:var(--background);
    color:var(--primary);
    padding-left:26px;

}

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

.header .btn-primary{

    margin-left:45px;
    flex-shrink:0;

}

.header-btn {

    margin-left:30px;

}


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


.menu-toggle {

    display:none;
    width:42px;
    height:42px;
    border-radius:10px;
    background:
    var(--primary);
    align-items:center;
    justify-content:center;
    cursor:pointer;

}



.menu-toggle i {


    color:
    var(--white);
    font-size:20px;


}

/* ========================================================= */
/* MOBILE MENU ACTIVE                                      */
/* ========================================================= */

.mobile-menu {

    display:none;

}

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

.hero{
    padding:60px 0 80px;
    background:linear-gradient(180deg,#ffffff 0%,#F7F9FC 100%);
}

.hero-slider{
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--shadow);
    margin-bottom:50px;
}

.hero-slider img{
    width:100%;
    height:560px;
    object-fit:cover;
}

.hero-content{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.hero-subtitle{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(0,62,126,.08);
    color:var(--primary);
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.hero-title{
    font-size:52px;
    line-height:1.2;
    font-weight:800;
    color:var(--primary);
    margin-bottom:20px;
}

.hero-desc{
    max-width:760px;
    margin:0 auto;
    color:#6B7280;
    font-size:17px;
    line-height:1.8;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:35px;
}

.carousel-indicators{
    margin-bottom:20px;
}

.carousel-indicators button{
    width:12px;
    height:12px;
    border-radius:50%;
}

.carousel-control-prev,
.carousel-control-next{
    width:7%;
}

@media (max-width:992px){

    .hero-slider img{
        height:420px;
    }

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

}

@media (max-width:768px){

    .hero{
        padding:40px 0 60px;
    }

    .hero-slider{
        margin-bottom:35px;
    }

    .hero-slider img{
        height:250px;
    }

    .hero-title{
        font-size:30px;
    }

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

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

}

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

.quick-stats{
    margin:70px 0;
}

.quick-stats .row{
    background:#fff;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    padding:35px 20px;
}

.stats-item{
    text-align:center;
}

.stats-item h3{
    font-size:48px;
    color:var(--primary);
    margin-bottom:10px;
    font-weight:800;
}

.stats-item p{
    margin:0;
    color:#666;
}
/* ========================================================= */
/* HERO CONTENT                                             */
/* ========================================================= */

/* ========================================================= */
/* QUY TRÌNH LÀM VIỆC                                       */
/* ========================================================= */

.process {
    padding: 80px 0;
    background: #fff;
}

.process .section-title {
    margin-bottom: 80px;
    text-align: center;
}

.process .section-title p {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary);
    margin: 0;
}

/* 6 BƯỚC NẰM NGANG */
.process-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 50px;
    width: 100%;
    max-width: 100%;
    text-align: center;
}

/* TỪNG BƯỚC */
.process-item {
    position: relative;
    padding: 0;
}

/* SỐ */
.process-item .step {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 12px;
}

/* TIÊU ĐỀ */
.process-item h3 {
    font-size: 25px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px;
    line-height: 1.3;
}

/* MÔ TẢ */
.process-item p {
    font-size: 16px;
    color: #6B7280;
    margin: 0;
    line-height: 1.7;
}

/* ========================================================= */
/* KHÁCH HÀNG TIÊU BIỂU                                      */
/* ========================================================= */

.clients {
    padding: 80px 0;
    background: #fff;
    overflow: hidden;
}

/* TIÊU ĐỀ */
.clients-title {
    text-align: center;
    margin-bottom: 15px;
}

.clients-title h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 5px;
}

.clients-title p {
    font-size: 30px;
    font-weight: 500;
    color: var(--primary);
    margin: 0;
}

/* MÔ TẢ */
.clients-desc {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--primary);
    margin: 0 auto 60px;
    max-width: 1100px;
}

/* ========================================================= */
/* LOGO CHẠY NGANG                                           */
/* ========================================================= */

.clients-slider {
    width: 100%;
    overflow: hidden;
}

.clients-track {
    display: flex;
    align-items: center;
    gap: 70px;
    width: max-content;
    animation: clientsScroll 25s linear infinite;
}

/* TỪNG LOGO */
.client-logo {
    flex: 0 0 180px;
    width: 180px;
    height: 100px;

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

.client-logo img {
    display: block;
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ========================================================= */
/* ANIMATION LOGO CHẠY                                       */
/* ========================================================= */

@keyframes clientsScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
}

/* DI CHUỘT VÀO THÌ DỪNG */
.clients-slider:hover .clients-track {
    animation-play-state: paused;
}


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

@media (max-width: 992px) {

    .clients-title h2 {
        font-size: 34px;
    }

    .clients-title p {
        font-size: 25px;
    }

    .clients-desc {
        font-size: 24px;
    }

    .clients-track {
        gap: 50px;
    }

    .client-logo {
        flex-basis: 160px;
        width: 160px;
    }

}


@media (max-width: 768px) {

    .clients {
        padding: 60px 0;
    }

    .clients-title h2 {
        font-size: 28px;
    }

    .clients-title p {
        font-size: 21px;
    }

    .clients-desc {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .clients-track {
        gap: 35px;
        animation-duration: 20s;
    }

    .client-logo {
        flex-basis: 140px;
        width: 140px;
        height: 80px;
    }

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

@media (max-width: 992px) {

    .process-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 30px;
    }

}

@media (max-width: 768px) {

    .process {
        padding: 60px 0;
    }

    .process .section-title {
        margin-bottom: 40px;
    }

    .process .section-title p {
        font-size: 30px;
    }

    .process-list {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .process-item h3 {
        font-size: 22px;
    }

    .process-item p {
        font-size: 15px;
    }

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

@media (max-width: 768px) {

    .process {
        padding: 60px 0;
    }

    .process .section-title {
        margin-bottom: 35px;
    }

    .process .section-title p {
        font-size: 30px;
    }

    .process-list {
        gap: 25px;
    }

    .process-item {
        padding-left: 60px;
    }

    .process-item .step {
        width: 42px;
        height: 42px;
        font-size: 13px;
    }

    .process-item h3 {
        font-size: 20px;
    }

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

    .process-item:not(:last-child)::after {
        left: 20px;
        top: 42px;
        height: 25px;
    }

}
/* ========================================================= */
/* STATISTICS                                               */
/* ========================================================= */


.about-stats {


    display:grid;


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


    gap:20px;


    margin-top:50px;


}



.stat-item {


    background:
    var(--background);
    padding:25px 15px;
    text-align:center;
    border-radius:
    var(--radius-card);
    transition:.35s ease;


}



.stat-item:hover {


    transform:
    translateY(-8px);
    box-shadow:
    var(--shadow);


}



.stat-number {


    font-size:36px;
    font-weight:800;
    color:
    var(--primary);
    line-height:1;
    margin-bottom:10px;


}



.stat-text {


    font-size:14px;
    color:#6B7280;
    font-weight:500;


}



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


.about-image {

    animation:
    fadeUp .8s ease forwards;


}

.about-content {


    animation:
    fadeUp 1s ease forwards;


}

/*==========================
PRODUCT HOME
==========================*/

.product-home{
    padding:90px 0;
    background:#F7F9FC;
}

.product-home .container{
    max-width:1700px;
}

.product-home .section-title{
    text-align:center;
    margin-bottom:50px;
}

.product-grid{

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

}

.product-card{

    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    display:flex;
    flex-direction:column;

}

.product-card img{
    width:100%;
    height:320px;
    object-fit:contain;   /* hoặc cover nếu ảnh riêng từng sản phẩm */
    background:#fff;
    padding:10px;
    display:block;
}

.product-info{
    padding:28px;
}

.product-info h3{
    font-size:30px;
    margin-bottom:12px;
}

.product-info p{
    font-size:18px;
    line-height:1.6;
}

.product-info .btn{

    width:100%;

}

/* Tablet */

@media (max-width:991px){

.product-grid{

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

}

}

/* Mobile */

@media (max-width:767px){

.product-grid{

grid-template-columns:1fr;

}

}
/* ========================================================= */
/* 6. CAPABILITY                                            */
/* ========================================================= */


.capability {

    padding:var(--section-space) 0;

    background:
    var(--white);

}



.capability-header {

    text-align:center;

    max-width:750px;

    margin:
    0 auto 50px;

}



.capability-title {

    font-size:40px;

    font-weight:800;

    color:
    var(--primary);

    margin-bottom:15px;

}



.capability-desc {

    font-size:17px;

    color:#6B7280;

}



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


.capability-list {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}



/* ========================================================= */
/* CAPABILITY ITEM                                          */
/* ========================================================= */


.capability-item {


    background:
    var(--background);


    border-radius:
    var(--radius-card);


    overflow:hidden;


    transition:.35s ease;


}



.capability-item:hover {


    transform:
    translateY(-8px);


    box-shadow:
    var(--shadow);


}



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


/* 🖼️ THAY ẢNH */


.capability-image {


    height:240px;


    overflow:hidden;


}



.capability-image img {


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s ease;


}



.capability-item:hover .capability-image img {


    transform:
    scale(1.08);


}



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


.capability-content {


    padding:25px 20px;


    text-align:center;


}



.capability-icon {


    width:55px;


    height:55px;


    margin:
    -55px auto 15px;


    position:relative;


    display:flex;


    align-items:center;


    justify-content:center;


    background:
    var(--primary);


    color:
    var(--white);


    border-radius:50%;


    font-size:22px;


}



.capability-name {


    font-size:20px;


    font-weight:700;


    color:
    var(--primary);


    margin-bottom:10px;


}



.capability-text {


    font-size:15px;


    color:#6B7280;


}
/* ========================================================= */
/* 7. NEWS                                                   */
/* ========================================================= */


.news {

    padding:
    var(--section-space) 0;

    background:
    var(--background);

}



.news-header {

    text-align:center;

    max-width:750px;

    margin:
    0 auto 50px;

}



.news-title {

    font-size:40px;

    font-weight:800;

    color:
    var(--primary);

    margin-bottom:15px;

}



.news-desc {

    color:#6B7280;

    font-size:17px;

}



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


.news-list {


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:30px;


}



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


.news-item {


    background:
    var(--white);


    border-radius:
    var(--radius-card);


    overflow:hidden;


    transition:.35s ease;


}



.news-item:hover {


    transform:
    translateY(-8px);


    box-shadow:
    var(--shadow);


}



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


/* 🖼️ THAY ẢNH */


.news-image {


    height:260px;


    overflow:hidden;


}



.news-image img {


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s ease;


}



.news-item:hover .news-image img {


    transform:
    scale(1.08);


}



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


.news-content {


    padding:25px;


}



.news-date {


    font-size:14px;


    color:
    var(--primary);


    font-weight:600;


    margin-bottom:12px;


}



.news-name {


    font-size:20px;


    line-height:1.4;


    font-weight:700;


    color:
    var(--text);


    margin-bottom:15px;


    transition:.3s ease;


}



.news-item:hover .news-name {


    color:
    var(--primary);


}



.news-text {


    font-size:15px;


    color:#6B7280;


    margin-bottom:20px;


}



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


.news-link {


    display:inline-flex;


    align-items:center;


    gap:8px;


    color:
    var(--primary);


    font-weight:600;


}



.news-link i {


    transition:.3s ease;


}



.news-link:hover i {


    transform:
    translateX(8px);


}
/* ========================================================= */
/* 8. FOOTER                                                */
/* ========================================================= */


.footer {


    background:
    #002B59;


    color:
    rgba(255,255,255,.8);


    padding:
    70px 0 0;


}



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


.footer-grid {


    display:grid;


    grid-template-columns:


    1.5fr 1fr 1fr 1fr;


    gap:40px;


    padding-bottom:50px;


}



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


/* 🏢 THAY LOGO */


.footer-logo img {


    width:160px;


    margin-bottom:20px;


}



.footer-desc {


    font-size:15px;


    line-height:1.8;


    color:
    rgba(255,255,255,.7);


}



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


.footer-title {


    color:
    var(--white);


    font-size:18px;


    font-weight:700;


    margin-bottom:20px;


}



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


.footer-menu {


    display:flex;


    flex-direction:column;


    gap:12px;


}



.footer-menu a {


    color:
    rgba(255,255,255,.75);


    font-size:15px;


    transition:.3s ease;


}



.footer-menu a:hover {


    color:
    var(--white);


    padding-left:8px;


}



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


.footer-contact {


    display:flex;


    flex-direction:column;


    gap:15px;


}



.footer-contact-item {


    display:flex;


    align-items:flex-start;


    gap:12px;


    font-size:15px;


}



.footer-contact-item i {


    color:
    #5FA8FF;


    margin-top:5px;


}



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


.footer-social {


    display:flex;


    gap:12px;


    margin-top:20px;


}



.footer-social a {


    width:40px;


    height:40px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


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


    color:
    var(--white);


    transition:.3s ease;


}



.footer-social a:hover {


    background:
    var(--white);


    color:
    var(--primary);


}



/* ========================================================= */
/* COPYRIGHT                                                */
/* ========================================================= */


.footer-bottom {


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


    padding:
    20px 0;


    text-align:center;


    font-size:14px;


    color:
    rgba(255,255,255,.6);


}
/* ========================================================= */
/* 9. RESPONSIVE                                            */
/* ========================================================= */


/* ========================================================= */
/* TABLET                                                  */
/* 992px                                                    */
/* ========================================================= */


@media(max-width:992px){


    .container{

        padding-left:25px;

        padding-right:25px;

    }



    /* HEADER */


    .main-menu{

        gap:20px;

    }


    .main-menu > li > a{

        font-size:14px;

    }



    /* HERO */


    .hero-container{


        grid-template-columns:1fr;


        gap:40px;


    }



    .hero-content{


        max-width:100%;


        text-align:center;


    }



    .hero-buttons{


        justify-content:center;


    }



    .hero-features{


        justify-content:center;


    }



    .hero-images{


        height:450px;


    }



    /* ABOUT */


    .about-container{


        grid-template-columns:1fr;


        gap:40px;


    }



    .about-content{


        max-width:100%;


    }



    .about-image img{


        height:450px;


    }



    /* PRODUCT */


    .product-list{


        grid-template-columns:


        repeat(2,1fr);


    }



    /* CAPABILITY */


    .capability-list{


        grid-template-columns:


        repeat(2,1fr);


    }



    /* NEWS */


    .news-list{


        grid-template-columns:


        repeat(2,1fr);


    }



    /* FOOTER */


    .footer-grid{


        grid-template-columns:


        repeat(2,1fr);


    }


}




/* ========================================================= */
/* MOBILE                                                   */
/* 768px                                                     */
/* ========================================================= */


@media(max-width:768px){


    .section{

        padding:60px 0;

    }



    /* HEADER */


    .header-container{


        height:75px;


    }



    .main-menu{


        display:none;


    }



    .header-btn{


        display:none;


    }



    .menu-toggle{


        display:flex;


    }



    .logo img{


        width:120px;


    }



    /* HERO */


    .hero{


        padding:70px 0;

    }



    .hero-title{


        font-size:36px;


    }



    .hero-desc{


        font-size:16px;


    }



    .hero-buttons{


        flex-direction:column;


    }



    .hero-buttons .btn{


        width:100%;


    }



    .hero-features{


        flex-direction:column;


        align-items:center;


    }



    .hero-images{


        height:350px;


    }



    .hero-image.main{


        width:230px;


        height:300px;


        right:40px;


    }



    .hero-image.item-1{


        width:150px;


        height:180px;


    }



    .hero-image.item-2{


        width:160px;


        height:200px;


    }



    .hero-image.item-3{


        width:130px;


        height:160px;


    }



    /* ABOUT */


    .about-title{


        font-size:32px;


    }



    .about-image img{


        height:350px;


    }



    .about-stats{


        grid-template-columns:1fr;


    }



    /* PRODUCT */


    .product-title{


        font-size:32px;


    }



    .product-list{


        grid-template-columns:1fr;


    }



    .product-image{


        height:260px;


    }



    /* CAPABILITY */


    .capability-title{


        font-size:32px;


    }



    .capability-list{


        grid-template-columns:1fr;


    }



    /* NEWS */


    .news-list{


        grid-template-columns:1fr;


    }



    .news-image{


        height:230px;


    }



    /* FOOTER */


    .footer{


        padding-top:50px;

    }



    .footer-grid{


        grid-template-columns:1fr;


        gap:35px;


    }


}