/* ---- 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;
}

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

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

/* <======== Utilities ========> */

body {
    font-family: var(--font);
}

header {
    background-color: var(--white-color);
}

ul {
    list-style: none;
    font-size: var(--font-small);
}

a {
    text-decoration: none;
}

nav {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-left: 20rem;
}

.btn {
    font-size: var(--font-small);
    display: flex;
    justify-content: space-between;
    color: var(--nav-content);
}

/*nav buttons for tablet view and mobile view*/

button {
    padding: 1.2rem 2.4rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.2rem;
    border-color: var(--dark-color);
    background-color: transparent;
    font-family: 'Gelion', sans-serif;
    font-size: var(--font-button);
    cursor: pointer;
    object-fit: contain;
}

/*nav button for desktop view*/


footer {
    position: relative;
    display: flex;
    width: 100%;
    background-color: var(--footer);
}

/* <======== Utilities close ========> */


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


/* <======== Navbar ========> */

.container {
    display: flex;
    max-width: auto;
    width: 100%;
    padding: 1.6rem 1.6rem;
}

.logo {
    width: auto;
    max-height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.logo img {
    position: relative;
    width: 70%;
    max-width: 20rem;
    object-fit: contain;
}

nav ul {
    display: flex;
    width: 100%;
    margin: 0rem 2rem;
    justify-content: space-between;
    align-items: center;
}

nav .btn {
    display: none;
}

nav li {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

nav li a {
    color: var(--nav-content);
}

nav li a:hover {
    color: var(--nav-hover);
}

nav li a button {
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

nav li a img {
    position: relative;
    justify-content: center;
    width: 12%;
    max-width: 1.8rem;
    object-fit: cover;
}

nav button:hover {
    color: var(--white-color);
    background-color: var(--nav-hover);
    border: none;
    font-size: var(--font-small);
}

/* ---- Responsive navbar settings ---- */

/* ----//Mid-desktop Screen//---- */
@media (max-width: 1394px) {

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        flex-grow: 1;
        gap: 1rem;
        margin-right: 1rem;
    }

    nav ul li {
        margin: 0 0.5rem;
    }

    nav button {
        white-space: nowrap;
        /* Prevent text wrapping */
        padding: 0.8rem 1.6rem;
        /* Reduce padding */
        font-size: 1.4rem;
        /* Smaller font size */
        margin-left: 1rem;
        /* Add space between menu and button */
    }
}

/* ----//Tablet Screen//---- */

@media (max-width: 968px) {

    nav ul {
        display: none;
    }

    nav .btn {
        display: block;
    }
}

/* <======== Navbar close ========> */

/* <======== Slider ========> */

.slider {
    position: relative;
    display: flex;
    width: 100%;
}

.slides {
    display: flex;
    width: 100%;
    height: 64rem;
}

.slides .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
}

.slides .content .title {
    font-size: var(--font-xlarge);
    font-weight: 500;
}

.slide1 {
    width: 100%;
    display: flex;
    background-image: url(/assets/Careers/Slide1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

.slide2 {
    width: 100%;
    display: flex;
    background-image: url(/assets/Careers/Slide2.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

.slide2 button {
    width: 80%;
    justify-content: center;
    color: var(--white-color);
    border-color: var(--white-color);
}

.slide3 {
    width: 100%;
    display: flex;
    background-image: url(/assets/Careers/Slide3.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

/* <======== Slider close ========> */

/* <======== Introduction ========> */

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

.intro .container {
    display: flex;
    width: 100%;
    margin: 2rem 20rem;
    align-items: center;
    gap: 2rem;
}

.contents {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.contents .title {
    font-size: var(--font-title);
    font-weight: 500;
}

.contents .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: var(--font-medium);
    text-align: center;
}

.contents hr {
    width: 100%;
    background-color: var(--dark-color);
}

/* <======== Introduction close ========> */

/* <======== Current openings ========> */

.openings {
    display: flex;
    width: 100%;
}

.openings .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 20rem;
    align-items: center;
    gap: 2rem;
}

.openings .title {
    font-size: var(--font-title);
    font-weight: 500;
    margin-bottom: 2rem;
}

.positions {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
}

.job {
    display: flex;
    width: 100%;
    
}

.job .content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--dark-color);
    justify-content: center;
}

.content .job-title {
    width: 100%;
    font-size: var(--hero-medium);
    font-weight: 300;
}

.content .job-description {
    width: 100%;
    font-size: var(--font-medium);
}

.content .cta {
    width: 50%;
}

.job .image {
    width: 100%;
    object-position: center;
}

.job .image img {
    width: 80%;
    object-fit: contain;
    object-position: center;
}

.future-openings {
    width: 100%;
    background-color: var(--bg1);
}

/* <======== Current openings close ========> */