* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }

    a {
        text-decoration: none;
    }

    body {
        background: #496e83;
        color: #212529;
        scroll-behavior: smooth;
    }

    /*#region HEADER */
    .slideshow-header {
        position: relative;
        height: 950px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

    .slide-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        z-index: 0;
        transform: scale(1);
        /* Normal size */
        transition: opacity 1s ease, transform 1s ease;
    }

    .slide-bg.show {
        opacity: 1;
        z-index: 1;
    }

    .slide-texts {
        position: absolute;
        width: 100%;
        text-align: center;
        z-index: 2;
    }

    .slide-text {
        font-size: 3rem;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 1s ease, transform 1s ease;
        position: absolute;
        width: 100%;
    }

    .slide-text.show-text {
        opacity: 1;
        transform: translateY(0);
    }

    /*#endregion*/
    /*#region TOP BANNER */
    .top-banner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: transparent;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        padding: 0px 250px;
        font-weight: 500;
        font-size: 1rem;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        transition: background 0.3s ease;
    }

    .main-button {
        background-color: transparent;
        border: none;
        color: white;
        padding: 5px 32px;
        font-weight: 450;
        text-align: left;
        text-decoration: none;
        font-size: 40px;
        transition: background 0.3s ease;

        margin-right: auto;
    }

    /* Base button inside banner */
    .inquiry-button {
        background: transparent;
        border: 2px solid white;
        color: white;
        padding: 6px 25px;
        font-weight: 600;
        margin-left: 300px;
        margin-right: 55px;

        font-size: 22px;
        border-radius: 999px;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease;
    }

    .subbuttons {
        color: white;

        font-size: 17px;
        background: transparent;
        padding: 22px;
        transition: background 0.3s ease, color 0.3s ease;
        border: 2px solid transparent;

    }

    /* Banner scrolled or hovered — button gets teal bg + black text */
    .top-banner.scrolled .inquiry-button,
    .top-banner:hover .inquiry-button {
        border: 2px solid transparent;
        background: #38c9b3;
        color: black;
    }

    /* Button hover — white background + teal text */
    .top-banner.scrolled .inquiry-button:hover,
    .top-banner:hover .inquiry-button:hover {
        background: #cff3ee;
        color: #38c9b3;
    }

    .top-banner.scrolled {
        background-color: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);

    }

    .top-banner.scrolled .main-button {
        color: black;
    }

    .top-banner.scrolled .inquiry-button {
        color: black;
        background: #38c9b3;
    }

    .top-banner:hover {
        background-color: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);
    }

    .top-banner:hover .main-button {
        color: black;
    }

    .top-banner:hover .inquiry-button {

        color: black;
        background: #38c9b3;
    }

    .main-button:hover {
        cursor: pointer;
    }

    .top-banner.scrolled .subbuttons,
    .top-banner:hover .subbuttons {
        border: 1px solid #d8d8d86c;
        color: black;
    }

    .subbuttons:hover {
        background-color: white;
    }

    /*#endregion*/

    /* #region OUR PRODUCTS*/
    .our_products {
        height: 600px;
        background-size: cover;
        background-position: center;
        flex-direction: column;
        align-items: flex-start;
    }

    .our_products h1 {
        padding-top: 100px;
        padding-left: 50px;
        font-size: 60px;
        margin-bottom: 20px;
        color: #304653;
    }

    .our_products p {
        padding-left: 70px;
        padding-bottom: 25px;
        font-size: 35px;
        margin-bottom: 20px;
        color: #1e3746;
    }

    .our_products a {
        margin-left: 500px;
    }



    .learn_more {
        background-color: #1e3746;
        color: #ccc;
        padding: 15px 40px;
        margin: 0px 12px;
        font-weight: 600;
        font-size: 25px;
        cursor: pointer;
        text-decoration: none;
        border-radius: 999px;
        transition: background-color 0.3s ease;
    }

    .learn_more:hover {
        background-color: #2e9d8f;
    }

    /* #endregion */

    /* #region TRADING COUNTRIES*/
    .trading_countries_image {
        left: 0;
        width: 100%;
        height: 598px;
        background-repeat: no-repeat;
        background-position: top center;
        z-index: 999;
        pointer-events: none;
    }

    /* #endregion */

    /* #region INQUIRY BANNER IMAGE */
    .inquiry-banner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% auto;
        /* Stretch to fill */
        z-index: 999;
        transform: scale(1.1);
        /* Start slightly zoomed */
        transition: transform 1s ease;
        pointer-events: none;
    }

    /* Text animation */
    .inquiry-banner-text {
        font-size: 3rem;
        position: absolute;
        top: 20%;
        /* Moves the text down from the top of the screen */
        left: 50%;
        /* Starts at the horizontal center */
        transform: translate(-50%, 20px);
        /* Centers text horizontally & moves it down slightly for animation */
        color: white;
        transition: transform 1s ease;
        z-index: 1001;
        pointer-events: none;

        /* Prevents full-width centering issues, but optional */
    }


    .inquiry-banner-text.show-text {
        transform: translate(-50%, 0);
        /* keep horizontal center, only animate Y */
    }

    /*#endregion*/

    .blurred-box {
        position: absolute;
        backdrop-filter: blur(5px);
        width: 100%;
        height: 50px;
        z-index: 1010;
    }

    /* #region INQUIRY FILL OUT FORM */
    .inquiry-container {
        max-width: 900px;
        margin: auto;
        text-align: center;
        padding-top: 550px;
        padding-bottom: 100px;
        z-index: 1002;
        position: relative;
    }

    .inquiry_background {

        width: 100%;
        height: 100%;
        position: absolute;
        top: 210px;
        left: 0;
        background-repeat: repeat-x;
        z-index: 1;
        pointer-events: none;
    }


    .subtext {
        font-size: 14px;
        margin-bottom: 40px;
        color: #ffffff;
    }

    .inquiry-form {
        text-align: left;
    }

    .form-row {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 30px;
    }

    .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .form-group label {
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 8px;
    }

    .required {
        color: red;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        padding: 10px;
        border: none;
        border-bottom: 1px solid #f35463;
        font-size: 14px;
        outline: none;
        resize: none;
    }

    textarea {
        width: 100%;
    }

    .form-footer {
        text-align: center;
        margin-top: 30px;
    }

    .submit-btn {
        background-color: #f35463;
        color: white;
        padding: 12px 40px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        border-radius: 3px;
        transition: background 0.3s;
    }

    .submit-btn:hover {
        background-color: #e13d50;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        text-align: left;
    }

    /*#endregion*/
    /*#region OUR BRANDS*/

    .products_header {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 400px;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% auto;
        /* Stretch to fill */
        z-index: -1;
        pointer-events: none;
    }

    .products_header p {
        font-size: 3rem;
        position: absolute;
        top: 20%;
        /* Moves the text down from the top of the screen */
        left: 50%;
        /* Starts at the horizontal center */
        transform: translate(-50%, 20px);
        /* Centers text horizontally & moves it down slightly for animation */
        color: white;
        transition: transform 1s ease;
        z-index: 1001;
        pointer-events: none;

        /* Prevents full-width centering issues, but optional */
    }


    .products_header p.show-text {
        transform: translate(-50%, 0);
        /* keep horizontal center, only animate Y */
    }


    .productlistcontainer {
        background-color: white;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        /* 👈 now 7 columns */
        gap: 20px;
        padding: 20px;
    }

    .productelement {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background-size: cover;
        background-position: center;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }

    .productelement:hover {
        transform: scale(1.05);
    }

    .productelement_cover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: rgba(255, 255, 255, 0.534);
        backdrop-filter: blur(4px);
        border-radius: 12px;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .productelement:hover .productelement_cover {
        opacity: 1;
    }

    .productelement h1 {
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 15px;
        transform: none;
        color: transparent;
        font-size: 1.5rem;
        font-weight: bold;

        pointer-events: none;
        transition: color 0.3s ease;
    }

    .productelement:hover h1 {
        color: rgba(23, 19, 29, 0.822);
    }

    .productelement p {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 20px;
        transform: none;
        color: transparent;
        font-size: 1.25rem;
        font-weight: lighter;
        pointer-events: none;
        transition: color 0.3s ease;
    }

    .productelement:hover p {
        color: rgba(23, 19, 29, 0.822);
    }

    /*#endregion*/

    /*#region thankyou.html */

    .thankyou_background_picture {
        background-image: url('images/image_kbeautymalls_background.png');
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: repeat-x;
        background-size: cover;
        z-index: -1;
        /* Push it behind everything */
        pointer-events: none;
    }

    .thank-you-message {
        padding-top: 250px;
        padding-bottom: 600px;
        text-align: center;
        color: white;
        font-size: 1.5rem;
        z-index: 10;
        position: relative;
    }

    /*#endregion*/

    footer {
        margin-top: auto;
        background-color: #afafaf;
        text-align: center;
        padding: 30px;
        font-size: 0.9rem;
        color: #353434;
    }