/* =========================================================
   GENERAL
========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    color: #111;
    background: #fff;
}

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   PAGE BANNER
========================================================= */

.training-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.banner-image {
    display: block;
    width: 100%;
    height: 400px !IMPORTANT;
    object-fit: cover;
	object-position: center bottom;	
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.banner-title {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 67%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-width: 70%;
    background: rgba(38, 68, 120, 0.82);
    text-align: center;
    padding: 5px 15px;
}

.banner-title h1 {
    margin: 0;

    color: #fff;

    font-size: 40px;
    line-height: 1.2;

    font-weight: 700;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.training-intro {
    background: #fff;
    padding: 55px 0 10px;
}

.training-man {
    width: 470px;
    max-width: 90%;

    display: block;
    margin: 0 auto;

    object-fit: contain;
}

.intro-content {
    padding: 0 35px 0 15px;
}

.intro-content h2 {
    margin: 0 0 15px;
    text-align: center;
    color: #000b3d;
    font-size: 42px;
    line-height: 1.05;
    font-weight: 500;
}

.intro-content p {
    margin-bottom: 16px;

    font-size: 16px;
    line-height: 1.65;

    color: #222;
}


/* =========================================================
   CARDS SECTION
========================================================= */

.training-cards-section {
    position: relative;

    background: #f1f1f1;

    padding: 25px 0 0;

    overflow: hidden;
}

.training-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    padding: 0 10px 15px;
}


/* =========================================================
   TRAINING CARDS
========================================================= */

.training-card {
    position: relative;

    min-height: 245px;

    padding: 17px 12px;

    border-radius: 4px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.28);

    z-index: 2;
}

.training-card h3 {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
}

.training-card p {
    margin: 0;

    font-size: 15px;
    line-height: 1.55;

    color: #111;
}


/* =========================================================
   CARD COLORS
========================================================= */

.card-yellow {
    background: #f9dc9a;
}

.card-blue {
    background: #82afea;
}

.card-green {
    background: #c5efc9;
}

.card-light-blue {
    background: #d2ddf0;
}

.card-cyan {
    background: #62d6d8;

    grid-column: 1 / 2;
/*
    margin-left: 25%; */
}


/* =========================================================
   PLACEMENT PERSON
========================================================= */

.placement-image-column {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.placement-man {
    position: absolute;
    bottom: 0;
    left: 60%;
    transform: translateX(-60%);
    width: 400px;
    max-width: none;

    z-index: 5;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .banner-image {
        height: 330px;
    }

    .training-intro {
        padding-top: 65px;
    }

    .intro-content {
        padding-right: 80px;
    }

    .intro-content h2 {
        font-size: 40px;
    }

    .intro-content p {
        font-size: 16px;
    }

    .training-card {
        min-height: 250px;
    }

    .placement-man {
        width: 450px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .banner-image {
        height: 260px;
    }

    .banner-title {
        width: 430px;
        top: 65%;
    }

    .banner-title h1 {
        font-size: 32px;
    }


    /* INTRO */

    .training-intro {
        padding: 40px 0 20px;
    }

    .training-man {
        width: 400px;
    }

    .intro-content {
        padding: 0 15px;
    }

    .intro-content h2 {
        font-size: 34px;
    }

    .intro-content p {
        font-size: 15px;
        line-height: 1.6;
    }


    /* CARDS */

    .training-grid {
        grid-template-columns: 1fr 1fr;
    }

    .training-card {
        min-height: auto;
    }

    .training-card h3 {
        font-size: 19px;
    }

    .training-card p {
        font-size: 14px;
    }

    .card-cyan {
        margin-left: 20%;
    }


    /* PERSON */

    .placement-image-column {
        min-height: 580px;
    }

    .placement-man {
        width: 350px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    /* BANNER */

    .banner-image {
        height: 180px;
    }

    .banner-title {
        width: 90%;
        max-width: 90%;

        top: 65%;

        padding: 6px 8px;
    }

    .banner-title h1 {
        font-size: 24px;
    }


    /* INTRO */

    .training-intro {
        padding: 35px 0 20px;
    }

    .training-man {
        width: 330px;
        max-width: 85%;

        margin-bottom: 25px;
    }

    .intro-content {
        padding: 0 15px;
    }

    .intro-content h2 {
        font-size: 30px;
        line-height: 1.1;

        margin-bottom: 20px;
    }

    .intro-content p {
        font-size: 15px;
        line-height: 1.65;

        text-align: left;
    }


    /* CARDS */

    .training-cards-section {
        padding-top: 15px;
    }

    .training-grid {
        display: block;

        padding: 0 10px;
    }

    .training-card {
        min-height: auto;

        margin: 0 0 12px !important;

        padding: 18px 15px;
    }

    .training-card h3 {
        font-size: 20px;
    }

    .training-card p {
        font-size: 14px;
        line-height: 1.6;
    }


    /* PLACEMENT IMAGE */

    .placement-image-column {
        min-height: 450px;

        margin-top: 10px;
    }

    .placement-man {
        position: relative;

        left: auto;
        bottom: auto;

        transform: none;

        width: 320px;
        max-width: 90%;

        display: block;

        margin: 0 auto;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .banner-image {
        height: 120px !IMPORTANT;
    }

    .banner-title {
        top: 80%;
		width: 500px;
	    max-width: 60%;
    	background: rgba(38, 68, 120, 0.82);
	    text-align: center;
    	padding: 5px 15px;
    }

    .banner-title h1 {
        font-size: 20px;
    }

    .training-intro {
        padding-top: 25px;
    }

    .training-man {
        max-width: 80%;
    }

    .intro-content h2 {
        font-size: 40px;
    }

    .intro-content p {
        font-size: 16px !IMPORTANT;
    }

    .training-card {
        padding: 15px;
    }

    .training-card h3 {
        font-size: 19px;
    }

    .training-card p {
        font-size: 16px;
    }

    .placement-image-column {
        min-height: 400px;
    }

    .placement-man {
        width: 290px;
    }
}