/* ---- Fonts ---- */

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_thin-webfont.woff) format(woff);
    src: url(fonts/gelion_thin-webfont.woff2) format(woff2);
    font-weight: 100;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_light-webfont.woff) format(woff);
    src: url(fonts/gelion_light-webfont.woff2) format(woff2);
    font-weight: 300;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_regular-webfont.woff) format(woff);
    src: url(fonts/gelion_regular-webfont.woff2) format(woff2);
    font-weight: 400;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_medium-webfont.woff) format(woff);
    src: url(fonts/gelion_medium-webfont.woff2) format(woff2);
    font-weight: 500;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_semibold-webfont.woff) format(woff);
    src: url(fonts/gelion_semibold-webfont.woff2) format(woff2);
    font-weight: 600;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_bold-webfont.woff) format(woff);
    src: url(fonts/gelion_bold-webfont.woff2) format(woff2);
    font-weight: 700;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_black-webfont.woff) format(woff);
    src: url(fonts/gelion_black-webfont.woff2) format(woff2);
    font-weight: 900;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-regular-webfont.woff) format(woff);
    src: url(fonts/poppins-regular-webfont.woff2) format(woff2);
    font-weight: 400;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-medium-webfont.woff) format(woff);
    src: url(fonts/poppins-medium-webfont.woff2) format(woff2);
    font-weight: 500;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-semibolditalic-webfont.woff) format(woff);
    src: url(fonts/poppins-semibolditalic-webfont.woff2) format(woff2);
    font-weight: 600;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-bold-webfont.woff) format(woff);
    src: url(fonts/poppins-bold-webfont.woff2) format(woff2);
    font-weight: 700;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-extrabold-webfont.woff) format(woff);
    src: url(fonts/poppins-extrabold-webfont.woff2) format(woff2);
    font-weight: 800;
}

/* ---- Fonts ---- */

/* ---- Pre-requisites ---- */

html {
    font-size: 62.5%;
    /*This changes the base rem size (i.e., 1rem = 16px) ;
    62.5% of 16px = 10px;
    Thus the new base rem size is 10px (i.e., now 1rem = 10px)*/
}

/* <==== Stylesheet ====> */

:root {

    /* <---- Colors ----> */
    --primary-color: #;
    --secondary-color: #442218;
    --white-color: #fff;
    --dark-color: #20221e;
    --footer: #58595b;
    --text: #58595b;
    --section-bg: #c7ddeb20;
    --bg1: #f4f5f9;
    --testimonial-bg: #EEECDF;
    --testimonial-box: #FDCC27;

    /* ---- CTA button ---- */
    --cta: #dd0000;

    /* ---- Nav Colors ---- */
    --nav-content: #231f20;
    --nav-hover: #f0551f;

    /* <---- Font size ----> */
    --font-small: 1.8rem;
    --font-medium: 2rem;
    --font-large: 2.4rem;
    --font-xlarge: 3.2rem;
    --font-xxlarge: 4.2rem;
    --font-title: 5rem;
    --font-button: 1.8rem;
    --hero-large: 5rem;
    --hero-medium: 4.4rem;
    --hero-small: 4rem;
    --hero-xsmall: 2.4rem;
    --hero-content: 2rem;

    /* <---- Fonts ----> */
    --font: 'Gelion', sans-serif;
    --secondary-font: 'Poppins', sans-serif;

    /* <---- Gap ----> */
    --marquee-gap: 1rem;
}


/* ---- CSS Main ---- */

/* <======== Hero Banner ========> */

.hero-banner {
    display: flex;
    width: 100%;
    height: 86.8rem;
    background-image: url(/assets/Services/hero-banner.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.hero-banner .container {
    display: block;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
}

.banner {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8rem 0;
    gap: 2rem;
}

.banner .title {
    font-size: var(--font-title);
    font-weight: 100;
}

.banner .subtitle {
    font-size: var(--font-xxlarge);
    font-weight: 500;
}

/* <======== Hero Banner close ========> */
/* <======== Pre-Opening Support ========> */

.preopening-support {
    display: flex;
    width: 100%;
}

.preopening-support .container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 4rem 20rem;
    width: 100%;
}

.preopening-support .title {
    font-size: var(--font-title);
    font-weight: 500;
    color: var(--secondary-color);
}

.cards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cards .row {
    display: flex;
    width: 100%;
    gap: 2rem;
}

.card.flipped .card-inner {
    transform: rotateY('180deg');
}

.card-front {
    display: flex;
    flex-wrap: wrap;
}

/* <======== Pre-Opening Support close ========> */

/* <======== Post-Opening Support ========> */

.postopening-support {
    display: flex;
    width: 100%;
}

.postopening-support .container {
    display: grid;
    grid-template-columns: minmax(3, 4fr);
    width: 100%;
    margin: 4rem 20rem;
}

.roadmap {
    background-image: url(/assets/Services/roadmap.webp);
    background-size: cover;
    background-position: center;
}

/* <======== Post-Opening Support close ========> */

/* <======== Customer Testimonial ========> */

.customer-testimonial {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4rem 20rem;
    background-color: var(--testimonial-bg);
}

.customer-testimonial .title {
    font-size: var(--font-title);
    font-weight: 500;
    color: var(--secondary-color);
}

.testimonials {
    width: 100%;
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.testimonials button {
    display: inline-block;
    border: none;
    padding: 0;
    margin: 0;
}

.testimonials button img {
    width: 40%;
    padding: 1rem;
    margin: 0;
    height: auto;
    cursor: pointer;
}

.testimonial-contents {
    width: 100%;
    gap: 2rem;
    display: flex;
    justify-content: space-around;
}

.slide {
    display: flex;
    width: 100%;
    background-image: url(/assets/Services/Testimonial-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 2rem 2rem 0 2rem;
    border-radius: 1.8rem;
}

.slide .contents {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 2rem;
    font-size: var(--font-small);
    color: var(--secondary-color);
}

.slide .contents .name {
    font-weight: 600;
}

.slide .image {
    object-fit: cover;
}

.slide .image img {
    width: 60%;
}

/* <======== Customer Testimonial close ========> */