:root{
    --tg-body-font-family: 'Poppins', sans-serif;
    --tg-heading-font-family: 'Barlow', sans-serif;
    --tg-berlin-font-family: 'berlin_sans_fb_demibold';
}
*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body{
    font-family:'Barlow', sans-serif ;
    height: 5000px;
    max-width: 100vw; 
    overflow-x: hidden;
}

body::-webkit-scrollbar{
    width: 10px;
    height: 30px;

}
body::-webkit-scrollbar-thumb {
    background: #68fb99;
    border-radius: 10px; 
}

body::-webkit-scrollbar-track {
    background: #10181f; 
}

.s{
    background-image: url(img/slider_bg.jpg);
    background-size: cover;
    width: 100vw;
    height: 130vh;
    position: relative;
}

.s::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    clip-path: polygon(50% 100%, 100% 1%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    background: #30ff75b7;
}



nav{
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.a {
 width:150px;

}


nav > ol{
    list-style-type: none;
    font-weight: bold;
    position: absolute;
    left: 25%;
    display: flex;
    text-align: center;
    align-items: center;
    gap: 5px;
    padding: 15px;
}

nav > ol li{
    position: relative;

}
nav ol a{
    padding: 20px 10px;
    color: white;
    text-decoration: none;
    /* background-color: #ff0000; */
}





/* OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo */

.oo{
    position: absolute;
    right: 2%;
    top: 35px;
    display:flex;
    margin-left: 10px;
    opacity: 0;
}


.oo >a i{
    font-size: 30px;
    outline: 3px #68fb99 solid;
    outline-offset: 5px;
    color: #68fb99;
}

.oo1{
    position: fixed;
    right: -500px;
    top: 0;
    background-color: #1b242e;
    width: 300px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    transition-duration: 1s;
}

.oo:hover .oo1{
    right: 0;

}


.oo1 >:first-child{
    display: flex;
    position: relative;
    margin: 0px 10px 20px;
}
.oo1 >div a img{
    width: 120px;
}
.oo1 >:first-child >div{
    background-color: #a2a9afb5;
    position: absolute;
    right: 5px;
    font-size: 25px;
    font-weight: bold;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #30ff75;
}
.oo1 >:nth-child(2){
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
.oo1 >:nth-child(2) input{
    width: 210px;
    height: 40px;
    background-color: #262e38;
    border-radius: 10px;
    border: 1px solid transparent;
}
.oo1 >:nth-child(2) input::placeholder{
    padding: 7px;
}
.oo1 >:nth-child(2) input:focus{
    color: white;
    padding: 7px;
}

.oo1 >:nth-child(2) button{
    width: 40px;
    background-color: #262e38;
    border-radius: 10px;
    border: 1px solid transparent;
    color: white;
    cursor: pointer;
}
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */

.oo1 >section{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ho{
    display: flex;
    flex-direction: column;
    width: 90%;
    gap: 20px;
}
.hov{
    width: 100%;
    height: 50px;
    border: 1px #a2a9af solid;
    display: flex;
    align-items: center;
    border-radius: 15px;
    position: relative;
}
.ho a{
    color: white;
    font-style: 18px;
    font-weight: bold;
    margin-left: 15px;
    text-decoration: none;
}
.ho >:first-child div{
    position: absolute;
    right: 10px;
    font-size: 19px;
    font-weight: bold;
    color: #a2a9af;
    cursor: pointer;
}
.yes{
    display: flex;
}
.non{
    display: flex;
    display: none;
}

.las{
    display: flex;
    flex-direction: column;
    gap: 10px;
    display: none;
}
.las a{
    border: 1px #a2a9af solid;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.ho:hover .las{
    display: flex;
}
.ho:hover .non{
    display: flex;
}
.ho:hover .yes{
    display: none;
}

.sl ul{
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 20px;

}
.sl ul li{
    font-size: 18px;
    border: 1px #a2a9afa6 solid;
    padding: 8px;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
} 

.sl ul li a{
    color: #a2a9af;
}







/* <<<<<<<<<>>>>>> */

.po{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    /* background-color: aqua; */
    right: 4.5%;

}

.s nav >div svg{
    cursor: pointer;
    width: 30px;
    height: 30px;
    color: white;     
}

.s article{
    width: 7px;
    height: 30px;
    background-color: black;
}   
    /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>> */
.menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50px;
    height: 30px;
    cursor: pointer;
    
}
  
.menu-icon span {
    display: block;
    width: 100%;
    height: 4px; 
    background-color: white; 
  }
.menu-icon :first-child{
    width: 30px;
}
.menu-icon :last-child{
    width: 30px;
    align-self: flex-end;
}
.menu-icon1:hover span{
    width: 50px;
    transition: .5s;
}





/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<جاانب>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

main{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -500px;
    background-color: #19222b;
    padding: 30px;
    z-index: 9999;
    width: 500px;
    height: 100vh;
    /* display: none; */
    transition-duration: .5s ;
    transition-delay: .5s;
}

.menu-icon1:hover main{
    right: 0;
    /* transition-duration: .5s ; */
}

main > :first-child{
    display: flex;
    position: relative;
    margin-bottom: 30px;
}

main :first-child a img{
    width: 170px;
}

main :first-child div{
    position: absolute;
    left: 94%;
    width: 40px;
    height: 40px;
    padding: 10px;
    background-color: #c9e7ff29;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
main :first-child div i{
    font-size: 36px;
    color: #a2a9af;

}
main :first-child div:hover i{
    color: #19222b;
}
main :first-child div:hover{
    background-color: #68fb9a;
}

/* <<<<<<<<<<>>>>>>>>>>> */

main > :nth-child(2){
    font-size: 35px;
    font-weight: bolder;
    width: 450px;
    text-transform: uppercase;
    color: white;
    margin-bottom: 40px;
    margin-top: 40px;
}
main > :nth-child(2) :last-child{
    color: #68fb9a;
    font-size: 35px;
}
/* <<<><><><><><> */

main > :nth-child(3) > p{
    color: white;
    font-size: 18px;
    font-weight: bold;
}

main > :nth-child(3) ol{
    list-style: square;
    margin: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
main > :nth-child(3) ol li{
    font-size: 18px;
    color: rgba(255, 255, 255, 0.488);
    width: max-content;
    /* background-color: aqua; */
}
main > :nth-child(3) ol li:hover{
    color: #68fb9a;
    cursor: pointer;
}
main > :nth-child(3) ol li:hover span{
    color: rgba(255, 255, 255, 0.488);
    cursor: text;
}

/* <<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>> */

main form div{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    height: 80px;
    /* background-color: aqua; */
}

main form p{
    color: #68fb9a;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}
main form input{
    width: 350px;
    height: 50px;
    border: 1px solid #8a8c8e93;
    background-color: transparent;
    border-radius: 10px;
}
main form  button{
    width: 70px;
    height: 50px;
    border: 1px solid #8a8c8e93;
    background-color: transparent;
    border-radius: 10px;
    color: #68fb9a;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}
button svg{

}
main form input::placeholder{
    color: rgba(255, 255, 255, 0.488);
    padding-left: 10px;
    font-size: 17px;
}
main form input:focus{
    color: white;
    padding-left: 10px;
    font-size: 17px;
    background-color: #68fb9a;
    font-weight: bold;
}

form button:hover{
    cursor: pointer;
}
form button:hover svg{
    fill: #faa706;
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>> */
main > :nth-child(5){
    color: rgba(255, 255, 255, 0.488);
    font-size: 17px;
    margin: 10px 0px;

}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.div{
    margin-top: 30px;
}
.offCanvas{
    display: flex;
    gap: 30px;
    list-style-type: none;
}
.offCanvas li a i{
    font-size: 20px;
    color: white;
}
.offCanvas li a i:hover{
    color: #68fb9a;
}

/* ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, */

.aa{

    font-size: 18px;
    font-weight: bold;
    margin-left: 20px;
    background-color: #68fb9a;
    width: 160px;
    height: 40px;
    display: flex;
    align-items:center ;
    justify-content: center;
    border-radius: 90px;  
    cursor: pointer;
    color: white;
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
}

.aa div{
    width: 93%;
    height: 95%;
    display: flex;
    align-items:center ;
    justify-content: center;
    background-color: #19222b;
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
}
.aa:hover div{
    background-color: #68fb9a;
    color: black;
}
/* <<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>> */

nav ol li > a::after{
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 50px;
    height: 1px;
    background-color: #68fb9a;
   opacity: 0;
    transition-duration: .2s;  
}


li > a:hover ,
.active {
    color: #68fb9a;
}

li > a:hover::after ,
.active::after{
    opacity: 1;
    rotate: -30deg;
} 

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>> */
.men1{
    position: absolute;
    top: 204%;
    background-color: #19222b;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    width: 170px;
    gap: 5px;
    overflow: hidden;
    display: none;
    border-radius: 15px;
    padding: 20px;


}
ol li div a{
    overflow: hidden;
}
.ar{
    display: flex;
    align-items: flex-end;
    gap: 7px;
    translate: -30px;
}

.men1 a .ar div{
    border: 7px solid #68fb9a; 
   border-radius: 50%;
   border-left: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-right: 7px solid #68fb9a;
   border-top: 7px solid transparent;
   rotate: -40deg;
}

.ar:hover{
    translate: 0px;
}
ol :first-child:hover .men1{
    display: flex;
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<TOURNAMENT>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.men2{
    background-color: #19222b;
    position: absolute;
    top: 204%;
    font-size: 14px;
    display: flex;
    flex-direction:column ;
    width: 230px;
    padding: 20px;
    border-radius: 15px;  
    display: none;
}

.arr{
    display: flex;
    align-items: flex-end;
    gap: 5px;
    translate: -25px;
    overflow: hidden;
}

.arr:hover{
    translate: 0px;
}

ol :nth-child(3):hover .men2{
    display: flex;
}

ol li .men2 .arr div{
    width: 10px;
    height: 10px;
    border-right: 7px solid #68fb9a;
    border-left: 7px solid transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    rotate: -40deg;
    border-radius: 50%
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<PAGES>>>>>>>>>>>>>>>>>>>>>>>>>> */

.men3{
    position: absolute;
    top: 204%;
    width: 200px;
    background-color: #19222b;
    border-radius: 15px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    padding: 0px 20px;
    display: none;
}

.arrr{
    display: flex;
    align-items: flex-end;
    gap: 7px;
    translate: -25px;
}
.men3 a{
    overflow: hidden;
}
.arrr:hover{
    translate: 0px;
}

ol li:nth-child(4):hover .men3{
    display: flex;
}

li .men3 .arrr div{
    width: 10px;
    height: 10px;
    border-right: 7px solid #68fb9a;
    border-left: 7px solid transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    rotate: -40deg;
    border-radius: 50%
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<NEWS>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.men4{
    position: absolute;
    top: 204%;
    width: 200px;
    background-color: #19222b;
    border-radius: 15px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    padding: 0px 20px;
    display: none;
}

.aar{
    display: flex;
    align-items: flex-end;
    gap: 7px;
    translate: -25px;
}
.men4 a{
    overflow: hidden;
}
.aar:hover{
    translate: 0px;
}

ol li:nth-child(5):hover .men4{
    display: flex;
}

li .men4 .aar div{
    width: 10px;
    height: 10px;
    border-right: 7px solid #68fb9a;
    border-left: 7px solid transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    rotate: -40deg;
    border-radius: 50%
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


.a2{
    position: absolute;
    top:30%;
    padding: 20px;
    border-radius: 20px;
    width: 270px;
}

.aa1{
    color: #68fb9a;
    font-size: 25px;
    font-weight: bold;
    position: relative;
    top: 37px;
    padding-left: 10px;
    letter-spacing: 3px;
}
.a2 div{
    width: 250px;
    height: 50px;
    background-image: url(http://78.47.136.206/mykd/assets/img/slider/text_gradient_bg.png);
    opacity: 0.28;

}

.bb{
    font-size: 100px;
    position: absolute;
    top: 38%;
    color: white;
    font-weight: bold;
    text-shadow: -1px 5px 0px rgba(69, 248, 130, 0.66);
    padding: 20px;
}

.cc{
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 3px;
    position: absolute;
    top: 53%;
    line-height: 1.4px;
    color: white;
    padding: 20px;
}

.dd{
    position: absolute;
    top: 60%;
    left: 20px;
    color: black;
    /* padding: 20px; */
    width: 250px;
    height: 40px;
    /* background-color: #ffffff; */
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
    background-color: #ffffff;
}
.dd p{
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
    width: 95%;
    height: 90%;
    background-color: #68fb9a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    letter-spacing: 3px;
    font-size: 20px;
    transition-duration: 1s;

}


.dd:hover p{
    background-color: white;
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.slider{
    position: absolute;
    top: 85%;
    margin: 0px 50px;
}


.slider_brand{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    gap: 30px;

}
.slider_brand li img{
    opacity: .3;
    transition-duration: .5s;
}

.slider_brand li img:hover{
    opacity: 1;

}

.im{
    
    position: absolute;
    left: 55%;
    animation: logo 4s linear infinite alternate;
}
@keyframes logo {
    0%{
        transform: translate(5px ,5px);
    }
    100%{
        transform: translate(-10px ,-10px) ;
    }
}
.im img{
    width: 80%;
}



/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.ai{
    background-color: #0b0e13;
    width: 100vw;
    height: 60vh;
    padding: 30px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.ai1{
    display: flex;
    border: #adb0bc18 1.5px solid ;
    border-radius: 20px;
    width:430px;
    height: 200px ;
    background: linear-gradient(to bottom , #5d768e37 , transparent);
    padding: 25px;
    gap: 15px;
    overflow: hidden;
}

.ai1 > :first-child img , 
.ai2 > :first-child img , 
.ai3 > :first-child img{
    border-radius: 15px;
    height: 150px;
    /* width: 100px; */
}
.ai11 >:first-child{
    padding-bottom: 10px;
}
.ai11 >:first-child a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.ai11 >:first-child a:hover , 
.ai11 >:nth-child(2) > :nth-child(2):hover{
    color: #faa706;
}

.ai11 >:nth-child(2){
    gap: 10PX;
    display: flex;
    align-items: center;
    position: relative;
}
.ai11 >:nth-child(2) img{
    border-radius: 50%;
}
.ai11 >:nth-child(2) span{
    color: #a2a9af;
    font-size: 13px;
}
.ai11 >:nth-child(2) :nth-child(2){
    color: #a2a9af;
    text-decoration: none;
    font-weight: bold;
}

.ai111{
    width: 200px ;
    height: 65px;
    border: #adb0bc3a 1px solid;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    margin-top: 10px;
}
.ai111 >:first-child{
    color:#ffffff;
    font-size: 18px;
    font-weight: bold;
}
.ai111 >:nth-child(2){
    font-size: 18px;
    font-weight: bold;
    color: #faa706;
}
.ai111 >:nth-child(3) > div{
    background-color: #faa706;
    display: flex;
    width: 80px;
    height: 40px;
    border-radius: 10px;
    margin: 10px;
    align-items: center;
    padding: 10px;
    color: black;
    gap: 10px;
}
.ai111 >:nth-child(3){
    text-decoration: none;
}
.ai111 >:nth-child(3) > div span{
    font-size: 18px;
    font-weight: bold;
}

.ai111 >:nth-child(3) > div:hover{
    background-color: #68fb9a;
}

.ai111 >:nth-child(3) > div div i{
    font-size: 25px;
    font-weight: 1000000;
}


/* <<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>> */



.ai11 > :nth-child(2) > :nth-child(2)::after{
    content: '';
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: #74747586;
    margin: 5px;
}

.ai1:hover ,
.ai2:hover ,
.ai3:hover{
    border: #68fb9950 1px solid;
}



/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.s1{
    background-color: #141a20;
    background-image: url();
    width: 100vw;
    height: 280vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px;
}

.s1 > :first-child{
    width: 100vw;
    height: 70vh;
    /* background-color: white; */

}
.s1 > :first-child >:first-child >:first-child:hover{
    animation: aa 4s;
}
@keyframes aa{
    0%{
        opacity: 0;
    }
    35%{
        opacity: .3;
    }
    75%{
        opacity: .7;
        text-shadow: 3px 3px 2px #74d7958b;
    }
    100%{
        opacity: 1;
    }
}

.s1 > :first-child >:first-child{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.s1 > :first-child >:first-child >:first-child{
    color: #68fb9a;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2px;
}

.s1 > :first-child >:first-child >:nth-child(2){
    color: white;
    font-size: 45px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
}
.s1 > :first-child >:first-child >:nth-child(3){
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    width: 90px;
    height: 5px;
    background-color: #68fb9a;
}
/* <<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>> */

.s1 > :first-child >:nth-child(2){
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin-top: 100px;
    margin-bottom: 50px;

}


.s1 > :first-child >:nth-child(2) >:first-child{
    width: 180px;
    height: 50px;
    background-color: #68fb9a;
    clip-path: inset(0 0 0 0) ;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.s1 > :first-child >:nth-child(2) >:last-child{
    width: 180px;
    height: 50px;
    background-color: #faa706;
    clip-path: inset(0 0 0 0) ;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}



.s1 > :first-child >:nth-child(2) a{
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
    color: white;
    width: 177px;
    height: 47px;
    clip-path: inset(0 0 0 0) ;
    background-color: #19222b;
    display: flex;
    align-items: center;
    justify-content: center;
}


.s1 > :first-child >:nth-child(2) >:first-child a::before{
    width: 15px;
    height: 50px;
    background-image: url(img/00.png);
    position: absolute;
    left: 0%;
    content: '';

}
.s1 > :first-child >:nth-child(2) >:first-child a::after{
    width: 15px;
    height: 50px;
    background-image: url(img/btn_shape033.png);
    position: absolute;
    right: 0%;
    content: '';
}

.s1 > :first-child >:nth-child(2) >:first-child a:hover{
    background-color: #68fb99;
    transition: 1s;
    color: black;
}

.s1 > :first-child >:nth-child(2) >:last-child a::before{
    width: 15px;
    height: 50px;
    background-image: url(img/btn_shape02.png);
    position: absolute;
    left: 0%;
    content: '';
}
.s1 > :first-child >:nth-child(2) >:last-child a::after{
    width: 15px;
    height: 50px;
    background-image: url(img/btn_shape020.png);
    position: absolute;
    right: 0%;
    content: '';
}

.s1 > :first-child >:nth-child(2) >:last-child a:hover{
    background-color:#faa706;
    transition: 1s;
    color: black;
}


/* .s1 > :first-child >:nth-child(3){
    width: 1000px;
    height: 1px;
    background: linear-gradient(to right , transparent ,#68fb99 , transparent);
} */


/* ??????????????????????????????????????????????????????????????????????????????????????????????????????/ */

.s1i::before{
    width: 40vw;
    height: 1px;
    background: linear-gradient(to right , transparent ,#68fb99 , transparent);
    position: absolute;
    content: '';
    top: 0;
}
.s1i::after{
    width: 40vw;
    height: 1px;
    background: linear-gradient(to right , transparent ,#68fb99 , transparent);
    position: absolute;
    content: '';
    bottom: 0;
}

.s1i{
    height: 150px;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    position: relative;
}

.s1i div{
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background:linear-gradient(to bottom , transparent , #faa906 , transparent);
    display: flex;
    justify-content: center;
    align-items: center;
}


.s1i div img{
    border-radius: 50%;
    width: 97%;
    height: 97%;
    border: #19222b 3px solid;
}

.s1i div:hover{
    background:linear-gradient(to bottom , transparent , #68fb99 , transparent);
}


/* .s1 > :first-child >:nth-child(5){
    width: 1000px;
    height: 1px;
    background: linear-gradient(to right , transparent ,#68fb99 , transparent);
} */

/* llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll */

.s11{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 70px;
    width: 100%;
    height: 80vh;
    /* background-color: white; */
    position: relative;
    /* padding: 0px 50px; */
}

.s11 >:first-child{
    width: 50%;
    position: absolute;
    left: 0;
}

.s11 >:first-child img{
    border-radius: 15px;
}

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

.s11 >:nth-child(2){
    width: 60%;
    position: absolute;
    left: 40%;
    top: 0; 
    height: 339px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.s11 >:nth-child(2) >:first-child{
    display: flex;
    flex-direction: column;
    /* margin: 0px 20px; */
    width: 60%;
    /* background-color: #68fb99; */
} 

.s11 >:nth-child(2) >:first-child >:first-child{
    font-size: 30px;
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
}
.s11 >:nth-child(2) >:first-child >:nth-child(2){
    color: #faa706;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
}
.s11 >:nth-child(2) >:first-child >:last-child{
    width: 400px;
    font-size: 18px;
    color: #a2a9af;
    line-height: 1.3;
    font-weight: 500;
}

/* lpppppppppppppppppppppppppppppppppppppppppppppewoguapoiupoiusd */


.ll{
    list-style: none;
}
.ll li{
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 17px;
    font-weight: bold;
    color: #a2a9af;
    margin: 10px 0px;
    padding: 10px 10px;
    background: linear-gradient(to right , #283343 , transparent , #10181f79);
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.30);
    border-radius: 5px;
}

.ll li:hover{
    transition: 1.2s;
    translate: -30px 0px;
    cursor: pointer;
}


/* """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */

.s11 >:nth-child(2) >:nth-child(3){
    display: flex;
    width: 100vw;
    height: 50px;
    align-items: center;
    /* background:aqua; */
}
.lo{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 5px;
}
.lo li{
    display: flex;
    justify-content: center;
    align-items: center;
}
.lo li a{
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    width: 255px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a2a9af;
    background: linear-gradient(to top , #303e4adf,transparent);
    border-radius: 10px;
}

.lo li a:hover{
    color: #68fb99;
    transition: 1s;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++========================== */

.se{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 85vh;
    width: 100vw;
}

.ss{

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    gap: 15px;
    padding: 10px;
    width: 100vw;

}

.ss >:first-child , 
.ss >:last-child{
    width: 25%;
}

.ss img{
    width: 100%;
    height: 500px;
    border-radius: 10px;
    border: #2c3137 solid 10px;
}
.ss1 img{
    width: 100%;
}

.ss img:hover{
    scale: 1.04 1.04;
}
 

.se >:nth-child(2){
    display: flex;
    width: 65%;
    margin-top: 50px;
    position: relative;
}
.se >:nth-child(2) p{
    color: white;
    font-size: 20px;
    font-weight: bold;

}

.se >:nth-child(2) span{
    position: absolute;
    right: 0;
    color: #a2a9af;
    font-weight: bold;
}

.se >:last-child{
    width: 700px;
    height: 7px;
    background-color: #68fb9954;
    border-radius: 5px;
    margin-top: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.se >:last-child div{
    width: 150px;
    height: 10px;
    background-color: #68fb99;
    border-radius: 5px;
    position: absolute;
    left: 1%;
    animation: af 15s infinite alternate;
}
@keyframes af{
    0%{
        left: 1%;
    }
    25%{
        left: 25%;
    }
    50%{
        left: 50%;
    }
    75%{
        left: 75%;
    }
    100%{
        right: 0%;
    }
}


/* ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; */

.sa{
    width: 100vw;
    height: 360vh;
    background-color: #0f161b;
    padding: 50px;
}

.sa >:first-child{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}
.sa >:first-child >:first-child{
    color: #68fb99;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1.5px;
    line-height: 2px;
    font-weight: bold;
}
.sa >:first-child >:nth-child(2){
    color: white;
    font-size: 45px;
    line-height: 2px;
    font-weight: bold;
   margin: 10px;
}
.sa >:first-child >:last-child{
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    width: 100px;
    height: 5px;
    background-color: #68fb9a;
    margin: 10px;
}

/* :::::::::::::::::::::::::::::::: */

.sa >:nth-child(2){
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 70vh;
    width: 100%;
    gap: 30px;
    padding: 0px 50px;
}

.sa >:nth-child(2) >div{
    background: linear-gradient(to bottom , #19222b6f , transparent , #19222b6f) ;
    width: 270px;
    height: 370px;
    border-radius: 15px;
    border: #68fb993a .5px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.sa >:nth-child(2) >div div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;

}

.sa >:nth-child(2) >div div img{
    width: 220px;
    border: rgba(255, 255, 255, 0.733) 3px solid;
    border-radius: 50%;
}


.sa >:nth-child(2) >div div::before{
    content: "";
    position: absolute;
    left: 0;
    top: -60px;
    width: 70px;
    height: 300px;
    transform: rotate(-55deg);
    background: #68fb99;
    transition: all 0.3sease -out 0s;
    opacity: 0.55;
    z-index: -1; 
    outline-offset: 2px;
    outline: #68fb99 1px solid;
}

.sa >:nth-child(2) >div div::after{
    content: "";
    position: absolute;
    right: 0;
    top: -60px;
    width: 70px;
    height: 300px;
    transform: rotate(55deg);
    background: #68fb99;
    transition: all 0.3sease -out 0s;
    opacity: 0.55;
    z-index: -1; 
    outline-offset: 2px;
    outline: #68fb99 1px solid;
}

.sa >:nth-child(2) >div div .p{
    font-size: 25px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 2px;
}
.sa >:nth-child(2) >div div .b{
    font-size: 18px;
    font-weight: bold;
    color: #68fb99;
}


.sa >:nth-child(2) >div:hover div::after , 
.sa >:nth-child(2) >div:hover div::before{
    opacity: 1;
}

/* <llllllllllllllllllllllllllLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLlllllllllllllllllllllllllllllll */



.sa >:nth-child(3){
    margin-top: 100px;
    width: 100%;
    height: 600px;
    background-image: url(img/video_bg.jpg);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sa >:nth-child(3) >:first-child a{
    font-size: 80px;
    color: white;
}

/* ''''''''''''''''''''''' */

.sa >:nth-child(3) >:nth-child(2){
    margin-top: 20px;
    text-align: center;

}
.sa >:nth-child(3) >:nth-child(2) :first-child{
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
}
.sa >:nth-child(3) >:nth-child(2) :nth-child(2){
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #68fb99;
}
.sa >:nth-child(3) >:nth-child(2) :last-child{
    color: white;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
}

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

.sa >:nth-child(3) >:last-child{
    width: 230px;
    height: 55px;
    background-color: white;
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin-top: 20px;
}

.sa >:nth-child(3) >:last-child p{
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
    width: 93%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #68fb99;
    color: black;
    font-weight: bold;
    font-size: 17px;
}

.sa >:nth-child(3) >:last-child:hover p{
    background-color: white;
    transition-duration: 1s;
}

/* ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; */

.sa >:last-child{
    width: 100vw;
    height: 150vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 100px;
/* background-color: aqua; */
}

.sa >:last-child >:first-child{
    width: 35%;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

.sa >:last-child >:first-child >:first-child p{
    font-size: 55px;
    font-weight: bold;
    letter-spacing: 1.4px;
    color: white;
    text-transform: uppercase;
}
.sa >:last-child >:first-child >:nth-child(2){
    margin-top: 30px;
}
.sa >:last-child >:first-child >:nth-child(2) p{
    font-style: 20px;
    font-weight: bold;
    color: #a2a9af;
    letter-spacing: 1.5px;
}

.sa >:last-child >:first-child >:nth-child(3){
    width: 200px;
    height: 50px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
    background-color: white;
    align-self: flex-start;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 30px 0px;
}

.sa >:last-child >:first-child >:nth-child(3) p{
    width: 95%;
    height: 93%;
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
    background-color: #faa706;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: black;
}

.sa >:last-child >:first-child >:nth-child(3):hover p{
    background-color: #68fb99;
    transition: 1s;
}

.sa >:last-child >:first-child >:last-child{
    margin-top: 20px;
    animation: awe 5s infinite alternate ;
}
.sa >:last-child >:first-child >:last-child img{
    width: 30vw;
    height: 35vh;
}

@keyframes awe{
    0%{
        translate: 0px 0px;
    }
    100%{
        translate: 0px 10px;
    }
}

/* ppppppppppppppppppppppppppppppppppppppppppppppppppppp */

.sa >:last-child >:last-child{
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 25px;
    align-self: flex-start;
}

.sa >:last-child >:last-child >div{
    display: flex;
    width: 100%;
    position: relative;
    background-color: #1b242e;
    border-radius: 20px;
    
}


.season1 , 
.season2 , 
.season3{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding:50px ;
}

.season1 p , 
.season2 p , 
.season3 p{
    font-size:26px;
    line-height: 1px;
    font-weight: bold;
    align-self: flex-start;
    color: white;
    margin: 0px 0px 20px ;
}
.season1 ol , 
.season2 ol , 
.season3 ol{
    list-style-type: none;
}

.season1 ol li , 
.season2 ol li , 
.season3 ol li{
    font-size: 16px;
    color: #a2a9af;
    font-weight: bold;
    margin: 15px 0px;
    position: relative;
    margin-left: 30px;
}

.l1::before{
    position: absolute;
    left: -30px;
    content: '';
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #68fb99;
}
.l2::before{
    position: absolute;
    left: -30px;
    content: '';
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #10161c;
    border: #262e38 solid 2px;
}



.im1{
    height: 220px;
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: .3;
}

.im2{
    height: 220px;
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 0;
}
.season2:hover .im2 , 
.season3:hover .im2{
    opacity: .3;
    transition: 1s;
}

.l1:hover.l1::before{
    background-color: #faa706;
    transition: .5s;
}

/* [[[[[[[[[[[[[[[[]{{{{{{{{{{{{[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ */

.zz{
    width: 100vw;
    height: 100vh;
    background-color: #10181f;
    display:flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 0px 100px;
}

.top{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    /* background-color: #68fb9a; */
    position: relative;
}

.top div{
    display: flex;
    gap: 20px;
}

.top p{
    font-size: 35px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.top img{
    width: 30px;
    height: 40px;
}
.top >:last-child{
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top >:last-child div{
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: #adb0bc solid 2px;
    color: #adb0bc;

}
.top >:last-child div i{
    /* color: #a2a9af; */
    font-size: 18px;
}

.top >:last-child div:hover{
    border: #68fb99 solid 2px;
    color: #68fb99;
}

.bot{
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}


.za{
    width: 25vw;
    height: max-content;
    display: flex;
    flex-direction: column;
    background-color: #19222b;
    padding: 20px;
    border-radius: 15px;
    border-bottom-right-radius: 130px;
}

.za >:first-child{
    display: flex;
    align-items: center;    
    gap: 10px;
    position: relative;
}
.za >:first-child p{
    color: white;
    font-size: 18px;
    font-weight: bold;
}
.za >:first-child a{
    color: #adb0bc;
}
.za >:first-child i{
    position: absolute;
    right: 0;
    color: #adb0bc;
}
.za >:first-child i:hover{
    color: #68fb99;
}
.za >:nth-child(2){
    position: relative;
    margin: 10px 0px;
}
.za >:nth-child(2) img{
    border-radius: 10px;
    width: 100%;
}
.za >:nth-child(2)::after{
    position: absolute;
    bottom: -10px;
    left: 30px;
    content: '';
    width: 70%;
    height: 1px;
    background: linear-gradient(to right , transparent , #adb0bc76 , transparent);
}



.za >:last-child{
    display: flex;
    position: relative;
    margin-top: 10px;
}

.za >:last-child >div{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.za >:last-child >div >p{
    color: #adb0bc;
    font-style: 13px;
    font-weight: bold;
    /* line-height: 1px; */
}
.za >:last-child >div >div{
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
}
.za >:last-child >div >div i , 
.za >:last-child >div >div div :last-child{
    color: #faa706;
}



.za >:last-child >a{
    position: absolute;
    right: 40px;
    text-decoration: none;
    width: 85px;
    height: 45px;
    padding: 10px;
    background-color: #faa706;
    border-radius: 10px;
}

.za >:last-child >a div{
    display: flex;
    font-size: 18px;
    font-weight: bold;
    gap: 7px;
    justify-content: center;
    align-items: center;
    color: black;
}

.za >:last-child >a:hover{
     background-color: #68fb99;
     transition: 1s;
}


/* [[[[[[[[[[[[[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]][ */


footer{
    width: 100vw;
    height: 70vh;
    background-color:#0f151a;
    padding: 50px 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 5vw;
}
footer >:first-child{
    display: flex;
    flex-direction: column;
    gap:30px ;
    width: 27.5%;
    margin-left: 20px;
    position: relative;
}
footer >:first-child >:first-child a img{
width: 170px;
}

footer >:first-child p{
    color: #adb0bc;
    font-size: 15px;
    line-height: 1.75em;
    font-weight: 400;
}

footer >:first-child >:nth-child(3) :first-child{
    color: white;
    font-weight: bold;
}

footer >:first-child >:nth-child(3) :nth-child(2) , 
footer >:first-child >:nth-child(3) :last-child{
    color: #68fb99;
    font-weight: bold;
}
footer >:first-child >:last-child{
    display: flex;
    gap: 15px;
}
footer >:first-child >:last-child a img{
    width: 30px;
    height: 30px;
}


footer >:nth-child(2) , 
footer >:nth-child(3){
    display: flex;
    flex-direction: column;
    gap: 14px;
}

footer >:nth-child(2) p , 
footer >:nth-child(3) p ,
footer >:last-child >:first-child{
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;

}
footer >:nth-child(2) a , 
footer >:nth-child(3) a{
    text-decoration: none;
    color: #adb0bc;
    font-size: 18px;
}


footer section a:hover{
    color: #68fb99;
    transition: .3s;
}

footer >:last-child{
    display: flex;
    flex-direction: column;
    width: 25%;
}

footer >:last-child >:nth-child(2){
    color: #adb0bc;
    margin-bottom: 20px;
}

footer >:last-child >:nth-child(3){
    display: flex;
    gap: px;
    width: 100%;
}
footer >:last-child >:nth-child(3) input{
    width: 80%;
    height: 50px;
    border-radius: 10px;
    background-color: #2c3137;
    font-size: 17px;
    color: #68fb9a;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #8a8c8e93;
}
footer >:last-child >:nth-child(3) button{
    width: 20%;
    height: 50px;
    border: 1px solid #8a8c8e93;
    background-color: transparent;
    border-radius: 10px;
    color: black;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #68fb99;
}

footer >:last-child >:nth-child(3) input::placeholder{
    color: rgba(255, 255, 255, 0.488);
    padding-left: 10px;
    /* font-size: 16px; */
}
footer >:last-child >:nth-child(3) input:focus{
    color: white;
    padding-left: 10px;
    font-size: 17px;
    background-color: #68fb9a;
    font-weight: bold;
}

footer >:last-child >:nth-child(3) button:hover{
    cursor: pointer;
    background-color: #faa706;
    transition: .5s;
}



.fin{
    width: 100vw;
    height: 60px;
    display: flex;
    padding: 20px 5vw;
    position: relative;
    background-color: #05090d;
    flex-wrap: wrap;

}
.fin >:first-child >:first-child{
    font-size: 17px;
    font-weight: bold;
    color: white;
}
.fin >:first-child >:last-child{
    font-size: 17px;
    font-weight: bold;
    color: #68fb99;
}
.fin >:last-child{
    position: absolute;
    right: 5vw;
}

.fi{
    position: fixed;
    right: 50px;
    bottom: 30px;
    width: 30px;
    height: 30px;
    background-color: #10181f;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;

}
.fi i{
    font-size: 50px;
    color: #68fb99; 
}
.fi:hover i{
    color: #faa706;
    transition: .5s;
}








@media(max-width:1195px){
    nav ol{
        display: none;
    }
    .a{
        position: relative;
        left: 150px;
    }
    .po{
        right: 10%;
    }
    .oo{
        opacity: 1;
        right: 5%;
        z-index: 1;
    }
    .s{
        height: 110vh;
    }
    .ai{
        height: max-content;
    }
    .s11{
        height: 150vh;
    }
    .s11 >:first-child img{
        width: 98vw;
        height: 400px;
    }
    .s11 >:last-child{
        position: absolute;
        top: 410px;
        left: 0;
        width: 100vw;
    }
    .s1{
        height: 300vh;
    }
    .sa >:nth-child(2){
        height: 110vh;
        padding: 0px;
    }
    .sa >:nth-child(2) >div{
        width: 342px;
    }
    .sa{
        height: 400vh;
    }
    .sa >:last-child{
       margin-bottom: 50px;
    }
    .za{
        width: 40vw;
    }
    .zz{
        height: 180vh;
    }
    footer >:last-child >:nth-child(3) input{
        font-size: 13px;
    }
    .sa >:last-child >:first-child >:last-child img{
        width: 30vw;
        height: 30vh;
    }


}

@media(max-width:1240px){
    .ai .ai1{
      width: 550px;
    }
}



@media(max-width:990px){
    .s{
        height: 180vh;
    }
    .po{
        right:15%;
    } 
    .oo{
        right: 10%;
    }
    .a2{
        left: 40%;
        top: 5%;
    }
    .bb{
        left: 30%;
        top: 12%;
    }
    .cc{
        left: 35%;
        top: 24%;
    }
    .dd{
        left: 40%;
        top: 29%;
    }
    .im{
        left: 30%;
        top: 35%;
    }
    footer{
        height: 70vh;
    }

    .zz{
        height: 170vh;
    }

    .za{
        width: 35vw;
    }
    .s11{
        padding: 0px 0px;
    }
    .s1{
        padding: 100px 10px;
    }
    
}
@media(max-width:820px){
    .sa >:nth-child(2){
      height: 230vh;
    }
    .sa{
        height: 500vh;
    }
    .ss >:first-child , 
    .ss>:last-child{
        opacity: 0;
    }

}

@media(max-width:770px){
    .a{
        position: relative;
        left: 0;
    }
    .po{
        right: 20%;
    }
    .oo{
        right: 2%;
    }
    .a2{
        left: 30%;
        top: 5%;
    }
    .bb{
        left: 20%;
        top: 12%;
    }
    .cc{
        left: 25%;
        top: 24%;
    }
    .dd{
        left: 30%;
        top: 29%;
    }
    .im{
        left: 20%;
        top: 35%;
    }
    .sa{
        height: 550vh;
    }
    footer{
        height: 130vw;

    }
    .fin{
    }

}