@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    font-family: "Montserrat", sans-serif;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
main {
    padding-top: 12rem;
}
a {
    transition: .5s ease;
}
#home {
    background-image: url(/images/bg.avif);
}
#training {
    background-image: url(/images/training_bg.avif);
}
#aircraft {
    background-image: url(/images/aircraft_bg.avif);
}
#ppl {
    background-image: url(/images/ppl_bg.avif);
}
#discovery {
    background-image: url(/images/discovery-bg.jpg);
}
header {
    background-color: #00a2ff55;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);;
}
#logo {
    height: 6rem;
    width: auto;
    display: block;
    position: absolute;
    left: 2%;
}
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1000;
    padding: 25px 0;
    font-size: 1.5rem;
    text-shadow: 1px 1px 18px black;
}
.nav-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}
.nav-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 25px;
    transition: all 0.3s ease;
    position: relative;
}
.nav-links a:hover, .nav-links a.active {
    color: white;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 4rem;
  cursor: pointer;
  position: absolute;
  right: 1%;
}
.dropdown-menu {
    position: absolute;
    top: calc(100% + .6rem);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    min-width: 220px;
    padding: 0.8rem;

    list-style: none;

    background: rgba(20, 30, 45, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    display: none;
    z-index: 1001;
}
.dropdown-menu li {
    margin: 0.3rem 0;
}

.dropdown-menu a {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;

    color: white;
    text-decoration: none;
    border-radius: 8px;

    transition: background-color 0.2s ease,
                color 0.2s ease;
}

.dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}
.dropdown {
    position: relative;
}
.dropdown:hover .dropdown-menu{
    display: block;
    
}
h1 {
    text-align: center;
    font-size: 8rem;
    max-width: 100%;
    color: white;
    text-shadow: 1rem 1rem 3rem black;
}

.buttons {
    text-align: center;
    padding: 2rem;
    color:white;
    text-decoration: none;
    font-size: 1.5rem;
    margin: 2rem 0;
}
.book-button, .book-button:visited {
    background-color: #00a2ff;
    text-decoration: none;
    color: inherit;
    padding: 2rem;
    border: 1px solid white;
    border-radius: 8px;
}
.training-button, .training-button:visited {
    text-decoration: none;
    color: inherit;
    padding: 2rem;
    border: 1px solid white;
    border-radius: 8px;
    background: #00000015;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.book-button:hover {
    background-color: #02173b;
}
.training-button:hover {
    background-color: #02173b;
    fill-opacity: 50%;
}
#sec-two {
    background-color: #02173b;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
}
#left, #right {
    flex: 1;
    margin: 3rem;
}
#sec-two h5 {
    color: #00a2ff;
    font-size: 2rem;
}
#sec-two h2 {
    color: white;
    font-size: 4rem;
}
#sec-two p {
    color: #a1b7c4;
    font-size: 2.4rem;
}
#sec-two video {
    border: 1px solid white;
    border-radius: 8px;
    margin-top: 5rem;
}
#right {
    text-align: center;
}
#explore-button, #explore-button:visited {
    display: block;
    width: max-content;
    text-decoration: none;
    border: 0.1rem solid white;
    border-radius: 8px;
    font-size: 1.5rem;
    padding: 2rem;
    color:white;
    margin: 2rem auto 2rem auto;
}
#explore-button:hover {
    background-color: #00a2ff;
}
#steps {
    background-color: #02173b;
    padding: 2rem;
    text-align: center;
}
#step-one, #step-two, #step-three, #step-four, #step-five {
    text-align: center;
    width: 40rem;
    margin: 2rem auto 2rem auto;
    border: 2px solid #a1b7c4;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    transition: transform .3s ease, box-shadow .3s ease;
}
#step-one:hover, #step-two:hover, #step-three:hover, #step-four:hover, #step-five:hover {
    transform: translateY(-0.5rem);
    box-shadow:
        0 0 2rem rgba(0, 162, 255, 0.4),
        0 1rem 3rem rgba(0, 0, 0, 0.4);
}
#steps h5 {
    color: #00a2ff;
    font-size: 2rem;
}
#steps h4 {
    color: white;
    font-size: 2.5rem;
}
#steps p {
    color: #a1b7c4;
    font-size: 1.5rem;
}
.vl {
    border-left: 2px solid #00a2ff;
    height: 5rem;
    display: inline-block;
}
#final-step h1{
    color: white;
    font-size: 4.5rem;
}
#final-step p {
    margin: 2rem auto 2rem auto;
    max-width: 40%;
}
#final-step a, #final-step a:visited {
    display: inline-block;
    background-color: #00a2ff;
    text-decoration: none;
    color: white;
    padding: 3rem 8rem 3rem 8rem;
    border: 1px solid white;
    border-radius: 8px;
    margin: 2rem auto 8rem auto;
    font-size: 1.5rem;
}
#final-step a:hover {
    background-color: #02173b;
}
#bottom-bar {
    background-color: #97abb8;
    padding: 2rem;
    color: white;
    font-size: 2rem;
}
#bottom-bar ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.lvl {
    border-left: 2px solid white;
    height: 3rem;
}
footer {
    padding: 2rem;
    background-color: #02173b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
footer p {
    color: #eeeeee;
}
#socials {
    margin-left: auto;
}
footer img {
    margin-right: auto;
    height: 6rem;
    width: auto;
    display: block;
}
#socials a, #socials a:visited {
    text-decoration: none;
    color: white;
    font-size: 4rem;
}
ion-icon {
    transition: color 0.3s ease;
}
ion-icon[name="logo-facebook"]:hover {
    color: #1877F2;
}
ion-icon[name="logo-instagram"]:hover {
    color: #E4405F;
}

ion-icon[name="logo-linkedin"]:hover {
    color: #0A66C2;
}

#train-desc {
    color: white;
    font-size: 1.8rem;
    text-align: center;
    margin: 6rem auto;
    width: 40rem;
    padding: 3rem;
    background-color: #02173b70;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
}

#training-options {
    background-color: #00a2ff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 6rem;
    text-align: center;
    margin-top: 15rem;
}
#training-options div {
    background-color: #02173b;
    color: white;
    border: 3px solid #00a2ff;
    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

#training-options h2 {
    color: #00a2ff;
    font-size: 3rem;
    margin: 2rem auto 4rem auto;
}
#training-options p {
    font-size: 1.5rem;
    margin: 2rem auto;
}
#training-options a, #training-options a:visited {
    display: inline-block;
    background-color: white;
    text-decoration: none;
    color: black;
    padding: 2rem;
    border: 1px solid white;
    border-radius: 8px;
    margin: auto auto 2rem auto;
}
#training-options a:hover {
    background-color: #02173b;
    color: white;
}

#program-highlights {
    background: linear-gradient(135deg, #f4f6f7 0%, #67bced 100%);
    padding: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#program-highlights div {
    background-color: #dcddde;
    color: black;
    border: 2px solid #00a2ff;
    border-radius: 8px;
    text-align: center;
    padding: 2rem;
    flex: 1;
    margin: 3rem;
    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    transition: transform .3s ease, box-shadow .3s ease;
}
#program-highlights div:hover, #learn-grid div:hover, #curriculum div:hover {
    transform: translateY(-0.5rem);
    box-shadow:
        0 0 2rem rgba(0, 162, 255, 0.4),
        0 1rem 3rem rgba(0, 0, 0, 0.4);
}
#program-highlights h3 {
    font-size: 1.8rem;
    color: #00a2ff;
}
#program-highlights p {
    font-size: 1.8rem;
}

#train-end {
    background-color: #02173b;
    padding: 12rem 0;
    text-align: center;
    color: white;
}
#train-end div {
    background-color: #a8bbcd;
    font-size: 1.8rem;
    padding: 3rem;
    border-radius: 8px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
#train-end a, #train-end a:visited {
    text-decoration: none;
    color: white;
    display: inline-block;
    background-color: #00a2ff;
    padding: 2rem;
    border: 1px solid #a8bbcd;
    border-radius: 8px;
    margin-top: 2rem;
}
#train-end a:hover {
    background-color: #a8bbcd;
    border: 1px solid white;
}
#plane-name {
    color: #00a2ff;
    font-size: 3rem;
    text-align: center;
    padding: 5rem;
    text-shadow: 1rem 1rem 3rem black;
}
#plane-sec-one {
    background: linear-gradient(135deg, #00a2ff 0%, #02173b 100%);
    padding: 5rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rem;
}
#plane-sec-one h3 {
    width: 100%;
    color: white;
    font-size: 6rem;
    text-align: center;
}
#efficiency, #modern, #safety {
    background-color: white;
    color: #02173b;
    border: 2px solid #00a2ff;
    border-radius: 8px;
    margin: 5rem auto;
    padding: 3rem;
    text-align: center;
    font-size: 3rem;
    width: 60%;

    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    transition: transform .3s ease, box-shadow .3s ease;
}
#efficiency:hover, #modern:hover, #safety:hover {
    transform: translateY(-0.5rem);
    box-shadow:
        0 0 2rem rgba(0, 162, 255, 0.4),
        0 1rem 3rem rgba(0, 0, 0, 0.4);
}
#plane-sec-one h4 {
    color: #00a2ff;
}
#plane-sec-two {
    background-image: url(/images/cockpit.avif);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 3rem;
}
#plane-sec-two ul {
    list-style: none;
    color: white;
    background-color: #00a2ff15;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    width: 70%;
    margin: 4rem auto;
    padding: 3rem;
}
#plane-sec-two li {
    border-bottom: 2px solid #00a2ff;
    font-size: 2rem;
    padding: 3rem;
}
#ppl h2 {
    margin: 7rem 0;
    color: white;
    font-size: 6rem;
}
#learn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    gap: 4rem;
    padding: 8rem;
    background-color: #02173b;
    color: white;
}
#learn-grid div {
    background-color: #00a2ff60;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem;
    border: 3px solid #00a2ff;
    border-radius: 8px;
    text-align: center;

    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    transition: transform .3s ease, box-shadow .3s ease;
}
#learn-grid p {
    font-size: 2rem;
}
#learn-grid h2 {
    font-size: 9rem;
}
#specs {
    display: flex;
    justify-content: space-around;
    background-color: #ffffff55;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 1rem;
    text-align: center;
    font-size: 1.5rem;
    text-shadow: 4px 4px 10px black;
    margin-top: 20rem;
}
#specs h3 {
    color: #00a2ff;
}
#specs p {
    color: white;
}
#overview {
    color: white;
    font-size: 2rem;
    padding: 3rem;
    background-color: #02173b;;
}
#curriculum {
    background-color: #a8bbcd;
    padding: 5rem 3rem;
}
#curriculum div {
    background-color: #dcddde;
    padding: 2rem;
    margin: 2rem auto;
    border: 2px solid #00a2ff;
    border-radius: 8px;
    max-width: 800px;
    font-size: 2.5rem;

    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    transition: transform .3s ease, box-shadow .3s ease;
}
#curriculum h6 {
    color: #00a2ff;
}
#curriculum h6, #curriculum h5, #curriculum p {
    padding: .5rem;
}
#requirements {
    padding: 3rem;
    background-color: #02173b;
}

#requirements ul {
    background-image: url(/images/req_img.avif);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3rem;
    max-width: 700px;
    margin:0 auto;
    border-radius: 8px;
}
#requirements li {
    list-style: none;
    background-color: #33333335;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem;
    margin: 2rem;
    border: 1px solid #ffffff40;
    border-radius: 8px;
    color: #eeeeee;
    font-size: 1.8rem;
    text-align: center;

    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    transition: transform .3s ease, box-shadow .3s ease;
}
#requirements li:hover {
    transform: translateY(-0.5rem);
    box-shadow:
        0 0 2rem rgba(0, 162, 255, 0.4),
        0 1rem 3rem rgba(0, 0, 0, 0.4);
}
#pricing {
    background-color: #a8bbcd;
    text-align: center;
    color: #02173b;
    padding: 3rem;
}
#pricing p {
    font-size: 2rem;
    padding: 0 2rem 3rem 2rem;
}
#pricing h3 {
    background-color: #eeeeee;
    font-size: 3rem;
    border-radius: 8px;
    padding: 3rem;
    max-width: 600px;
    margin: 2rem auto;
}
#pricing a, #pricing a:visited {
    color: white;
    display: inline-block;
    text-decoration: none;
    padding: 2rem;
    background-color: #00a2ff;
    border: 2px solid #00a2ff;
    border-radius: 8px;
    font-size: 1.8rem;
}
#pricing a:hover {
    background-color: #a8bbcd;
    border-color: white;
}
#about {
    background-color: #02173b;
}
#bio {
    background-color: #02173b;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8rem;
}
#bio p {
    color: white;
    font-size: 1.8rem;
    padding: 3rem;
    border-bottom: 1px solid white;
}
#bio h2 {
    color: white;
    font-size: 5rem;
    padding-left: 3rem;
}
#bio img {
    border: 1px solid white;
    border-radius: 8px;
    max-width: 500px;
    height: 90%;
    justify-self: center;
    margin-top: 5rem;
}
#exp {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2rem;
    text-align: center;
}
#exp h3 {
    color: #00a2ff;
}
#exp h4 {
    color: #a8bbcd;
}
#certs-container {
    background: linear-gradient(135deg, #00a2ff 0%, #16045f 100%);
}
#certs {
    display: grid;
    grid-auto-rows: 150px;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 3rem 12rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
#certs p {
    background-color: #ffffff25;
    color: white;
    padding: 3rem;
    text-align: center;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;

    border: 1px solid #ffffff25;
    border-radius: 8px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    transition: transform .3s ease, box-shadow .3s ease;
}
#certs p:hover {
    transform: translateY(-0.5rem);
    box-shadow:
        0 0 2rem rgba(0, 162, 255, 0.4),
        0 1rem 3rem rgba(0, 0, 0, 0.4);
}
.card-large {
    grid-column: span 2;
    grid-row: span 2;
}
.card-medium {
    grid-column: span 2;
    grid-row: span 1;
}
.card-tall {
    grid-column: span 1;
    grid-row: span 2;
}
#about-end {
    background: linear-gradient(135deg, #00a2ff 0%, #16045f 100%);
    color: white;
    text-align: center;
    padding: 4rem;
    width: 70%;
    margin: 6rem auto;
    border-radius: 8px;
}
#about-end h2 {
    font-size: 4rem;
}
#about-end p {
    font-size: 2rem;
}
#about-end a, #about-end a:visited {
    display: inline-block;
    font-size: 3rem;
    border: 2px solid #eeeeee;
    border-radius: 8px;
    text-decoration: none;
    color: #02173b;
    padding: 3rem;
    background-color: #eeeeee;
    margin-top: 2rem;
}
#about-end a:hover {
    background-color: inherit;
    color: white;
    border-color: white;
}

#contact {
    background: linear-gradient(135deg, #00a2ff 0%, #02173b 100%);
}
#contact-container {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    justify-content: space-around;
}
#contact-info, #contact-right {
    border: 1px solid #ffffff80;
    border-radius: 12px;
    padding: 3rem;
    color: white;
    flex: 1;
    margin: 4rem;
    background: #ffffff15;
}
#contact-info li {
    list-style: none;
    padding: 1rem;
    font-size: 3rem;
}
#contact-info a, #contact-info a:visited {
    text-decoration: none;
    color: inherit;
    font-size: 4rem;
}
#contact-right {
    font-size: 3rem;
    text-align: center;
}
#contact-right a, #contact-right a:visited {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    padding: 3rem;
    border: 2px solid white;
    border-radius: 8px;
    margin-top: 2rem;
}
#contact-right a:hover {
    background-color: #00a2ff;
}
#disc-one {
    background: #00000015;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 2rem;
    text-align: center;
    padding: 2rem;
    width: 50%;
    margin: 2rem auto;
    border-radius: 12px;
    border: 1px solid #ffffff20;
}
#disc-one a, #disc-one a:visited {
    text-decoration: none;
    color: black;
    padding: 2rem;
    border: 1px solid white;
    border-radius: 12px;
    background-color: white;
    display: inline-block;
    margin-top: 2rem;
}
#disc-one a:hover {
    background: #00000015;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: white;
    color: white;
}
#steps-container {
    background: linear-gradient(135deg, #00a2ff 0%, #02173b 100%);
    padding: 2rem;
    margin-top: 22rem;
}
#discovery h2 {
    color: white;
    font-size: 6rem;
    margin: 0 0 0 4rem;
}
#steps-desc {
    color: white;
    font-size: 2rem;
    width: 50%;
    margin-left: 4rem;
}
#discovery-steps {
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
}
#discovery-steps div {
    flex: 1;
    background: #ffffff15;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 1rem rgba(0, 162, 255, 0.25),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
    transition: transform .3s ease, box-shadow .3s ease;
    padding: 2rem;
    margin: 2rem;
    border: 1px solid #ffffff20;
    border-radius: 12px;
    color: white;
}
#discovery-steps div:hover {
    transform: translateY(-0.5rem);
    box-shadow:
        0 0 2rem rgba(0, 162, 255, 0.4),
        0 1rem 3rem rgba(0, 0, 0, 0.4);
}
#discovery-steps h3 {
    font-size: 5rem;
    margin: 0;
    text-shadow: 2px 2px 18px black;
}
#discovery-steps h4 {
    font-size: 2rem;
}
#discovery-steps p {
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
    body {
        background-position: center;
    }
    html {
        font-size: 50%;
    }

    h1 {
        padding: 0 1rem;
    }
    #training-options, #learn-grid {
        grid-template-columns: 1fr;
    }
    #logo {
        display: none;
    }
    .nav-links {
        gap: 15px;
    }
    #left {
        text-align: center;
    }
    #training-options p {
        height: auto;
    }
    .lvl {
        border: none;
    }
    .dropdown:hover .dropdown-menu{
    display: none;
    }
    #bio {
        grid-template-columns: 1fr;
    }
    #bio img {
        width: 100%;
        max-height: 500px;
        object-fit: cover;
        object-position: center;
    }
    #learn-grid {
        padding: 1rem;
    }
    #certs {
        padding: 1rem;
    }
}
@media screen and (max-width: 100px) {
    #logo {
        display: none;
    }
}