@import url('https://fonts.googleapis.com/css2?family=Karantina:wght@300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karantina:wght@300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    overflow-x: hidden;

}



:root {

    --white: #FFFFFF;

    --green: #C0F177;

    --black: #010101;

    --purple: #9747FF;

    --hover: #a2c76c;

    --karantina: 'Karantina', system-ui;

    --inter: "Inter", sans-serif;

    --roboto: "Roboto Condensed", sans-serif;

    --radius: 533.06px;

}



.btn {

    font-family: var(--inter);

}



.data_veryfy .btn:hover,

.nav .items .btn:hover ,

#hero_section .trailer_btn:hover{

    background-color: var(--hover);

    color: var(--white);

}



.nav .items li a:hover {

    color: var(--black);

}







#undefeated_image {

    position: relative;

    height: 200vh;

    min-height: 600px;

    background-image: url('../img/Background\ 2\ \(1\).png');

    background-repeat: no-repeat;

    border-bottom: 4px solid var(--black);

}



#bg_brown {

    position: relative;

    overflow-x: hidden;

    border-bottom: 4px solid var(--black);

}



#undefeated_image .overly,

#bg_brown .overly {

    position: absolute;

    top: 0;

    left: 0;

    background: linear-gradient(to bottom, rgba(156, 114, 96 , .72) 0%, #9C7260 100%);

    width: 100%;

    height: 100%;

    z-index: 1;

}







.nav {

    position: relative;

    z-index: 9;

}



.nav .header {

    border: 2px solid var(--white);

    border-radius: var(--radius);

}



.nav .items li a {

    color: var(--green);

    font-size: 14px;

    font-family: var(--inter);

}



.nav .items .btn {

    background-color: var(--green);

    border-radius: var(--radius);

    color: var(--black);

}



.nav .icons {

    display: none;

    position: relative;

}



.nav .icons .ico {

    position: absolute;

    top: -14px;

    left: -38px;

    cursor: pointer;

    z-index: 999;

}



#undefeated_image .announce {

    position: absolute;

    z-index: 9;

    top: 14%;

}



#hero_section {

    z-index: 9;

    transform: translateY(110px);

    position: relative;

}



#hero_section h1 {

    font-size: 230px;

    font-weight: 400;

    font-family: var(--karantina);

    color: var(--white);

    -webkit-text-stroke: 2px var(--black);

    margin-bottom: 0 !important;

    line-height: normal;

}



#hero_section h3 {

    font-size: 76px;

    font-weight: 400;

    font-family: var(--karantina);

    color: var(--white);

    line-height: normal;

    -webkit-text-stroke: 2px var(--black);

    margin-bottom: 0 !important;

}



#hero_section p {

    font-size: 35px;

    font-weight: 400;

    font-family: var(--inter);

    color: var(--white);

    font-weight: bold;

    margin-bottom: 0 !important;

    margin-top: 5px;

    line-height: normal;

}



#hero_section .trailer_btn {

    background-color: var(--green);

    border-radius: var(--radius);

    font-size: 24px;

}



#hero_section .more_btn {

    background-color: var(--black);

    border-radius: var(--radius);

    color: var(--white);

    font-size: 24px;

}



.footer_data .data_head h6 {

    font-size: 37px;

    font-family: var(--karantina);

}



.footer_data .data_head p {

    font-size: 30px;

    font-family: var(--karantina);

    transform: translateY(5px);

}



.footer_data .data_links p {

    font-size: 22px;

    font-family: var(--karantina);

}



.footer_data .data_links a {

    font-size: 15px;

    font-family: var(--karantina);

    color: var(--black);

}



.footer_data .data_links .insta img {

    padding: 9px;

    border-radius: 50%;

    border: 1px solid var(--black);

}



.social_icons .insta img {

    width: 59px;

}



.footer_data .data_links .insta .img_1 {

    background: var(--green);

}



.footer_data .data_links .insta .img_2 {

    background: var(--purple);

}



.data_arrow a {

    font-size: 25px;

    font-family: var(--karantina);

    color: var(--black);

    line-height: normal;

    display: block;

    font-weight: normal;

}



.data_veryfy {

    border: 1px solid var(--black);

    border-radius: 18.75px;

    padding: 10px;

}



.data_veryfy p {

    font-size: 10px;

    font-family: var(--inter);

    line-height: normal;

}



.data_veryfy .btn {

    background-color: var(--green);

    border-radius: var(--radius);

    font-size: 12px;

}



footer .line {

    width: 100%;

    height: 2px;

    background-color: black;

}



/* Photes page code start here */

#bg_brown {

    background-color: var(--black);

}



.main_slider h5 {

    font-family: var(--inter);

    color: var(--white);

    font-size: 17.98px;

}



.behind_scene {

    z-index: 1;

    position: relative;

}



.behind_scene h1 {

    font-size: 75.4px;

    font-family: var(--roboto);

    color: var(--white);

    z-index: 1;

}





.slider-wrapper {

    cursor: grab;

    user-select: none;

    margin-bottom: 5rem;

    width: 100%;

}



.slider-wrapper.active {

    cursor: grabbing;

}



.image-track {

    display: flex;

    gap: 17px;

    transition: transform 0.1s ease;

    width: max-content;

}



.image-track img {

    flex: 0 0 auto;

    width: 312px;

    height: 231px;

    object-fit: cover;

    border-radius: 10px;

    cursor: pointer;

    pointer-events: auto;

}



@media(max-width:1000px) {

    .slider-wrapper {

        overflow: hidden !important;

    }



}



/* Responsive adjustments */

@media (max-width: 768px) {

    .image-track img {

        width: 180px;

        height: 120px;

    }



    .behind_scene h1 {

        font-size: 54.4px;

    }

}



@media (max-width: 480px) {

    .image-track img {

        width: 150px;

        height: 100px;

    }

}



#overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.8);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

}



.image-popup-wrapper {

    position: relative;

    display: inline-block;

    width: 50%;

}



#overlay img {

    /* width: 50%; */

    border-radius: 10px;

    transition: all .3s ease;

    display: block;

    object-fit: contain;

}



#overlay .close-btn {

    position: absolute;

    top: 9px;

    right: 10px;

    font-size: 28px;

    width: 50px;

    height: 50px;

    cursor: pointer;

    z-index: 10;

    transition: all .3s ease;

}





/* resources code start here */



.heading_story h1 {

    font-size: 75.04px;

    font-family: var(--inter);

    color: var(--white);

    z-index: 1;

    position: relative;

}



.fate_txt {

    z-index: 1;

    position: relative;

}



.fate_txt p {

    font-size: 22.5px;

    font-family: var(--roboto);

    color: var(--white);

    font-weight: 500;

    line-height: 65.7px;

}



.fate_txt span {

    color: var(--green);

}



.fate_txt .left_image {

    position: absolute;

    right: 0;

    top: 11px;

}



.fate_txt .right_image {

    position: absolute;

    left: 0;

    bottom: 66px;

}



.main_slider,

.image-track {

    z-index: 1;

    position: relative;

}



.heading_story span {

    color: var(--green);

}



.heading_story p {

    font-family: var(--roboto);

    font-size: 37.5px;

    font-weight: 600;

    color: var(--green);

    z-index: 1;

}



/* news section start here */

.news_section {

    z-index: 1;

    position: relative;

}



.news_section .news a,

.news_section .news span {

    font-size: 33.75px;

    line-height: normal;

    font-family: var(--roboto);

}



.news_section .news a {

    color: var(--green);

}



.news_section .news span {

    color: var(--white);

}









#overly .image-popup-wrapper:hover .white_cross {

    display: none;

}



#overly .image-popup-wrapper:hover .black_cross {

    display: block;

}



#overly .white_cross,

#overly .black_cross {

    transition: all 0.3s ease;

}



















/* media query start here */



@media(max-width:996px) {

    #undefeated_image .announce {

        top: 12%;

    }



    #hero_section h1 {

        font-size: 150px;

    }



    #hero_section h3 {

        font-size: 50px;

    }



    #hero_section p {

        font-size: 24px;

    }



    .data_head {

        justify-content: center;

    }



    .heading_story h1 {

        font-size: 60.04px;

    }



    .fate_txt p {

        font-size: 19.5px;

        line-height: 37.7px;

    }



    .heading_story p {

        font-size: 32.5px;

    }



    .news_section .news a,

    .news_section .news span {

        font-size: 27.75px;

    }

}



@media(max-width:1400px) and (min-width:997px) {

    #hero_section p {

        margin-top: 48px;

    }



    #hero_section .btn {

        padding-left: 29px;

        padding-right: 29px;

    }

    .news .text{

        padding-left: 78px !important;

        padding-right: 78px !important;

    }

}









@media(max-width: 768px) {

    .poster_image {

        display: flex;

        align-items: flex-end;

        justify-content: flex-end;

    }



    .slider-wrapper {

        margin-bottom: 3rem;

    }



    .heading_story h1 {

        font-size: 49.04px;

    }



    .fate_txt p {

        font-size: 16.5px;

        line-height: 35.7px;

    }



    .fate_txt .left_image {

        right: 0;

        top: 0;

        width: 75px;

    }



    .fate_txt .right_image {

        left: 0;

        bottom: 0;

        width: 75px;

    }



    .heading_story p {

        font-size: 28.5px;

    }

}



@media(max-width: 576px) {

    #undefeated_image {

        height: 100%;

        min-height: auto !important;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: bottom;

    }



    #hero_section {

        transform: translateY(0px);

    }



    .nav .icons {

        display: block;

        position: relative;

    }



    #cross {

        display: none;

    }



    #hero_section {

        z-index: 1;

    }



    .nav .items {

        position: fixed;

        flex-direction: column;

        top: 0;

        left: 0;

        background: black;

        width: 100%;

        padding: 30px;

        height: 100%;

        left: -200%;

        transition: all .3s ease;

        z-index: 999;

    }



    #undefeated_image .announce {

        top: 17%;

        width: 47px;

    }



    #hero_section h1 {

        font-size: 80px;

    }



    #hero_section h3 {

        font-size: 40px;

    }



    #hero_section p {

        font-size: 16px;

    }



    #hero_section .trailer_btn,

    #hero_section .more_btn {

        font-size: 15px;

    }



    .footer_data .data_head h6 {

        font-size: 28px;

    }



    .footer_data .data_head p {

        font-size: 22px;

        line-height: normal;

    }



    .data_arrow a {

        font-size: 22px;

    }



    /* code of carasoul */

    .behind_scene h1 {

        font-size: 28px;

    }



    #overlay .close-btn {

        width: 23px !important;

        height: 23px !important;

    }



    .heading_story h1 {

        font-size: 36.04px;

    }



    .fate_txt p {

        font-size: 14.5px;

        line-height: normal;

    }



    .fate_txt .left_image {

        right: 9px;

        top: -8px;

        width: 53px;

    }



    .fate_txt .right_image {

        left: 11px;

        bottom: 7px;

        width: 53px;

    }



    .heading_story p {

        font-size: 22.5px;

    }



    .news_section .news a,

    .news_section .news span {

        font-size: 22.75px;

    }



    .nav .items li a:hover {

        color: var(--white);

    }

}