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

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

body {
    margin: 0;
    background: #ffffff;
}


/* =========================================================
CAMPTON FONT
========================================================= */

@font-face {
    font-family: 'Campton';
    src: url('media/fonts/CamptonMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Campton';
    src: url('media/fonts/CamptonSemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}


/* =========================================================
SECTION 1 — HERO GIF
========================================================= */

.vgp-hero-gif-section {
    width: 100%;
    height: 70vh;
}

.vgp-hero-gif-wrapper {
    width: 100%;
    height: 100%;
}

.vgp-hero-gif-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
SECTION 2 — DUALCOAT
========================================================= */

.vgp-dualcoat-section {
    width: 100%;
    padding: 100px 20px;
    font-family: 'Campton', sans-serif;
}

.vgp-dualcoat-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.vgp-dualcoat-left {
    width: 50%;
}

.vgp-dualcoat-heading {
    font-size: 50px;
    font-weight: 600;
    color: #3D62AD;
    margin-bottom: 20px;
    line-height: 1.1;
}

.vgp-dualcoat-text {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    max-width: 420px;
    line-height: 1.6;
}

.vgp-dualcoat-right {
    width: 50%;
    display: flex;
    justify-content: center;
}

.vgp-dualcoat-image {
    width: 300px;
}


/* =========================================================
SECTION 3 — HONEYVISION FULL WIDTH IMAGE
========================================================= */

.vgp-honeyvision-section {
    width: 100%;
}

.vgp-honeyvision-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}


/* =========================================================
SECTION 4 — MARQUEE
========================================================= */

.vgp-marquee-section {

    width: 100%;

    background: linear-gradient(
        90deg,
        #2f4f8f 0%,
        #3d62ad 50%,
        #4e73c2 100%
    );

    overflow: hidden;
}

.vgp-marquee {

    display: flex;
    width: max-content;
    animation: vgp-marquee 25s linear infinite;
}

.vgp-marquee-content {

    font-family: 'Campton', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    white-space: nowrap;
    padding: 18px 0;
    padding-right: 50px;
}

@keyframes vgp-marquee {

    0% {
        transform: translateX(0);
    }

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


/* =========================================================
SECTION 5 — HONEYHIVE
========================================================= */

.vgp-honeyhive-section {

    background: #ffffff;
    padding: 100px 20px;
    font-family: 'Campton', sans-serif;
}

.vgp-honeyhive-container {

    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}


/* LEFT */

.vgp-honeyhive-left {
    width: 50%;
}

.vgp-honeyhive-heading {

    font-size: 32px;
    font-weight: 600;
    color: #3D62AD;
    margin-bottom: 20px;
}

.vgp-honeyhive-text {

    font-size: 16px;
    line-height: 1.7;
}


/* RIGHT IMAGE */

.vgp-honeyhive-right {

    width: 50%;
    text-align: center;
}

.vgp-honeyhive-main-image {

    width: 100%;
    max-width: 450px;
}


/* GALLERY */

.vgp-honeyhive-gallery {

    max-width: 1200px;
    margin: 50px auto 0;
    display: flex;
    gap: 25px;
}

.vgp-honeyhive-gallery img {

    flex: 1;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
    width: 100%;
}


/* =========================================================
SECTION 6 — DESIGN PRINCIPLE
========================================================= */

.vgp-design-section {

    padding: 30px 20px;
    font-family: 'Campton', sans-serif;
}

.vgp-design-container {

    max-width: 1200px;
    margin: auto;
}

.vgp-design-heading {

    font-size: 32px;
    color: #3D62AD;
    margin-bottom: 30px;
    font-weight: 600;
}

.vgp-design-text-row {

    display: flex;
    gap: 50px;
    margin-bottom: 40px;
}

.vgp-design-text {

    flex: 1;
    font-size: 16px;
    line-height: 1.7;
}

.vgp-design-image-wrapper {
    width: 100%;
}

.vgp-design-image {

    width: 100%;
    border-radius: 18px;
    display: block;
}


/* =========================================================
SECTION 7 — FUNCTION SECTION
========================================================= */

.vgp-function-section {
    padding: 20px 20px;
}

.vgp-function-container {

    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.vgp-function-left {
    width: 50%;
}

.vgp-function-image {

    width: 100%;
    border-radius: 16px;
    transition: opacity 0.3s ease;
}

.vgp-function-right {

    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.vgp-function-tab {

    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: #e5e5e5;
    border-radius: 10px;
    cursor: pointer;
    font-family: Campton, sans-serif;
    transition: all 0.3s ease;
}

.vgp-function-icon {

    width: 26px;
    height: 26px;
    min-width: 26px;
    object-fit: contain;
    display: block;
}

.vgp-function-tab.active {
    background: #f4c35a;
}

.vgp-function-tab span {

    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
}


/* =========================================================
SECTION 8 — LOOK SECTION
========================================================= */

.vgp-look-section {

    padding: 30px 20px;
    background: #ffffff;
    font-family: Campton, sans-serif;
}

.vgp-look-container {

    max-width: 1200px;
    margin: auto;
}

.vgp-look-heading {

    font-size: 30px;
    font-weight: 600;
    color: #3D62AD;
    margin-bottom: 40px;
}

.vgp-look-cards {

    display: flex;
    gap: 30px;
}

.vgp-look-card {
    flex: 1;
}

.vgp-look-card img {

    width: 100%;
    border-radius: 20px;
}


/* =========================================================
SECTION 9 — COMPARE TABLE
========================================================= */

.vgp-compare-section {

    padding: 30px 20px;
    background: #ffffff;
    font-family: Campton, sans-serif;
}

.vgp-compare-container {

    max-width: 1150px;
    margin: auto;
}

.vgp-compare-heading {

    font-size: 36px;
    color: #3D62AD;
    margin-bottom: 40px;
    text-align: left;
}

.vgp-compare-table-wrapper {

    border-radius: 16px;
    overflow: hidden;
    background: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.vgp-compare-table {

    width: 100%;
    border-collapse: collapse;
}

.vgp-compare-table thead th {

    background: #5A78A9;
    color: white;
    padding: 22px;
    font-size: 18px;
    text-align: left;
}

.vgp-compare-table thead th:not(:last-child) {

    border-right: 1px solid rgba(255,255,255,0.25);
}

.vgp-compare-table tbody td {

    padding: 22px;
    font-size: 16px;
}

.vgp-compare-table tbody tr:not(:last-child) td {

    border-bottom: 1px solid #e3e3e3;
}

.vgp-compare-table tbody td:not(:last-child) {

    border-right: 1px solid #e3e3e3;
}

.vgp-compare-table .yes {

    color: #16a34a;
    font-weight: 500;
}

.vgp-compare-table .no {

    color: #dc2626;
    font-weight: 500;
}


/* =========================================================
SECTION 10 — FAQ
========================================================= */

.vgp-faq-section {

    padding: 30px 20px;
    background: #ffffff;
    font-family: Campton, sans-serif;
}

.vgp-faq-container {

    max-width: 900px;
    margin: auto;
}

.vgp-faq-heading {

    font-size: 32px;
    color: #3D62AD;
    margin-bottom: 30px;
}

.vgp-faq-item {

    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}

.vgp-faq-question {

    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
}

.vgp-faq-icon {

    width: 18px;
    transition: transform 0.3s ease;
}

.vgp-faq-answer {

    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: #555;
    margin-top: 10px;
}

.vgp-faq-item.active .vgp-faq-answer {

    max-height: 200px;
}

.vgp-faq-item.active .vgp-faq-icon {

    transform: rotate(180deg);
}


/* =========================================================
SECTION 11 — FULL WIDTH IMAGE
========================================================= */

.vgp-fullimage-section {

    width: 100%;
    padding: 0;
    margin: 0;
}

.vgp-fullimage-img {

    width: 100%;
    height: auto;
    display: block;
}


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

@media (max-width: 768px) {

      .vgp-honeyhive-container {
        display: flex;
        flex-direction: column !important;
        gap: 30px;
    }

    .vgp-honeyhive-left,
    .vgp-honeyhive-right {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .vgp-honeyhive-gallery {
        flex-direction: column;
    }

    .vgp-honeyhive-gallery img {
        width: 100%;
    }


    .vgp-dualcoat-container {

        flex-direction: column;
        text-align: center;
    }

    .vgp-dualcoat-left,
    .vgp-dualcoat-right {

        width: 100%;
    }

    .vgp-dualcoat-heading {

        font-size: 32px;
    }

    .vgp-dualcoat-image {

        width: 220px;
        margin-top: 30px;
    }

    

    .vgp-function-container {

        flex-direction: column;
    }

    .vgp-function-left,
    .vgp-function-right {

        width: 100%;
    }


    .vgp-look-cards {

        flex-direction: column;
    }

}