@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* #region [BootStrap] */

.container-fluid {
    margin: auto;
    max-width: 100%;
}

.container {
    margin: auto;
    max-width: 86%;
}

/* #endregion */

/* #region [Color Pallet] */

:root {
    --blue: #283b76;
    --orange: #f1ac3e;
    --orangeM: 237, 173, 66;
    --steelGray: #aeb5cb;
    --white: #fff;
    --whiteSmoke: #f9f9f9;
    --textBlackM: #1f1f1f;
    --svgGrayM: #a4a4a4;
    --textGreyM: #5b5b5b;
}

/* #endregion */

/* #region [GENERAL] */
.navbar-area {
    background: VAR(--blue);
}

* {
    font-family: "Roboto", sans-serif;
}

body {
    margin: 112px auto auto auto;
    padding: 12px 0px;
    background-color: var(--white);
}

#Jobs-Section ul {
    list-style-type: disc;
    color: var(--textBlackM);
    margin-left: 20px;
}

ul li::marker {
    color: var(--textBlackM);
    padding-left: 28px;
}

#Offers-Section {
    margin-bottom: 20px;
}

.job-acc p {
    margin: 12px auto;
}

h2 {
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
}

h3 {
    margin: 0px;
    font-size: 18px;
    color: var(--blue);
    font-weight: 500;
}

.HeadLine {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    margin: 20px 0px;
}

.vCenter_M {
    display: flex;
    align-items: center;
}

#hr1 {
    color: var(--blue);
    border: 0;
    border-top: 4px solid;
    opacity: 1;
    width: 45px;
    margin-left: 0px;
    margin-top: 8px;
    z-index: 10;
}

#hr2 {
    color: var(--svgGrayM);
    border: 0;
    border-top: 1.8px solid;
    opacity: 0.3;
    margin-top: -16px;
}

/* #endregion */

/* ************************************************************************************************************* */
/* ************************************************************************************************************* */
/* ************************************************************************************************************* */
/* ************************************************************************************************************* */

/* #region [Jobs-Section] */
.jobOpenings {
    display: grid;
    grid-auto-columns: 1fr 1fr 1fr;
    gap: 12px 0px;
    grid-auto-flow: row;
}

/* #region [acc-header] */
.acc-header {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    grid-template-rows: 1fr;
    gap: 0px 12px;
    grid-auto-flow: row;
    grid-template-areas: "nO jobTitle jobLocation chevron";
    align-items: center;
    background-color: var(--blue);
    color: var(--whiteSmoke);
    padding: 12px 16px;
    border-radius: 6px;
    cursor: pointer;
}

    .acc-header.active .chevron {
        transition: transform 0.5s ease-in-out;
        transform: rotate(-180deg);
    }

    .acc-header .chevron {
        transition: transform 0.5s ease-in-out;
    }

.nO {
    grid-area: nO;
}

.jobTitle {
    grid-area: jobTitle;
}

.jobLocation {
    grid-area: jobLocation;
}

.jobLocation {
    justify-content: flex-end;
    margin-right: 32px;
}

.chevron {
    grid-area: chevron;
}

.acc-header svg path {
    fill: var(--whiteSmoke);
}

.acc-header.active svg path {
    fill: var(--white);
}

/* HOVER */
.acc-header:hover,
.acc-header:hover svg path {
    color: var(--orange);
    fill: var(--orange);
}

/* #endregion */

/* #region [acc-body] */
.acc-body {
    display: none;
    grid-template-columns: 1fr;
    /*grid-template-rows: auto 1fr 1fr 1fr auto;*/
    grid-auto-columns: 1fr;
    gap: 32px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "jobInfoHeader"
        "jobDesc"
        "jobReq"
        "jobReqSkills"
        "jobFooter";
    padding: 24px 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    color: var(--textBlackM);
}

    .acc-body.active {
        display: grid;
        max-height: 100%;
    }

    .acc-body .jobInfoHeader {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 2px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "jobTitle jobTitle"
            "jobLocation jobType"
            "applyBefore applyBefore";
        grid-area: jobInfoHeader;
        align-items: center;
        color: var(--textGreyM);
        fill: var(--svgGrayM);
        stroke: var(--svgGrayM);
    }

        .acc-body .jobInfoHeader * {
            font-weight: 500;
        }

    .acc-body .jobTitle {
        grid-area: jobTitle;
    }

    .acc-body .jobTitle {
        color: var(--blue);
        font-size: 18px;
    }

.jobLocation {
    grid-area: jobLocation;
}

.jobType {
    grid-area: jobType;
}

.applyBefore {
    grid-area: applyBefore;
}

.jobFooter {
    grid-area: jobFooter;
}

.jobDesc {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "jobDesc-head"
        "jobDesc-body";
    grid-area: jobDesc;
}

.jobDesc-head {
    grid-area: jobDesc-head;
}

.jobDesc-body {
    grid-area: jobDesc-body;
}

.jobReqSkills {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "jobReqSkills-head"
        "jobReqSkills-body";
    grid-area: jobReqSkills;
}

.jobReqSkills-head {
    grid-area: jobReqSkills-head;
}

.jobReqSkills-body {
    grid-area: jobReqSkills-body;
}

.jobReq {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "jobReq-head"
        "jobReq-body";
    grid-area: jobReq;
}

.jobReq-head {
    grid-area: jobReq-head;
}

.jobReq-body {
    grid-area: jobReq-body;
}

/* #region [applyNow] */
.applyNow:hover p {
    color: var(--orange) !important;
    transition: color 0.2s ease-in-out;
}

.applyNow p abbr {
    color: var(--orange);
}

.applyNow:hover p abbr {
    color: var(--blue);
    cursor: pointer;
}

/* #endregion */

/* #endregion */

/* #endregion */

/* #region [Offers-Section] */

.offers-container {
    display: grid;
    grid-template-columns: 1fr 35%;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "offers graphics";
    background-color: var(--blue);
    color: var(--whiteSmoke);
    padding: 6vw;
    border-radius: 6vw;
}

.offers {
    display: flex; /* Use flex container for horizontal flow */
    flex-direction: column;
    padding: 8px;
}

.offer {
    flex: 0 0 auto; /* Allow offer items to shrink if needed */
    padding: 4px;
}

.offer-head {
    font-weight: bold;
    margin-bottom: 8px;
}

.offer-body {
    font-size: 14px;
}

.offer-head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: "offerTitle offer-chevron";
    grid-area: offer-head;
    padding: 16px 4px;
    border-bottom: 1px solid var(--whiteSmoke);
    color: var(--whiteSmoke);
}

    .offer-head:hover {
        color: var(--orange);
    }

        .offer-head:hover svg path,
        .offer-head.active:hover svg path {
            fill: var(--orange);
        }

    .offer-head.active .chevron {
        transition: transform 0.5s ease-in-out;
        transform-origin: center;
        transform: rotate(180deg);
    }

.offerTitle {
    grid-area: offerTitle;
}

.offer-chevron {
    transform: rotate(270deg); /* Start with rightwards rotation */
    transition: transform 0.5s ease-in-out;
    transform-origin: center;
}

.offer-head.active .offer-chevron {
    transform: rotate(360deg); /* Point downwards when active */
}

.offer-chevron svg path {
    fill: var(--whiteSmoke);
}

.offer-head.active svg path {
    fill: var(--white);
}

.offer-body {
    grid-area: offer-body;
    display: none;
}

    .offer-body.active {
        display: grid;
        max-height: 100%;
    }

    .offer-body p {
        line-height: 1.5;
    }

.graphics {
    grid-area: graphics;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .graphics img {
        height: auto;
        max-width: 100%;
        object-fit: cover;
    }

/* #endregion */

/* #region [responsiveness] */

@media only screen and (max-width: 800px) {
    .offers-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 20px 0px;
        grid-template-areas:
            "offers"
            "graphics";
    }
}

@media only screen and (max-width: 460px) {
    h2 {
        font-size: 2.1rem;
    }
}

@media only screen and (max-width: 426px) {
    h2 {
        font-size: 1.9rem;
        text-align: center;
    }

    .acc-header {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 1fr;
        gap: 24px 16px;
        grid-template-areas:
            "nO jobTitle ."
            ". jobLocation chevron";
    }

    .acc-body .jobInfoHeader {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        gap: 8px 0px;
        grid-auto-flow: column;
        grid-template-areas:
            "jobTitle"
            "jobLocation"
            "jobType"
            "applyBefore";
    }

    .jobInfoHeader .jobLocation {
        justify-content: flex-start;
        margin-right: auto;
    }

    .jobLocation {
        margin-right: 16px;
    }
}

/* #endregion */