/* VARIABLES */
:root {
    /* BRAND COLORS */
    /* Blue */
    --brandPrimary1: rgba(0, 78, 138, 1); 
        --brandPrimary1_Opacity: rgba(0, 78, 138, .9);
    /* Orange */
    --brandPrimary2: rgba(219, 107, 39, 1);
        --brandPrimary2_Opacity: rgba(219, 107, 39, .8);
    /* Red */
    --brandPrimary3: rgba(152, 1, 46, 1);
        --brandPrimary3_Opacity: rgba(152, 1, 46, .8);
    /* Green */
    --brandPrimary4: rgb(107, 140, 59);
        --brandPrimary4_Opacity: rgba(107, 140, 59, .8);
    /* Yellow */
    --brandPrimary5: #d8d2ca;
    /* Grey */
    --brandSecondary1: rgba(241, 243, 244, 1); 

    /* FONT COLORS */
    /* Dark */
    --brandTextDark: rgba(87, 100, 108, 1);
    /* Light */
    --brandTextWhite: rgba(255, 255, 255, 1);
}

/* UNIVERSAL */
* {
    font-family: 'Lato', sans-serif;
    font-size: clamp(18px, 1vw, 20px);
    font-style: normal;
}
html {
    scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.75rem;
}
    h1 {
        font-size: 2rem;
        font-weight: 700;
    }
    h2, h3 {
        font-size: 1.75rem;
    }

/* FONT COLORS */
.brandPrimary1 {
    color: var(--brandPrimary1);
}
.brandPrimary2 {
    color: var(--brandPrimary2);
}
.brandPrimary3 {
    color: var(--brandPrimary3);
}
.brandPrimary4 {
    color: var(--brandPrimary4);
}
/* BACKGROUND COLORS */
.brandPrimary1-bg {
    background-color: var(--brandPrimary1);
}
    .brandPrimary1_Opacity {
        background-color: var(--brandPrimary1_Opacity);
    }
.brandPrimary2-bg {
    background-color: var(--brandPrimary2);
}
.brandPrimary3-bg {
    background-color: var(--brandPrimary3);
}
.brandPrimary4-bg {
    background-color: var(--brandPrimary4);
}
/* HEADER */
header {
    padding: 5px 30px 30px;
    position: relative;
    z-index: 2;
}
    header img {
        height: 112px !important;
    }

/* HERO */
.hero {
    background-image: url('../images/atlanta-temp.jpg'); 
    background-size: cover;
    background-position: center;
    /* height: calc(100vh - 147px); */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 50px 0;
    text-align: center;
    position: relative;
}
    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
        z-index: 1; /* Ensure it appears above the background */
    }

    .hero > div > div {
        padding: 30px;
        position: relative;
        z-index: 2;
    }

/* FORM */
.GPIForm {
    margin: 0 0 0;
    font-size: 14px;
    width: 100%;
    outline: 0 !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    border-radius: 0;
}
    @media (min-width: 992px) {
        .hero-right {
            padding-left: 35px;
            text-align: left;
        }
    }
.GPIForm label {
    display: block;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    margin-top: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    font-size: clamp(13px, 1vw, 15px);
    letter-spacing: 0.010em;
    text-align: left;
    text-transform: uppercase;
}
.GPIForm .checkboxes label {
    display: inline-block;
    margin-bottom: 8px;    	
    margin-top: 5px;
    vertical-align: bottom;
}

.GPIForm label.required:after {
    content: "*";
    text-transform: lowercase;
    font-size: 0.8em;
    color: #000;
    font-style: italic;
    margin-left: 1px;
}
    .GPIForm label.required:after {
        content: "*";
        color: #ef6b51;
        margin-left: 1px;
        vertical-align: top;
    }
.GPIForm input.GPIField,
.GPIForm select.GPIField,
.GPIForm textarea.GPIField {
    border-radius: 0;
    color: #5e5250;
    font-weight: 300;
    font-size: 17px;
    letter-spacing: 0.010em;
    padding: 0 10px;
    box-shadow: 5px 5px 10px -5px #61514E inset;
    margin: 0 0 12px 0;
    padding: 5px 12px;
    display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    border: 1px solid #aba19b;
}

.GPIForm textarea.GPIField {
    min-height: 80px;
}
/* .GPIForm input[type="checkbox"] {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
} */

.GPIForm input.GPIField:focus, 
.GPIForm select.GPIField:focus {
    outline-color: var(--brandSecondary1);
}
/* .checkboxes {
    padding-top: 15px;
}
textarea {
    min-height: 115px;
} */

.GPIForm button {
    background-color: var(--brandPrimary2);
    margin-top: 5px;
    transition: all 0.35s ease-in-out;
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700;
    padding: 5px 15px;
}

@media (min-width: 992px) {
    .ty div.w50.fr {
        float: right;
    }
}
@media (min-width: 992px) {
    .ty div.w50 {
        display: inline-block;
        width: 48%;
    }
}

/* WHY JOIN */
.brand-line {
    margin: 25px 0 25px;
    width: 100%; /* Full-width line */
    height: 5px; /* Adjust the height as needed */
    background: linear-gradient(
      to right, 
      var(--brandPrimary2) 33.33%,     /* First color ends at 33.33% */
      var(--brandPrimary3) 33.33%,  /* Second color starts at 33.33% */
      var(--brandPrimary3) 66.66%,  /* Second color ends at 66.66% */
      var(--brandPrimary4) 66.66%     /* Third color starts at 66.66% */
    );
  }

  .brand-line2 {
    margin: 25px 0 25px;
    width: 100%; /* Full-width line */
    height: 5px; /* Adjust the height as needed */
    background: linear-gradient(
      to right, 
      var(--brandPrimary2) 33.33%,     /* First color ends at 33.33% */
      var(--brandPrimary1) 33.33%,  /* Second color starts at 33.33% */
      var(--brandPrimary1) 66.66%,  /* Second color ends at 66.66% */
      var(--brandPrimary4) 66.66%     /* Third color starts at 66.66% */
    );
  }

    .brand-line-brandPrimary1 {
        background: var(--brandPrimary1);
    }

  /* place to be */
  .placeToBe {
    color: var(--brandTextWhite);
  }

  /* VIDEO */
  .video-container {
    width: 100%;
    max-width: 800px;
    height: auto;
    position: relative;
    overflow: hidden;
  }
  .video-container video {
    position: relative;
    width: 100%;
    height: auto;
  }

/* FOOTER */
footer {
    background: var(--primary1);
}
    .footer-top {
        background-color: var(--brandSecondary1);
        padding: 30px;
    }

    .footer-bottom {
        background-color: var(--brandPrimary1);
        color: var(--brandTextWhite);
        padding: 30px;
    }
        .footer-bottom p, .footer-bottom address, .footer-bottom a {
            color: var(--brandTextWhite);
            display: inline;
        }


@media (min-width: 992px) {
    .hero-left {
        text-align: left;
        border-right: 2px solid var(--brandTextDark);
    }
    br {
        border: 2px solid var(--brandTextWhite);
    }
}

/* TY PAGE */
.parallax {
    /* background: linear-gradient(180deg, rgba(175, 67, 86, .9) 0%, rgba(130, 37, 42, .9) 100%), url(../img/main-campus.png); */
    background: linear-gradient(0deg, var(--brandPrimary3_Opacity), var(--brandPrimary3_Opacity)), url(../images/atlanta-temp.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bo-box {
    background-color: rgba(255, 255, 255, .8);
    padding: 15px;
    margin: 30px 0;
}
    .ty .bo-box h3 {
        background-color: var(--brandPrimary3);
        color: #fff;
        font-size: 1.5rem;
        padding: 10px;
        margin-bottom: 15px;
    }
    .ty .bo-box p, .ty .bo-box a {
        color: var(--brandSecondary7);
        font-weight: bold;
    }
    .ty-contact-img {
        float: right;
        margin: 5px;
        max-width: 175px;
    }
/* TY CALLOUT */
.get-started {
    background-color: var(--brandPrimary5);
    background-image: url(../images/embac-logo-bw.png);
    background-repeat: repeat;
    background-position: 75% 50%;
    background-size: 225px;
}
.ty .get-started h4, .ty .get-started a {
    display: inline;
}
    .ty .get-started h4 {
        font-weight: 600;
        padding-right: 15px;
        vertical-align: middle;
    }
    .ty .btn {
        background-color: var(--brandTextDark);
        color: var(--brandTextWhite);
        font-weight: bold;
        font-size: 1.25rem;
        padding: .375rem 1.25rem;
        transition: background-color .6s ease-in-out;
    }

    #ty-text {
        color: var(--white);
        font-size: clamp(22px, 1rem, 28px);
        font-weight: bold;
        display: none;
    }
    #ty-text .desc-opd {
      margin: 5px 0;
    }

    @media (max-width: 767px) {
        .ty .get-started h4, .ty .get-started a {
            display: block;
            margin: 10px 0;
        }
    }


    @media (max-width: 575px) {
        .lp .hero {
            padding: 0;
        }
    }