body,
html {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}

.main {
    /*the hero div */
    width: 100%;
    height: 50vw;
    position: relative;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.082) 60%, rgba(92, 84, 110, 0.7)), url("../images/main-pic.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 10vw 5vw;
}

.main h1 {
    font-weight: bold;
    font-size: 5vw;
    position: absolute;
    top: 30%;
    transform: translateY(-50%) !important
}

.hj {
    background: linear-gradient(45deg, rgb(241, 187, 7) 40%, black 30%);
    background-size: cover;
  }

.main p {
    width: 53vw;
    font-size: 1.4vw;
    position: absolute;
    top: 40% !important
}

/* the small orange box under the picture */
.after {
    width: 100%;
    height: 15px;
    background-color: #FF4301;
    margin-bottom: 10vw;
}

/* the flex container in which the trainers cards are housed */
.flex {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 30px
}

/* positioning the h1 in the div */
.flex h1 {
    position: absolute;
    top: 60%;
    transform: translateX(-50%);
    left: 50%;
    font-family: 'Montserrat', sans-serif;
    font-size: 3vw;
    font-weight: bold;
    transition: all 0.5s ease-in-out;
    color: white;
    z-index: 1
}

/* the trainer cards alignment */
.card {
    position: relative;
    width: 30%;
    margin-bottom: 40px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease-in-out;
}

.card:hover {
    transform: scale(1.02);
    transition: all 0.5s ease-in-out;
}

/* change the font-size and text color of the h1 in the trainer cards when hovered */
.card:hover h1 {
    color: #FF4301;
    font-size: 2.5vw;
    transition: all 0.5s ease-in-out
}

/* overlay over the image cards when hovered */
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 1px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.082) 60%, rgba(83, 98, 126, 0.747));
    transition: all 0.5s ease-in-out;
}

.card:hover .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 1px;
    background-color: #000;
    opacity: 0.6;
    z-index: 0;
    transition: all 0.5s ease-in-out;
}

/* hide the details on the trainer cards */
.hidden {
    visibility: hidden;
    transition: all 0.2s ease-in-out !important
}

/* display the details on the trainer cards when hovered */
.card:hover .hidden {
    visibility: visible;
    transition: all 0.5s ease-in-out;
    background-color: rgba(177, 22, 22, 0.945);
    z-index: 3 !important
}

.hidden p {
    position: absolute;
    bottom: 10%;
    font-size: 1vw;
    color: white !important
}

/* accurately position the icons in the trainer cards when hovered */
.icon {
    position: absolute;
    bottom: 20px;
    color: white;
    transform: translateX(-50%);
    left: 50%;
}

.icon i {
    color: #FF4301;
    font-size: 2vw
}

/* horinzonal line */
.horizontal {
    width: 15%;
    height: 1px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    background-color: #FF4301;
    margin-bottom: 10vw !important
}

.desktop__nav {
    height: 14.688rem !important;
}

/* full picture of the main div on landscape orientation for responsiveness */
@media only screen and (orientation:landscape) {
    .main {
        height: 50vw
    }
}

/* Responsiveness for mobile view */
@media only screen and (max-width:576px) {

    /* hero image responsive for small screen */
    .main {
        width: 100%;
        height: 60vw;
    }

    .main h1 {
        font-size: 4.7vw;
        top: 25%
    }

    .main p {
        width: 50vw;
        font-size: 1.5vw;
        letter-spacing: 0.5px;
        top: 30% !important
    }

    /* "OUR trainers text" */
    .train {
        font-size: 5vw
    }

    /* the trainers cards in stacked in columns on mobile */
    .flex {
        flex-direction: column
    }

    .flex h1 {
        font-size: 6vw
    }

    .flex .card {
        width: 100% !important;
    }

    .card:hover h1 {
        color: #FF4301;
        font-size: 5.5vw;
        transition: all 0.5s ease-in-out
    }

    /* smaller text on mobile */
    .hidden p {
        font-size: 3.2vw;
    }

    .icon i {
        color: #FF4301;
        font-size: 4vw
    }
}