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

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Signika Negative', sans-serif;
    text-align: center;
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
    width: 100%;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: #f2f2f2;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: grey; 
}

/* ------------------------------------------preloader------------------------------------------------------------- */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #06202e;
    z-index: 9999;
}

#role1 {
    position: absolute;
    top: 25%;
    /* font-size: 100px;; */
}

.tw {
    width: 100%;
    height: 100vh;
    position: relative;
}

#progress {
    position: absolute;
    top: 45%;
}

#progressBar {
    position: absolute;
    top: 50%;
    width: 0%;
    height: 7px;
    background-color: #f8e9e6;
    margin: 10px;
    border-radius: 10px;
}


/* ------------------------------------------------main-section------------------------------------------------- */
#main {
    position: relative;
    overflow: hidden;
    /* max-height: 100vh; */
    /* overflow-y: scroll;
    scroll-snap-type: y mandatory; */
}

/* -------------------------------section-1-2-3------------------------------------------ */

.section {

    position: relative;

    height: 252vh;

    width: 100vw;

    background-image: url('images/background for section-1,2,3/wrirk-bg02.jpg');

    background-size: 100%;

    background-attachment:scroll;

    background-position: inherit;
}


.section h1 {

    color: #ff9900;

    font-weight: 800;

    text-align: center;

    font-size: clamp(16px, 8vw + 1rem, 74px);

    line-height: 70px;

    position: relative;
}

.section .text-1 {

    font-size: clamp(16px, 8vw + 1rem, 104px);
}

.section>.t0 {

    position: absolute;

    top: 20%;
}

.contact-link {
    position: fixed;
    top:3%;   
    overflow: hidden;
    right:5%;
    z-index: 35;
    border-radius: 50px;
    padding:5px 28px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    border:0.1px solid rgba(255, 255, 255, 0.288);
    background-color: #000;
    transition: background-color 0.3s ease;
}



#con1 a span{
    position:relative;
    font-weight: 100;
    z-index: 36;
}


#scroll-down-bt i{
    border: 1px solid #f2f2f2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section>.t1 {

    position: absolute;

    top: 45%;
}


.section>.t2 {

    position: absolute;

    top: 55%;

}

/* ----------------------------------section-4----------Text-Phase-I------------------------------------ */

.section-4 {
    position: relative;
    height: 103vh;
    width: 100vw;
    background-color: #e3eeee;
    margin: 0;
    z-index: 1;
}

#space1 {
    position: relative;
    height: 97vh;
    width: 100vw;
    background-color: #e3eeee;
}

/* img {
    width: 100%;
} */

.section-4-for-mobile {
    display: none;
}

/* ----------------------------------section-5-----------Card-Phase-I----------------------------------------- */

.section-5 {
    position: relative;
    height: 140vh;
    width: 100vw;
    margin: 0;
    background-color: rgb(235, 243, 247);
    z-index: 3;
}

#space2 {
    position: relative;
    height: 25vh;
    width: 100vw;
    background-color: rgb(235, 243, 247);
    z-index: 2;

}

.section-5-for-mobile {
    display: none;
}

/* -----------------------------------section-6-------------Image-Phase-I--------------------------------------------------------------- */

.section-6 {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: #ebcc38;
    z-index: 6;
    /* border:5px solid green; */
}


#space3 {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 5;
    /* border:5px solid black; */
}


#space4 {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 4;
    /* border:5px solid red; */
}

.fixed-canvas {
    position: fixed;
    top: 1%;
    transform: translateY(-99%);
    left:50%;
    transform: translateX(-49.5%);
}

.fixed-canvas-for-mobile {
    position: fixed;
    top: 3%;
    transform: translateY(-96.5%);
    left:50%;
    transform: translateX(-49.5%);
}

/* -------------------------------------section-7------------Text-Phase-II--------------------------------------------------------------- */

.section-7 {
    position: relative;
    height: 103vh;
    width: 100vw;
    margin: 0;
    background-color: #e3eeee;
    z-index: 8;
}

#space5 {
    position: relative;
    height: 97vh;
    width: 100vw;
    background-color: #e3eeee;
    z-index: 7;
}

.section-7-for-mobile {
    display: none;
}

/* -------------------------------------section-8--------------Card-Phase-II-------------------------------------------------------------- */

.section-8 {
    position: relative;
    height: 140vh;
    width: 100vw;
    margin: 0;
    background-color: rgb(235, 243, 247);
    z-index: 10;
}

#space6 {
    position: relative;
    height: 24vh;
    width: 100vw;
    background-color: rgb(235, 243, 247);
    z-index: 9;
}

.section-8-for-mobile {
    display: none;
}

/* -------------------------------------section-9----------------Image-Phase-II------------------------------------------------------------------- */

.section-9 {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: #ebcc38;
    z-index: 13;
    /* border:5px solid green;  */
}

#space7 {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 12;
    /* border:5px solid black; */
}

#space8 {
    position: relative;
    height: 80vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 12;
    /* border:5px solid rgb(10, 123, 189); */
}

#space9 {
    position: relative;
    height: 40vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 11;
    /* border:5px solid red; */
}

.fixed-canvas1 {
    position: fixed;
    top: 1%;
    transform: translateY(-99%);
    left:50%;
    transform: translateX(-49.5%);
}

.fixed-canvas1-for-mobile {
    position: fixed;
    top: 3%;
    transform: translateY(-96.5%);
    left:50%;
    transform: translateX(-49.5%);
}

/* --------------------------------------section-10---------------Text-Phase-III------------------------------------------------------------------------------ */

.section-10 {
    position: relative;
    height: 103vh;
    width: 100vw;
    margin: 0;
    background-color: #e3eeee;
    z-index: 15;

}

#space10 {
    position: relative;
    height: 102vh;
    width: 100vw;
    background-color: #e3eeee;
    z-index: 14;

}

.section-10-for-mobile {
    display: none;
}

/* ---------------------------------------section-11--------------Card-Phase-III--------------------------------------------------------------------------------*/

.section-11 {
    position: relative;
    height: 140vh;
    width: 100vw;
    margin: 0;
    background-color: rgb(235, 243, 247);
    z-index: 17;

}

#space11 {
    position: relative;
    height: 22vh;
    width: 100vw;
    background-color: rgb(235, 243, 247);
    z-index: 16;

}

.section-11-for-mobile {
    display: none;
}

/* ---------------------------------------section-12--------------Image-Phase-III-------------------------------------------------------------------------- */

.section-12 {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: #ebcc38;
    z-index: 20;
    /* border:5px solid green; */
}

#space12 {
    position: relative;
    height: 60vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 19;
    /* border:5px solid black; */
}

#space13 {
    position: relative;
    height: 55vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 18;
    /* border:5px solid rgb(138, 26, 26); */
}

.fixed-canvas2 {
    position: fixed;
    top: 1%;
    transform: translateY(-99%);
    left:50%;
    transform: translateX(-49.5%);
}

.fixed-canvas2-for-mobile {
    position: fixed;
    top: 3%;
    transform: translateY(-96.5%);
    left:50%;
    transform: translateX(-49.5%);
}

/* ---------------------------------------section-13---------------Text-Phase-IV------------------------------------------------------------------- */

.section-13 {
    position: relative;
    height: 103vh;
    width: 100vw;
    margin: 0;
    background-color: #e3eeee;
    z-index: 22;
}

#space14 {
    position: relative;
    height: 97vh;
    width: 100vw;
    background-color: #e3eeee;
    z-index: 21;
}

.section-13-for-mobile {
    display: none;
}

/* ----------------------------------------section-14--------------Card-Phase-IV--------------------------------------------------------- */

.text11 {
    position: absolute;
    top: 0;
    z-index: 26;
}

.section-14 {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: #e3eeee;
    z-index: 25;
    /* border: 2px solid rgb(221, 38, 38); */
}

.section-14-mobile {
    position: relative;
    height: 255vh;
    width: 100vw;
    margin: 0;
    background-color: #e3eeee;
    z-index: 25;
    /* border: 2px solid rgb(221, 38, 38); */
}

.section-14-for-mobile {
    display: none;
}

/* -----------------------------------------section-15-------------Card-Phase-IV----------------------------------------------- */

.section-15 {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: #e3eeee;
    z-index: 24;
    /* border: 2px solid black; */
}



#space15 {
    position: relative;
    height: 20vh;
    width: 100vw;
    background-color: #e3eeee;
    z-index: 23;
    /* border: 2px solid rgb(108, 119, 221); */
}


/* ------------------------------------------section-16------------Image-Phase-IV------------------------------------------------ */

.section-16 {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: #ebcc38;
    z-index: 29;
    /* border:5px solid green; */
}

#space16 {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 28;
    /* border:5px solid black; */
}


#space17 {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #ebcc38;
    z-index: 27;
    /* border:5px solid red; */
}

.fixed-canvas3 {
    position: fixed;
    top: 1%;
    transform: translateY(-99%);
    left:50%;
    transform: translateX(-49.5%);
}

.fixed-canvas3-for-mobile {
    position: fixed;
    top: 3%;
    transform: translateY(-96.5%);
    left:50%;
    transform: translateX(-49.5%);
}

/* ----------------------------------------------------------for mobile view------------------------------- */

@media only screen and (max-width: 576px) {
    .section-4-for-mobile {
        display: block;
    }

    .section-4-for-desktop {
        display: none;
    }

    .section-5-for-mobile {
        display: block;
    }

    .section-5-for-desktop {
        display: none;
    }

    .section-7-for-mobile {
        display: block;
    }

    .section-7-for-desktop {
        display: none;
    }

    .section-8-for-mobile {
        display: block;
    }

    .section-8-for-desktop {
        display: none;
    }

    .section-10-for-mobile {
        display: block;
    }

    .section-10-for-desktop {
        display: none;
    }

    .section-11-for-mobile {
        display: block;
    }

    .section-11-for-desktop {
        display: none;
    }

    .section-13-for-mobile {
        display: block;
    }

    .section-13-for-desktop {
        display: none;
    }

    .section-14-for-mobile {
        display: block;
    }

    .section-14-for-desktop {
        display: none;
    }

    /* .section-15-for-mobile {
        display: block;
    } */

    .section-15-for-desktop {
        display: none;
    }

    img {
        width: 80%;
    }

    .img1 {
        width: 65%;
    }

}