/* --- GLOBAL STYLES --- */
body {
   min-width: 350px;

}

.snap-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

html {
   scroll-behavior: smooth;
}

ul,
li {
   list-style: none;
}

/* --- TYPOGRAPHY --- */

* {
   font-family: 'Poppins', sans-serif;
}

.contact-title,
.about-title {
   font-size: 3rem;
   font-weight: 900;
   letter-spacing: 3.3px;
   text-transform: capitalize;
}



/* Nav ------------------------------------- */
/* ////////////////////////////////////////////////////////////////*/

.nav-links {
   font-size: 1.25em;
   color: white;
   text-decoration: none;
}

.nav-links:hover {
   color: #f9dd1b;
   border-bottom: 1px solid;
   margin-bottom: -1px;
}

.nav-links {
   display: block;
   padding: 8px;
   font-size: 1.3em;
   color: white;
   text-decoration: none;
}

.nav-list {
   background-color: #2A2E7A;
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   height: 100%;
   align-items: center;
   justify-content: space-around;
   flex-direction: column;
}

.header {
   background-color: #2A2E7A;
   margin-bottom: 0;
   padding: 1em 1em;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
}

.nav {
   position: fixed;
   width: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 100%;
   transform: translateX(0);
   transition: transform 350ms;
   z-index: 1;
}

.navigation-open {
   transform: translateX(-100%);
}

.navigation-removed {
   transform: translateX(100%);
}

.logo {
   width: 203px;
   height: 60px;
}

.nav-button {
   position: absolute;
   color: white;
   font-size: 3.25em;
   padding-right: .05em;
   cursor: pointer;
   background: none;
   border: none;
   top: 20px;
   left: 90%;
}

.open-nav {
   position: sticky;
}

.nav-button:active {
   color: #f9dd1b;
}

@media (min-width: 800px) {

   .open-nav,
   .close-nav {
      display: none;
   }

   .nav {
      position: initial;
   }

   .nav-list {
      flex-direction: row;
      justify-content: end;
   }

   .nav-links:hover {
      border-bottom: 1px solid;
   }

   .career-guide-btn {
      margin: 0 .6em;
   }

   .career-banner-title {
      font-size: 2.5rem;
   }
}

.career-guide-btn {
   background-color: #2A39DB;
   border: none;
   border-radius: 50px;
   color: white;
   transition: all .2s ease-in-out;
}

/* Hero Page Layout (Mobile) ------------------------ */
/* //////////////////////////////////////////////////////////////// */

.hero-text {
   color: white;
   line-height: 2em;
   text-transform: capitalize;
   text-align: center;
   padding: .5em;
}

.hero-title {
   font-size: 2.2rem;
   font-weight: 700;
   letter-spacing: 3.3px;
   text-align: center;
}

.hero-subtitle {
   font-size: 1.5rem;
   font-weight: 200;
   letter-spacing: 5%;
   line-height: 150%;
   margin-top: 0;
   margin-bottom: 0;
   ;
   text-align: center;
}

.hero-content {
   color: white;
   display: flex;
   flex-direction: column;
   height: 85vh;
   width: 100%;
   margin: 0 auto;
}

.hero-img {
   background-color: #2A2E7A;
   background-image: url('./landing.jpg');
   background-size: cover;
   background-position: 70% 30%;
   height: 85vh;
   width: 100%;
   z-index: -2;
}

.hero-overlay {
   background-color: black;
   background-color: rgba(0, 0, 0, 0.4);
   height: 85vh;
   width: 100%;
   z-index: -1;
}

.welcome-hero-image {
   display: flex;
   flex-direction: column;
   height: 87vh;
   width: 100%;
   margin: 0 auto;
   background-image: url("/Code/welcome-hero.png");
   width: 100%;
   height: auto;
   z-index: -5;
   background-position: center;
   background-size: cover;

}

.welcome-hero-overlay {
   /* background: rgb(42,57,219);
   background: linear-gradient(360deg, rgba(42,57,219,.5) 25%, rgba(42,51,169,.5) 51%, rgba(42,46,122,.5) 100%); */
   background: rgb(1, 5, 75);
   background: linear-gradient(360deg, rgba(1, 5, 75, .6) 0%, rgba(2, 8, 116, .6) 25%, rgba(11, 17, 118, .6) 53%, rgba(25, 30, 120, .6) 90%, rgba(42, 46, 122, .6) 100%);
   height: 87vh;
   width: 100%;
   z-index: 1;
}


.card-section {
   background: rgb(1, 5, 75);
   background: linear-gradient(180deg, rgba(1, 5, 75, 1) 0%, rgba(2, 8, 116, 1) 25%, rgba(11, 17, 118, 1) 53%, rgba(25, 30, 120, 1) 90%, rgba(42, 46, 122, 1) 100%);
}
.welcome-hero-content {
   z-index: 5;
   position: relative;
   opacity: 1;
}

.welcome-hero-text {
   color: white;
   /* line-height: 2em; */
   text-align: center;
   padding: .5em;
   letter-spacing: 3px;
}

.welcome-hero-alt-title {
   color: #F9DD1B;
   text-transform: uppercase;
}

.welcome-hero-alt-title-link {
   color: white;
   text-transform: uppercase;
}

.welcome-hero-link {
   color: #f9dd1b;
}

.welcome-hero-link:hover {
   color: #af9572;
}


.welcome-area-container {
   /* background: rgb(42,57,219);
   background: linear-gradient(180deg, rgba(42,57,219,.8) 25%, rgba(42,51,169,.9) 51%, rgba(42,46,122,1) 100%); */
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-align: center;
   padding: 2em 1em 0;
   gap: 2em;
}
   .welcome-hero-overlay {
      display: flex;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      margin: 0 auto;
      width: 100%;
   }
   .welcome-hero-content {
      display: flex;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      width: 100%;
      max-width: 44em;
      height: 60vh;
      margin: 0 auto;
      position: relative;
   }

.welcome-cta-container {
   display: flex;
   align-content: center;
   justify-content: center;
   padding: 2em 0 2em 0;
}
.welcome-card-container {
   background: #2A39DB;
   padding: 1em 0 0 0;
   border-radius: 24px 24px 24px 24px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -1px;
   width: 100%;
   max-width: 35em;
}

.welcome-card-text {
   text-transform: capitalize;
   font-weight: 700;
   font-size: 1.2rem;
   line-height: 30px;
   color: white;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

.welcome-card-image {
   max-width: 100%;
   height: auto;
   display: flex;
   align-content: center;
   justify-content: center;
   border-radius: 0px 0px 24px 24px;
   aspect-ratio: 3/2;
}

.welcome-cta {
   color: white;
   background-color: #2A39DB;
   border-radius: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   letter-spacing: 3px;
   text-transform: capitalize;
   font-weight: 700;
   font-size: 2rem;
   padding: .8em;
   outline: none;
   border: none;
   box-shadow: rgba(1, 5, 75, 0.35) 0px 25px 50px -12px;
   transition: all 0.3s ease-in-out;
}

.welcome-cta:hover {
   cursor: pointer;
   color: #2A39DB;
   background-color: #F9DD1B;
  
}


.welcome-hero-subtitle {
   font-weight: 500;
}


.chevron-btn-link {
   font-size: 3em;
   border: none;
   background: none;
   color: white;
   display: inline-block;
}


.chevron-btn-icon {
   background: none;
   animation-duration: 1.35s;
   animation-name: changecolor;
   animation-iteration-count: infinite;
   animation-direction: alternate;

}

@keyframes changecolor {
   from {
      color: #fff;
   }

   to {
      color: #f9dd1b;
      transform: translateY(.5em);
      font-size: 2.2em;
   }

}

.btn-container {
   margin: 0 auto;
}

/* 2022 Spring Event Layout (Mobile) -------------------------*/
/* //////////////////////////////////////////////////////////////// */

.event-title {
   margin: 0;
   background-color: #ffd800;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 1.5rem;
   text-align: center;
   font-weight: 900;
   padding: 1.0em 0;
}

.sidebar-subheader {
   font-size: 1.2rem;
   padding: 0 1.5em;
}


.sidebar-header {
   font-size: 1.3rem;
   padding: 0 1em;
   font-weight: bolder;
}

.event-container {
   background: #ffd800;
}

.event-photo {
   width: 100%;
   height: 28.75em;
   object-fit: cover;
   object-position: 30% 70%;
}

.event-logo {
   background-color: #F9DD1B;
   width: 80px;
   height: 80px;

}

/* ABOUT (Mobile) -------------------------*/
/* //////////////////////////////////////////////////////////////// */

.about-title {
   color: white;
   padding: 1em;
   /* -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: rgb(42, 46, 122) */
}

.banner-title {
   text-transform: capitalize;
   padding: .5em;
   line-height: 1.5em;
   letter-spacing: 1px;
   text-align: center;
}

.about-title-container {
   background-image: url("About-photo.jpeg");
   background-size: cover;
   background-position: center;
   width: 100%;
   z-index: -5;
}

.about-overlay {
   background-color: black;
   background-size: cover;
   background-color: rgba(0, 0, 0, 0.4);
   width: 100%;
   height: 100%;
   z-index: 5;
   display: flex;
   justify-content: center;
   align-content: center;
   text-align: center;
}

.about-banner {
   padding: 1em;
}

.about-banner a {
   color: rgb(42, 46, 122);
}

.about-banner-info {
   line-height: 2em;
   font-size: 1.2rem;
   padding: 0 1em;

}

.banner-image {
   width: 100%;
   height: 75%;
}

video {
   height: auto;
   width: 85%;
}

.video-title {
   font-size: 1em;
   font-style: italic;
}


/* Contact Us Layout (Mobile) ---------------------------*/
/* //////////////////////////////////////////////////////////////// */

.newsletter-title {
   font-weight: 700;
   letter-spacing: 3%;
   text-transform: capitalize;
}

.newsletter-subtitle {
   font-weight: 200;
   letter-spacing: 3%;
   padding: 1em 3em;
   line-height: 2em;
}

.newsletter-container {
   background-color: rgba(223, 223, 223, 50%);
   border-radius: 5%;
   box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.50);
}

.newsletter {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.newsletter-radio ul {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.newsletter-radio li {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding-right: 1.25em;
}

.email-bar {
   border: none;
   padding: .5em;
   border-radius: 5px;
   box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.10);
   text-align: center;
}

.sign-up-btn {
   margin: 0 2em 2em 2em;
   padding: 1em 3em;
   background-color: #2A39DB;
   border: none;
   border-radius: 50px;
   color: white;
   transition: all .2s ease-in-out;
}

.sign-up-btn:hover {
   cursor: pointer;
   background-color: #2A2E7A;
}

.contact-card-container {
   padding: 3em;
}

.contact-links {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: center;
   text-align: center;
   color: black;
   margin: 0 auto;
   text-decoration: none;
   border: none;
   background: none;
   width: 100px;
   height: auto;
}

.contact-icons {
   font-size: 4em;
   padding-bottom: .3em;
   transition: all .2s ease-in-out;
}

.contact-icons:hover {
   color: #2A39DB;
}

.twitter-timeline-container {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 1.5em 0 6em 0;
}


/* Footer Layout (Mobile) --------------------- */
/* /////////////////////////////////////////////// */
footer {
   margin: 0;
   background-color: #ffd800;
   /* padding: 1em; */
   box-sizing: border-box;
   width: 100%;
}

.welcome-footer {
   background-color: #2A2E7A;
}

.social-nav-links {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-content: center;
   margin: 0;
}

.social-icons {
   color: black;
   font-size: 2em;
   margin: .5em .5em;
   transition: all .2s ease-in-out;
}

.welcome-social-icons {
   color: white;
}

.social-icons:hover {
   color: #2A39DB;
}

.welcome-social-icons:hover {
   color: #F9DD1B;
}

.footer-nav-list {
   display: flex;
   justify-content: center;
   align-content: center;
   margin-top: 0;
   list-style: none;
}

.footer-nav-list .nav-links {
   color: black;
   margin-right: 1em;
   transition: all .2s ease-in-out;
   padding: 8px 8px 0;
   border-bottom: 1px solid transparent;
}

.footer-nav-list .welcome-nav-links {
   color: white;
}


.footer-nav-list .nav-links:hover {
   color: #2A39DB;
   border-bottom: 1px solid #2A39DB;

}

.copyright-text {
   text-align: center;
   color: rgba(0, 0, 0, .7);
   margin: 8px 0 0 0;
   padding: .5em;
}

.footer-nav-list .welcome-nav-links {
   color: white;
}

.footer-nav-list .welcome-nav-links:hover {
   color: #f9dd1b;
   border-bottom: 1px solid #F9DD1B;
}

.welcome-copyright-text {
   color: white;
}



/*career-guide.HTML ------------------------------------------------------------------------------ */
/* Career Guide -------- */

.career-banner {
   display: flex;
   align-content: center;
   justify-content: center;
   text-align: center;
   background-color: #2A2E7A;
   background-image: url("helmets.jpeg");
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: auto;
}

.career-banner-title {
   color: white;
   font-weight: bold;
   letter-spacing: 3.3px;
   text-transform: uppercase;
   background-color: #2A2E7A;
   box-shadow: 1px 2px 2px #333;
   line-height: 1.5em;
   box-decoration-break: clone;
   padding: .5em;
}

.grid-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5em;
   margin: 3em;
}

.grid-items,
.tile-title,
.tile-icon {
   color: black;
   text-decoration: none;
   display: flex;
   font-size: 1.3em;
   justify-content: center;
   align-items: center;
   margin: 0;
}

.square-tiles {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 25px;
   height: 100px;
   width: 100px;
}

.tile-title-container {
   padding: .2em;
}

.tile-title-container:hover {
   box-shadow: 2px 2px 6px 4px #999;
   border-radius: 25px 25px 0 0;
}

.tile-title-container:active {
   box-shadow: 2px 2px 6px 4px #333;
   border-radius: 25px 25px 0 0;
}

.gray-square {
   background-color: rgba(223, 223, 223, .8);
}

.yellow-square {
   background-color: #F9DD1B;
}

.grid-link {
   text-decoration: none;
}

.tile-icon {
   height: 75px;
   width: 75px;
}

.tile-title {
   font-size: .7em;
   text-transform: capitalize;
   max-width: 100px;
   text-align: center;
   background: none;
   padding-top: .5em;
}

.sources {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.sources a {
   font-style: none;
   text-decoration: none;
   color: #2A39DB;
}

.sources a:hover {
   color: #2A2E7A;
   text-decoration: underline;
}

/* Media Queries ------- */
/* ////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////// */


/* When the browser is at least 350px and below */
@media screen and (max-width: 350px) {

   .hero-img,
   .hero-overlay,
   .hero-content {
      height: 100vh;
   }

   .hero-text {
      margin: 0 auto;
      padding: 1.5em 1.5em;
   }

}


/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
   .career-banner br {
      display: none;
   }

}

/* When the browser is at least 610px and above */
@media screen and (min-width:610px) {

   /* Home - Hero */
   .hero-title {
      text-align: center;
      font-size: 2.5rem;
      padding: 2em 3em;
   }

   .hero-subtitle {
      font-size: 1.75rem;
   }

   /*Home - Event */
   .event-title {
      font-size: 2.0rem;
      padding: 1em 0;
   }

   .welcome-hero-overlay {
      display: flex;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      margin: 0 auto;
      width: 100%;
   }
   .welcome-hero-content {
      display: flex;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      width: 100%;
      max-width: 44em;
      height: auto;
      margin: 0 auto;
      position: relative;
   }

}

/* When the browser is at least 700px and above */
@media screen and (min-width:700px) {

   /* Home - Event */
   .event-photo {
      height: 100vh;
   }

   .event-title {
      font-size: 3rem;
   }

   .sidebar-subheader {
      font-size: 1.5rem;
   }

   .sidebar-header {
      font-size: 1.75rem;
      padding: 0 2em;
   }

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

   /* Home - Contact */
   .contact-cards {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-content: center;
      text-align: center;
   }

   /* Career-Guide */
   .square-tiles {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 25px;
      height: 200px;
      width: 200px;
   }

   .tile-icon {
      height: 150px;
      width: 150px;
   }

   .tile-title {
      max-width: 200px;
      text-align: center;
   }

   .career-banner-title {
      font-size: 2rem;
   }

}

/* When the browser is at least 800px and above */
@media screen and (min-width: 800px) {

   /* Home - Hero */
   .hero-content {
      margin: 0 auto;
   }

   .hero-title {
      text-align: center;
      font-size: 3rem;
      padding-left: 3em;
      padding-right: 3em;
   }

   .hero-subtitle {
      font-size: 2.5rem;
   }

   .hero-overlay,
   .hero-img {
      height: 100vh;
   }

   /* landing.html - Hero */
   .welcome-hero-image, .welcome-hero-overlay {
      height: 90vh;
   }
   .welcome-hero-overlay {
      display: flex;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      margin: 0 auto;
      width: 100%;
   }
   .welcome-hero-content {
      display: flex;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      width: 100%;
      max-width: 44em;
      height: auto;
      margin: 0 auto;
      position: relative;
   }

   .welcome-hero-text {
      padding: 0;
   }

   .welcome-hero-title {
      font-size: 4rem;
      max-width: 40em;
      width: 100%;
      line-height: 1.5em;
      margin: 0;
   }

   .welcome-hero-alt-title, .welcome-hero-alt-title-link {
      font-size: 1.5rem;

   }
   
   .welcome-hero-content .welcome-hero-subtitle {
      width: 100%;
      font-size: 2rem;
      max-width: 18em;
      padding-top: 1.5em;
      line-height: 1.5em;
      margin: 0 auto;
   }
      /* landing.html - Cards */


   /* Home - About */
   .about-banner-info {
      display: flex;
      flex-direction: row;
      text-align: center;
      align-items: center;
      margin: 0 2em;
   }

   .about-banner-info p {
      padding: 0 2em;
      width: 50%;
   }

   .about-banner-info iframe {
      width: 50%;
   }

   .banner-image {
      max-width: 50%;
      height: 50%;

   }

   .about-flipped {
      display: flex;
      flex-direction: row-reverse;
   }

   .top-about-banner {
      display: flex;
      flex-direction: row;
   }

   .about-title-container {
      background-size: 80%;
      height: 30vh;
   }

}

/* When the browser is at least 900px and above */
@media screen and (min-width: 900px) {
   .grid-container {
      grid-template-columns: 1fr 1fr 1fr;
   }

   .career-banner-title {
      font-size: 2.5rem;
   }


}

/* When the browser is at least 1200px and below */
@media screen and (max-width:1200px) {
   .footer-nav {
      display: none;
   }

}

/* When the browser is at least 1200px and above */
@media screen and (min-width:1200px) {

   .hero-content {
      margin: 0 auto;
   }

   .hero-title {
      font-size: 3.5rem;
   }

   .hero-subtitle {
      margin-top: 0;
      font-size: 3rem;
   }

   .hero-overlay,
   .hero-img {
      height: 100vh;
   }

   .chevron-btn-icon {
      font-size: 2em;
   }

   /* /////////////////////////////////// */
   .event-title {
      font-size: 4rem;
      padding: .5em 0;
   }

   .sidebar-subheader {
      font-size: 2.0rem;
   }
   .sidebar-small-text {
      font-size: 1.5rem;
   }
   

   .sidebar-text {
      padding-bottom: .8em;

   }

   .sidebar-header {
      font-size: 3rem;
   }

   .event-container {
      margin: 5em;
      display: grid;
      grid-template-columns: repeat(4, auto);
      grid-template-rows: repeat(6, auto);
   }

   .event-title-container {
      grid-column: 1 / span 3;
      grid-row: 2 / 2;
      z-index: 1;
   }

   .event-photo {
      grid-column: 1/ span 2;
      grid-row: 2/ span 4;
   }

   .event-sidebar {
      grid-column: 3/ 3;
      grid-row: 2 / span 6;
      justify-self: center;
      align-self: center;
      text-align: center;
      background: #ffd800;
      padding: 0 2em;
   }

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

   .about-title-container {
      background-position: 60% 35%;
   }

   .about-banner-info p {
      font-size: 1.7em;
      width: 50%;
   }

   .banner-title {
      font-size: 2.5rem;
   }

   .about-banner {
      margin-bottom: 5em;
   }

   .bottom-banner-title {
      margin-bottom: 0;
   }

   /* //////////////////////// */
   /* .contact-title {
      margin-top: 0;
   } */

   .grid-container {
      grid-template-columns: 1fr 1fr 1fr 1fr;
   }
   .welcome-area-container {
      flex-direction: row;
      justify-content: space-evenly;
      gap: 2em;
      padding: 3em 2em;
   }

   .weclcome-hero-content {
      max-width: 60em;
   }
}

/* When the browser is at least 1600px and above */
@media screen and (min-width:1600px) {
   .grid-container {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   }

}

/* When the browser is at least 1800px and above */
@media screen and (min-width:1800px) {
   .grid-container {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   }

}