@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

@font-face {
    font-family: Averta CY;
    src: url(958f249204cf95b1-s.p.ttf);
}
@font-face {
    font-family: Thunder;
    src: url(0fe8a9611cffc01e-s.p.otf);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Averta CY';

    overflow-x: hidden;

}

.main {
    height: 100vh;
    /* width: 400vw; */
    width: 100%;
}

/* .page {
    flex: 0 0 100vw;
    height: 100vh;  
    padding: 0.5vw 3vw;
} */

.page1 {
    height: 100vh;
    padding: 0.5vw 3vw;
    position: relative;
    width: 100%;
    background: #ffffff;
}

nav {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .left img {
    /* height: 5vw; */
    width: 9vw;
}


.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    padding-right: 2vw;



}

.menu-item {
    list-style: none;
}

.menu-item>a {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1.3vw;
    overflow: hidden;
    color: black;
}

.menu-item>a>span {
    display: inline-block;
    position: relative;
    transition: transform 0.5s ease;
}

.menu-item>a::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    transition: transform 0.5s ease;
}

.menu-item>a:hover span {
    transform: translateY(-100%);
}

.menu-item>a:hover::after {
    transform: translateY(-100%);
}

.menu button {
    position: relative;
    cursor: pointer;
    font-weight: 600;
    font-family: "Averta CY";
    border-radius: 0.5vw;
    padding: 0.5vw 1vw;
    background-color: transparent;
    font-size: 1.25vw;
    /* Updated font-size */

    overflow: hidden;

}

.menu button span {
    display: inline-block;
    position: relative;
    transition: transform 0.5s ease;
}

.menu button::after {
    content: 'Register Now';
    /* Set the text that will appear after hover */
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0.5vw 1vw;
    transition: transform 0.5s ease;
}

.menu button:hover span {
    transform: translateY(-150%);
}

.menu button:hover::after {
    transform: translateY(-100%);
}

.menu-item>a {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;

    font-size: 1.25vw;
    /* Updated font-size */
    overflow: hidden;
}

.menu-item>a>span {
    display: inline-block;
    position: relative;
    transition: transform 0.5s ease;
}

.menu-item>a::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;

    transition: transform 0.5s ease;
}

.menu-item>a:hover span {
    transform: translateY(-100%);
}

.menu-item>a:hover::after {
    transform: translateY(-100%);
}

.main-content {
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.main-content h1 {
    position: relative;
    top: 3vw;
    width: 100%;
    font-size: 40vw;
    text-align: center;
    font-family: "Thunder";

    background: url("./assests/goldbg.png") no-repeat;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.for {
    position: relative;
    display: flex;
}

.powered {

    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    right: -7vw;
}

.gold {
    width: 96%;
    display: flex;
    justify-content: space-around;
}

.gold h2 {
    font-family: "Thunder";
    font-size: 5vw;
    background: url("./assests/goldbg.png") no-repeat;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.circle-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35vw;
    height: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Optional: add border to wrapper for visibility */

}

.circle {
    padding: 0.5vw;
    border: 1px solid black;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    animation: rotateCircle 14s linear infinite;
}

@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.circle-images {
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-images img {
    border-radius: 50%;
    height: 33vw;
    top: 4vw;
    padding-left: 2vw;


    position: absolute;
}

.page2 {
    height: auto;
    padding: 3vw 3vw;
    position: relative;
    width: 100%;
    background: #1d1d1e;
}


.page2 h1 {
    color: #fbfcf4;
    width: 60%;
    font-size: 6vw;
    font-family: "Thunder";
}

.page2-con {
    margin-top: 5vw;
    /* position: absolute; */
    width: 50%;
    position: relative;
    right: -35%;
}

.page2 h5 {
    font-weight: 600;
    font-size: 2.3vw;
    margin-bottom: 2vw;
    /* color: rgba(218, 27, 27, 0.691); */

    line-height: 1.5;
    /* Improves readability */
}

.page2-con h5 span {
    display: inline-block;
    /* Ensures each character is treated individually */
    transition: opacity 0.6s ease;
    /* Smooth fade-in effect */
}

.page2 .ready {
    width: 100%;
    background-color: #b8d4e3;
    height: fit-content;
    padding: 4vw;
    color: #202020;
    border-radius: 2vw;
    margin: 8vw 0;
    display: flex;
    justify-content: space-evenly;
}

.page2 .ready h1 {
    color: #202020;
}

.page2 .ready button {
    background-color: transparent;
    border-radius: 2vw;
    display: block;
    height: fit-content;
    padding: 1vw 2vw;
    font-size: 2vw;
    font-family: "Thunder";
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    position: relative;
    bottom: -7vw;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease;
    transition: border 0.3s ease-in
}

.page2 .ready button i {
    rotate: 30deg;

}

.page2 .ready button:hover {
    border: none;
    background-color: white;
}

.page2 .ready button:hover i {
    rotate: 90deg;
    transition: rotate 0.3s ease;
}

.page3 {
    height: 100vh;
    width: 100%;
    background: #000;
    padding: 3vw;

}

.page3 .top {

    height: 40%;
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.page3 .top .right {
    padding: 4vw 10vw;
}

.page3 .top img {
    height: 7vw;
    position: absolute;
    animation: parallax 10s infinite alternate ease-in-out;
}

@keyframes parallax {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2vw, -3vw);
    }

    50% {
        transform: translate(-3vw, 4vw);
    }

    75% {
        transform: translate(-2vw, -3vw);
    }

    100% {
        transform: translate(0, 0);
    }
}

#gold1 {
    animation-duration: 12s;
}

#gold2 {
    animation-duration: 8s;
}

.page3 .top h2 {
    font-size: 6vw;
    font-family: "Thunder";
    background: url("./assests/goldbg.png") no-repeat;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.page3 .bottom {
    display: flex;
    gap: 5vw;
    padding-top: 2vw;
}

.page3 .bottom .card {
    flex-shrink: 0;
    height: 27vw;
    width: 27vw;
    border-radius: 2vw;
    background-color: #fff;
    overflow: hidden;
}

.page3 .bottom .card-t {
    flex-shrink: 0;
    height: 27vw;
    width: 27vw;
    border-radius: 2vw;
    background-color: transparent;
    border: 1px solid #fff;
}

.card-con {
    height: 100%;
    /* background: #fff; */
    border-radius: 0.28vw;
    box-shadow: 0vw 1.39vw 2.08vw -0.69vw rgba(0, 0, 0, 0.1);
    max-width: 100%;
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: relative;
    transition: all 0.4s ease;
    margin: 0 0.69vw;
}

.card-con:before {
    height: 13.19vw;
    width: calc(100% + 6.94vw);
    content: "";
    position: absolute;
    background-image: linear-gradient(90deg,
            #FFD700,
            #FFC107,
            #FFB300);
    border-radius: 0.2vw 0.2vw 100% 100%;
    transition: all 0.4s ease-out;
    top: 0;
}

.card-con .close {
    width: 1.25vw;
    height: 1.25vw;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    right: 0;
    margin: 0.69vw;
    padding: 0.35vw;
    transition: all 0.2s ease;
}

.card-con .close:hover {
    background-size: 100%;
    opacity: 0.8;
}

.card-con .arrow {
    display: none;
}

.card-con article {
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.card-con article h2 {
    color: white;
    margin: 0;
    padding: 2.78vw 1.39vw 0.69vw 1.39vw;
    font-weight: 500;
    font-size: 1.67vw;
    letter-spacing: 0.03vw;
}

.card-con article .title {
    color: white;
    padding: 0.69vw 1.39vw;
    letter-spacing: 0.06vw;
    transition: all 0.4s ease;
}

.card-con article .desc {
    padding: 0.69vw 2.08vw;
    font-size: 0.97vw;
    text-align: center;
    line-height: 1.67vw;
    color: #666;
    height: 6.25vw;
    transition: all 0.4s ease-out;
}

.card-con article .pic {
    width: 8.33vw;
    height: 8.33vw;
    overflow: hidden;
    border-radius: 100%;
    margin: 1.39vw 0;
    box-shadow: 0vw 0vw 0vw 0vw rgba(255, 255, 255, 0.3);
    transition: all 0.6s ease;
}

.card-con article .pic img {
    width: 100%;
    filter: grayscale(100%);
}

.card-con .actions {
    width: 110%;
    justify-content: space-between;
    background: rgb(49, 154, 251);
    z-index: 1;
    position: absolute;
    bottom: 0;
}

.card-con .actions .btn {
    border: 0;
    background-color: transparent;
    box-sizing: border-box;
    width: 100%;
    height: fit-content;
    margin: 0;
    text-transform: uppercase;
    font-size: 0.9vw;
    transition: all 0.6s ease-in-out;
    cursor: pointer;
    color: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    letter-spacing: 0.03vw;
    padding: 0.8vw;
    /* background: rgba(68, 129, 235, 0.08); */
}

.card-con .actions .btn:focus {
    outline: 0;
}

.card-con:hover {
    /* transform: translateY(-10px); */
    box-shadow: 0vw 0.35vw 0.69vw -0.35vw rgba(0, 0, 0, 0.3);
}

.card-con:hover:before {
    height: 100%;
    border-radius: 0.28vw;
}

.card-con:hover .desc {
    color: white;
}

.card-con:hover .pic {
    box-shadow: 0vw 0vw 0vw 0.56vw rgba(255, 255, 255, 0.3);
}

.card-con:hover .pic img {
    filter: grayscale(0%);
}

.card-con.closed {
    min-width: 8.33vw;
    max-width: 8.33vw;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.6s ease;
    cursor: pointer;
}

.card-con.closed .title,
.card-con.closed .desc,
.card-con.closed .actions,
.card-con.closed .close {
    display: none;
}

.card-con.closed h2 {
    padding: 0;
    height: 100%;
    transform: rotate(-90deg);
    width: 30.56vw;
    z-index: 2;
    transition: all 0.6s ease;
}

.card-con.closed .pic {
    border-radius: 100%;
    height: 27.78vw;
    width: 27.78vw;
    position: absolute;
    top: -1.39vw;
    margin: 0;
    box-shadow: 0;
    transition: all 0.6s ease;
}

.card-con.closed .pic img {
    object-fit: cover;
    height: 100%;
    transform: translateY(1.39vw);
}

.card-con.closed .pic:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
    transition: all 0.4s ease;
    transform: translateY(1.39vw);
}

.card-con.closed:before {
    height: 100%;
    border-radius: 0.28vw;
}


.page4 {
    height: 100vh;
    width: 100%;
    padding: 5vw;
    position: relative;
}

.page4 h1 {
    text-align: center;
    font-size: 4vw;
    text-transform: uppercase;
    font-family: "Thunder";

}

.vedio-about {
    padding-top: 4vw;
    display: flex;
    width: 100%;
    gap: 3vw;
}

.vedio-c {

    width: 50%;
    height: 32vw;
}

.vedio-c iframe {
    border-radius: 0.8vw;
    height: 100%;
    width: 100%;
}

.abput-bootcamp {
    width: 50%;
}

.abput-bootcamp h6 {
    border: 1px solid rgba(0, 0, 0, 0.469);
    border-radius: 0.3vw;
    padding: 2vw;
    font-size: 1.4vw;
    font-weight: 300;
}

.abput-bootcamp p {
    padding-top: 1.7vw;
    font-size: 1.26vw;
    color: #1d1d1e;
}

.page5 {
    height: fit-content;
    width: 100%;
    padding: 5vw 8vw;
    background: #b8d4e3;
}

.page5 h1 {
    text-align: center;
    font-size: 4vw;
    text-transform: uppercase;
    font-family: "Thunder";
    margin-bottom: 3vw;
}

.schedule {
    position: relative;
    padding: 1.5vw;
    height: 16vw;
    width: 100%;
    background: #6e90a2;
    border-radius: 1vw;
    display: flex;
    gap: 5vw;
    justify-content: center;
    align-items: center;
    transition: background 0.3s step-end; 
    margin-bottom: 3vw;
}

.schedule:hover {
    /* background-color: #de411e; */
    /* background-color: #eab208e3; */
    background-color: transparent;
    background-image: url('./assests/goldbg.png');
    background-size: cover;
    background-position: center;
    color: #202020;
    font-weight: 800;
}

.schedule:hover h1 {
    color: #202020;
}

.schedule .sched-img {
    border-radius: 1vw;
    width: 45vw;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.schedule .sched-img img {
    height: 100%;
    width: 100%;
    object-fit: fill;
}

.schedule h1 {
    text-align: left;
    padding-top: 4vw;
    color: #fbfcf4;
    font-size: 4vw;
}

.date {
    border-radius: 1vw;
    position: absolute;
    height: 6.5vw;
    width: 8vw;
    /* background-color: #eab208e3; */
    background: #6e90a2;
    /* background-color: #de411e; */
    display: flex;
    justify-content: center;
    align-items: center;
    left: 20%;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.date h1 {
    font-size: 3.5vw;
    text-align: center;
}

.schedule:hover .date {
    opacity: 1;
}

#second-sch {
    display: flex;
    flex-direction: row-reverse;
}

#second-sch .sched-img {
    order: 0;
}

#second-sch .date {
    position: absolute;

    left: 70%;
}


.page6 {
    overflow: hidden;
    height: fit-content;
    width: 100%;
    padding: 3vw 2vw;

}

.page6 .heading-content {
    position: relative;
}

.page6 .heading-content h1 {
    text-align: center;
    font-size: 15vw;

    font-family: "Thunder";
}

.page6 .heading-content p {
    /* left: 8vw;
    top: -1vw; */
    position: absolute;
    right: 2vw;
    bottom: -2vw;
    font-size: 4.5vw;
    font-family: "Reenie Beanie", serif;
}

.page6 .non-profitable {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page6 .non-profitable h3 {
    margin-top: 3vw;
    font-size: 1.5vw;
    width: 55%;
    font-weight: 500;
    font-family: 'Averta CY';
    text-align: center;
}

.page6 .non-profitable button {
    padding: 1.2vw 1.9vw;
    font-size: 1.4vw;
    background-color: black;
    color: white;
    margin-top: 2vw;
    border-radius: 3vw;
    border: none;
    display: flex;
    gap: 1vw;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    /* Smooth transition */
}

.page6 .non-profitable button:hover {
    background-color: transparent;
    background-image: url('./assests/goldbg.png');
    background-size: cover;
    background-position: center;
    color: #202020;
    font-weight: 800;
}

.non-profitable button i {

    rotate: 30deg;

}


.non-profitable button:hover i {
    rotate: 90deg;
    transition: rotate 0.3s ease;
}

.arrow {
    position: relative;
}

.arrow p {
    position: absolute;
    top: 3vw;
    left: -40vw;
    font-family: "Reenie Beanie", serif;
    font-size: 3vw;
}

.arrow img {
    position: absolute;
    rotate: -10deg;
    top: -6vw;
    left: -28vw;
    height: 7vw;
    font-size: 3vw;
}

.about-newton {
    margin-top: 9vw;
    height: 38vw;
    width: 100%;
    padding: 3vw 5vw;

}

.about-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #79f2d881, #44ffe3f1);

    border-top-right-radius: 2vw;
    border-bottom-left-radius: 6vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}

.founder {
    position: absolute;
    left: -3vw;
    height: 27vw;
    width: 38%;
    /* border-radius: 1.5vw; */
    border-top-left-radius: 2.5vw;
    border-top-right-radius: 2.5vw;
    border-bottom-right-radius: 2.5vw;
    overflow: hidden;
    border-left: 7px solid #2d2c44;
    border-bottom: 7px solid #2d2c44;
    /* box-shadow: -5px 10px 15px rgba(0, 0, 0, 0.3);  */
}

.founder img {
    height: 100%;
    width: 100%;
    object-fit: cover;

}

.right-nst {
    padding: 2vw;
    position: absolute;
    right: 0;
    width: 62%;
    height: 100%;
}

.right-nst h2 {
    padding-top: 2vw;
    font-size: 3vw;
    /* text-align: center; */
    font-family: "Reenie Beanie", serif;
}

.right-nst p {
    padding-top: 2vw;
    font-size: 1.3vw;
    text-align: left;
    width: 88%;
    font-weight: 100;
    line-height: 1.7vw;
}

.right-nst button {
    margin-top: 1.7vw;
    padding: 0.7vw 1vw;
    background: #fff;
    border: 3px solid #2d2c44;
    border-bottom: 6px solid #2c3744;
    /* border-right: 5px solid #2d2c44; */
    border-radius: 0.5vw;
    border-bottom-left-radius: 0vw;
    font-size: 1.5vw;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.right-nst button:hover {
    background-color: #fdd576;
}


footer {
    /* padding: 3vw; */
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100%;
    background: #000;

}

footer img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
footer h5{
    position: absolute;
    top: 2vw;
    font-size: 1.4vw;
    color: #312f2fd7;
    left: 1vw;
 font-weight: 100;
 font-family: "Thunder";
}
footer h1 {
    /* padding: 1vw; */
    position: relative;
    top: 90%;
    font-size: 10vw;
    text-align: center;
    font-family: "Thunder";
    color: #1f1d1d;
    line-height: 1vw;
}
#insta {
    position: absolute;
    bottom: 1vw;
    left: 15%;
    rotate: 9deg;
    padding: 0.5vw 1.7vw;
    font-size: 2vw;
    font-family: 'Averta CY', sans-serif;
    font-weight: 400;
    border: none;
    border-radius: 3vw;
    background: linear-gradient(45deg, 
        #f09433, 
        #e6683c, 
        #dc2743, 
        #cc2366, 
        #bc1888);
    background-size: 300% 300%;
    animation: gradient 6s ease infinite;
    color: white;  
    text-align: center;
    cursor: pointer;  
}
#insta:hover{
    transform: translateX(-10%) rotate(-5deg) scale(1.05);
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#linkedin {
    position: absolute;
    bottom: 2vw;
    left: 40%;
    transform: translateX(-50%) rotate(-5deg); 
    padding: 0.5vw 1.7vw;
    font-size: 2vw;
    font-family: 'Averta CY', sans-serif;
    font-weight: 400;
    border: none;
    border-radius: 3vw;
    background: #0077b5; 
    color: white;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
    transition: background-color 0.3s ease, transform 0.3s ease;  
}

#linkedin:hover {
    background: #005582;  
    transform: translateX(-50%) rotate(-5deg) scale(1.05);  
}

#youtube {
    position: absolute;
    bottom: 2vw;
    left: 60%;
    transform: translateX(-50%) rotate(9deg);  
    padding: 0.5vw 1.7vw;
    font-size: 2vw;
    font-family: 'Averta CY', sans-serif;
    font-weight: 400;
    border: none;
    border-radius: 3vw;
    background: #FF0000; 
    color: white;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);  
    transition: background-color 0.3s ease, transform 0.3s ease;  
}

#youtube:hover {
    background: #CC0000;  
    transform: translateX(-50%) rotate(-5deg) scale(1.05); 
}


#twitter {
    position: absolute;
    bottom: 2vw;
    left: 80%;
    transform: translateX(-50%) rotate(-5deg);  
    padding: 0.5vw 1.7vw;
    font-size: 2vw;
    font-family: 'Averta CY', sans-serif;
    font-weight: 400;
    border: none;
    border-radius: 3vw;
    background: #1DA1F2;  
    color: white;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
    transition: background-color 0.3s ease, transform 0.3s ease;  
}

#twitter:hover {
    background: #0d8bf2;  
    transform: translateX(-50%) rotate(7deg) scale(1.05); 
}




#loader {
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 9999;
    background-color: #030303;
    padding: 25vh 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
#loader h1{
    color: rgba(255, 255, 255, 0.427);
    font-family: "Thunder";
    font-size: 8vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ball {
    width: 90px;
    height: 90px;
    border-radius: 50%; 
    background: linear-gradient(to bottom, rgb(199, 176, 0) 0%, #FFB300);
    transform: translateY(-100px);
  }
  
  .shadow {
    width: 60px;
    height: 30px;
    background: radial-gradient(ellipse at center, rgb(255, 235, 105) 0%, rgba(237,237,237,0) 50%);
    position: relative;
    z-index: -1;
    transform: translateY(75px);
    opacity: .1;
  }