@font-face {
    font-family: NeueMachina-Regular;
    src: url(./fonts/NeueMachina-Regular.otf);
}

@font-face {
    font-family: NeueMachina-Bold;
    src: url(./fonts/NeueMachina-Bold.otf);
}

@font-face {
    font-family: NeueMachina-Light;
    src: url(./fonts/NeueMachina-Light.otf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
}

body {
    background: url(./assets/background.svg);
    background-size: cover;
    position: relative;
}

main {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Nav  */
header {
    width: 100%;
    height: 82px;
}

nav {
    padding: 0vw 5vw;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

nav img {
    margin-top: 13px;
    /* margin-right: 60px; */
}

.nav-wrapper {
    /* margin-left: 3vw; */
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    list-style-type: none;
    color: white;
    /* border: 1px solid red; */
    border-radius: 14px;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(219, 217, 217, 0.1);
    backdrop-filter: blur(15px);
    margin-left: 120px;
    height: 50px;
    padding: 30px 22px 20px 22px;
}

.nav-wrapper li a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    position: relative;
    transition: all ease 0.2s;
}

.nav-wrapper li a:hover {
    color: aquamarine;
}

.n-last {
    margin-bottom: 9px;
}

#exp-btn {
    text-decoration: none;
    color: rgb(219, 249, 249);
    font-weight: 700;
    font-size: 19px;
    border: 1px solid rgba(209, 205, 205, 0.1);
    padding: 9px 20px;
    border-radius: 10px;
    backdrop-filter: blur(20px);
}

#exp-btn span {
    font-size: 44px;
    color: aquamarine;
}

/* page 1  */


.first {
    font-family: NeueMachina-Light;
    font-weight: 900;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(234, 234, 234);
    flex-direction: column;
    font-size: 3.6vw;
}

.first .f-one {
    height: 8vw;
}

#teach {
    color: aquamarine;
}

#good {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: aquamarine;
}

.f-two h1 {
    font-weight: 150;
    line-height: 75px;
    margin-bottom: 39px;
}

.f-three a {
    font-size: 33px;
    text-decoration: none;
    color: rgb(243, 243, 243);
    padding: 9px 44px;
    border: 1px solid rgba(153, 151, 151, 0.1);
    transition: all ease 0.2s;
    background: transparent;
    backdrop-filter: blur(25px);
    border-radius: 16px;
    font-family: NeueMachina-Light;
    letter-spacing: 1.px;
}

.f-three a:hover {
    letter-spacing: 3.12px;
    background-color: rgb(16, 192, 171);
    color: rgb(255, 255, 255);
    box-shadow: 2px 1px 22px aquamarine;
}

.f-three a span {
    color: aquamarine;
    font-size: 44px;
}

.f-three i {
    font-size: 28px;
}

/* page 2  */
.middle {
    margin-top: 200px;
    text-align: center;
    text-decoration: none;
    font-family: NeueMachina-Regular;
    text-spacing-trim: 2px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    flex-direction: column;
    color: white;
}

.m-one h1 {
    font-weight: 200;
    line-height: 37px;
}

.m-one h1 span {
    color: aquamarine;
}

.m-two img {
    border-radius: 15px;
    border: 1px solid rgba(235, 235, 235, 0.2);
    cursor: pointer;
}

.exp-free-learning {
    padding: 5px 19px;
    box-shadow: 0px 0px 1px rgb(255, 235, 184);
    border-radius: 5px;
    text-decoration: none;
    color: black;
    background-color: aqua;
    border: 1px solid rgba(238, 238, 238, 0.3);
    font-size: 21px;
    transition: all ease 0.2s;
}

.exp-free-learning:hover {
    box-shadow: 0px 0px 8px rgb(241, 241, 241);
}

/* page 3  */

.last {
    padding-left: 4vw;
    width: 100%;
    height: 100%;
}

.l-two {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: white;
    gap: 20px;
    width: 100%;
    height: 100%;
}

.l-one h1 {
    color: white;
    font-family: NeueMachina-Regular;
    letter-spacing: 2px;
    font-weight: 200;
    font-size: 44px;
    margin-bottom: 3vw;
}

.course-img img {
    width: 350px;
    height: 320px;
    border-radius: 10px 10px 0px 0px;
    filter: blur(0.489px);
    filter: drop-shadow(0px 0px 0px rgb(2, 188, 188)) invert(80%);
}

.courses-box {
    width: 352px;
    height: calc(320px * 2 - 50px);
    border: 1px solid rgba(6, 130, 141, 0.3);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.course-wrapper {
    text-align: center;
    width: 352px;

}

.course-btn {
    display: block;
    margin-top: 10px;
    padding: 8px 0px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 8px;
    background-color: rgb(2, 188, 188);
    color: black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 21px;
    font-weight: 800;
}

.courses-box {
    position: relative;
    border-radius: 10px;
}

.course-details .second-row {
    position: absolute;
    width: 340px;
    height: calc(320 * 2 -100px);
    bottom: 10px;
}

.first-c {
    width: 60%;
}

.first-c span {
    color: rgb(103, 147, 147);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 16px;
}

.first-c {
    font-size: 22px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
}

.course-details h1 {
    margin-top: 20px;
    margin-bottom: 14px;
}

.second-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.second-c {
    border: 1px solid rgba(190, 187, 187, 0.1);
    padding: 5px 9px;
    border-radius: 15px;
    background-color: rgba(102, 101, 101, 0.1);
}

.course-details h1,
h2 {
    color: rgba(255, 255, 255, 0.999);
    font-weight: 650;
}

/* Page 4  */


.last2 {
    padding-left: 4vw;
    padding-top: 5vw;
    width: 100%;
    height: 100%;
}

.l2-one {
    width: 100%;
}

.we-wrapper {
    width: 100%;
    height: 100%;
}

.we-wrapper>h1 {
    font-family: NeueMachina-Regular;
    color: white;
    font-size: 44px;
    font-weight: 500;
}

.we-details-row {
    width: 100%;
    margin-top: 5vw;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 60px;
    color: white;
}

.we-details-row-first img {
    width: 30vw;
    border: 1px solid rgba(212, 212, 212, 0.1);
    border-radius: 5px;
}

.we-details-row-second>h4 {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.yellow-we {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: yellow;
}

.we-details-row-second #details {
    width: 70%;
}

.verify-we-row {
    margin-top: 40px;
    display: grid;
    row-gap: 10px;
}

#we-title {
    font-family: NeueMachina-Regular;
}

#since {
    align-items: center;
    font-size: 16px;
    font-weight: 400;
}

#details {
    margin-top: 9px;
    font-family: monospace;
    font-weight: 100;
    font-size: 14px;
}

.verify-we-row {
    font-size: 20px;
    font-family: monospace;
    line-height: 13px;
    word-spacing: 3px;
    font-weight: 300;
}

.verify-we-row i {
    color: rgb(16, 206, 206);
}


/* page 5  */


marquee {
    display: flex;
    align-items: center;
    border-radius: 20px;
    border: 1px solid rgba(10, 80, 123, 0.3);
    background: transparent;
    padding: 1vw;
    transition: all ease 0.4s;
    position: relative;
    animation-name: widthMarquee;
    animation-timeline: view();
    animation-timing-function: ease;

}

marquee::before {

    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(12, 96, 85, 0.4);
    /* Optional: Add a subtle background color */
    /* Adjust the blur amount as desired */
    /* Place behind the div content */

}

@keyframes widthMarquee {
    from {
        width: 20%;
    }

    to {
        width: 100%;
    }

}

.last3 {
    margin-top: 4vw;
    margin-bottom: 3vw;
    padding-left: 4vw;
    padding-right: 4vw;
}

.last3 h1 {
    font-family: NeueMachina-Regular;
    font-weight: 200;
    font-size: 44px;
    color: rgba(224, 224, 224, 1);
    margin-bottom: 3vw;
}

#last3-move {
    height: 80px;
    object-fit: cover;
    filter: invert(25%);
    filter: drop-shadow(0 0 0.655rem rgba(149, 252, 208, 0.9));
    margin-left: 100px;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5vw 10vw;
    color: white;
    cursor: pointer;
}

.ff-two a {
    text-decoration: none;
    color: white;
    font-size: 25px;
}

.ff-two a {
    padding: 8px 12px;
    border: 1px solid rgba(219, 255, 254, 0.1);
    background-color: rgba(31, 31, 31, 0.2);
    border-radius: 8px;
    transition: all ease 0.2s;

}

.ff-two a:hover {
    font-size: 33px;
    color: aquamarine;
}

.ff-three,
.ff-three a {
    font-weight: 800;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    color: rgb(218, 218, 218);
    font-size: 22px;
    text-shadow: 0px 0px 14px white;
}

.cursor {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: aqua;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -1;
    transform: translate(-50%, -50%);
    transition: all ease-in 0.0112s;
    filter: drop-shadow(0 0 0.655rem rgba(149, 252, 208, 0.9));

}

#git {
    background-color: aqua;
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 12px 10px;
    font-family: NeueMachina-Regular;
    margin-bottom: 4vw;
    font-size: 22px;
}

.hide {
    display: none;
}