:root {
    --white: #fff;
    --black: #000;
    --darkgrey: #707070;
}


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


body {
    font-family: 'Satoshi', sans-serif;
    background: #F3F6FF;

}

img {
    width: 100%;
    max-width: 100%;
}


section {
    text-align: center;
}

.logo {
    margin: 0;
}

.logo a img {
    width: 170px;
}


.hero-sec {
    padding: 70px 0 0 0;
}

.hero-sec h2 {
    margin: 180px 0 0 0;
    font-size: 140px;
    line-height: 170px;
    font-weight: 500;
    color: var(--black);
    position: relative;
    z-index: -1;
    letter-spacing: 15px;
}



.hill1 {
    position: relative;
    margin-top: -76px;
    /* margin-top: -265px; */
}

.btl-area:before {
    content: '';
    position: absolute;
    top: -335px;
    left: 0;
    width: 100%;
    height: 338px;
    background: url(../images/grdent-bg.png) no-repeat;
    background-size: cover;

}


.btl-area.scrolled:before {
    /* height: 0; */
    /* transform: translate(-400px);
    -webkit-transform: translate(-400px);
    -moz-transform: translate(-400px);
    -ms-transform: translate(-400px);
    -o-transform: translate(-400px); */
    opacity: 0;
}



.btl-area {
    background: linear-gradient(180deg, #353535 32%, #4b4b4b 100%, rgb(0, 0, 0, .0) 0);
    position: relative;
}

.btl-area.scrolled {
    background: transparent;
}

.btl-wrpr {
    position: relative;
    z-index: 12;
    justify-content: center;
    align-items: center;
}

.btl-wrpr .img-col img {
    width: 200px;
    margin-top: -210px;
}

.btl-wrpr .txt-col {
    padding-inline: 75px;
    margin-top: -295px;
}

.btl-wrpr .txt-col.last {
    margin-top: -140px;
}

.btl-area.scrolled .btl-wrpr .txt-col {
    margin-top: 0;
}

.btl-wrpr .txt-col p {
    margin: 0;
    font-size: 35px;
    line-height: 40px;
    font-weight: 400;
    color: var(--white);
    letter-spacing: 12px;
    /* letter-spacing: 6px; */
}

.btl-area.scrolled .btl-wrpr .txt-col p {
    /* text-shadow: 3px 1px 1px #ddd;
    color: var(--black); */

    text-shadow: 3px 1px 1px #000;
}

.section-titl2 {
    color: var(--white);
    font-size: 88px;
    line-height: 107px;
    margin-bottom: 54px;
    letter-spacing: 14px;
}

.common-sec {
    position: relative;
    padding: 458px 0 170px;
    height: auto;
    transition: height 0.3s ease;
    overflow: hidden;
    height: 100vh;
    position: sticky;
    top: 0;
}

.common-sec.fullscreen {
    height: 100vh;
}



.sectionbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.common-sec .container {
    position: relative;
    z-index: 12;
}

.sublist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sublist li {
    color: var(--white);
    margin-bottom: 58px;
    position: relative;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 5px;
}

.sublist li:last-child {
    margin-bottom: 0;
}

.sublist li:before {
    content: '';
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    width: 1px;
    height: 40px;
    background: var(--white);
}

.sectitl {
    font-size: 60px;
    line-height: 72px;
    color: var(--black);
    margin-bottom: 90px;
    letter-spacing: 3px;
    font-weight: 500;
}

.plnt-txt-wrpr {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
}

.plnt-txt-wrpr .txt {
    margin-right: 60px;
    width: 49%;
}

.plnt-txt-wrpr .txt:last-child {
    margin-right: 0;
}

.plnt-txt-wrpr p {
    /* text-align: left; */
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 1px;
    text-align: justify;
}

.hill2 {
    position: relative;
    z-index: 123;
    margin-top: -176px;
}

.hill2-wrpr {
    position: relative;
}

.hill2-wrpr:before {
    content: '';
    position: absolute;
    left: 0;
    top: -5px;
    width: 100%;
    height: 314px;
    background: #363636;
    z-index: 12;
}

.btl-area:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 314px;
    background: url(../images/grdent-bg2.png) no-repeat;
    /* background: url(../images/grdent-bg.png) no-repeat; */
    background-size: cover;
    z-index: 12;
}

.active-next-section .sectionbg {
    opacity: .5;
    transition: .9s ease-in-out;
    -webkit-transition: .9s ease-in-out;
    -moz-transition: .9s ease-in-out;
    -ms-transition: .9s ease-in-out;
    -o-transition: .9s ease-in-out;
}

.active-next-section :is(.section-titl2, .sublist li) {
    text-shadow: 1px 1px 13px #426973;
}

.planet-sec {
    position: relative;
    /* top: 20px; */
    z-index: -1;
}


.notsticky+.hill1 {
    margin-top: 0;
}

.hill3 {
    margin-top: -40px;
}


/* conatct section */

.contact-sec {
    background: #f3f6ff;
    padding: 225px 0;
    z-index: 1;
}

.contact-sec .section-titl2 {
    color: var(--black);
    font-size: 56px;
    line-height: 67px;
    letter-spacing: 12px;
    margin-bottom: 79px;
}

.contact-frm {
    width: 100%;
    max-width: 520px;
    display: table;
    margin: 0 auto;
}

.contact-frm input {
    width: 100%;
    border: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-bottom: 1px solid var(--black);
    background: transparent;
    padding: 10px 5px;
    letter-spacing: 2px;
    font-size: 35px;
}

.contact-frm input+label {
    position: relative;
    top: -47px;
    left: 10px;
    pointer-events: none;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    /* opacity: .6; */
    letter-spacing: 2px;
    font-size: 36px;
    line-height: 44px;
    color: #CCCCCC;
}

.contact-frm input:focus {
    outline: none;
}

.contact-frm input:focus+label,
.contact-frm input:visited+label, .contact-frm input:valid+label {
    top: -95px;
    left: 5px;
    font-weight: 600;
    opacity: 1;
    color: #000;
}

.contact-frm label {
    text-align: left;
    display: block;
}

.contact-frm .form-group {
    position: relative;
}

.contact-frm .help-block {
    text-align: left;
    position: absolute;
    bottom: 11px;
    font-size: 14px;
    color: #ff0000;
}

.contact-frm input[type="submit"], .contact-frm button {
    width: 225px;
    background: #000;
    color: #fff;
    letter-spacing: 3px;
    transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    font-size: 24px;
    border: none;
    padding: 10px;
}

.contact-frm input[type="submit"]:hover, .contact-frm button:hover {
    background: #2a2424;
}

.contact-frm .form-group:last-child {
    margin-top: 107px;
}

.contact-frm .form-group.has-error :is(input, select, textarea) {
    border-color: #ff0000;
}

.contacthill {
    margin-top: -64px;
}

.footercpyright {
    color: #fff;
    position: absolute;
    z-index: 12;
    bottom: 30px;
    width: 100%;
}

.footercpyright p {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: 18px;
}

.footercpyright p span {
    letter-spacing: 2px;
}

.footercpyright span img {
    width: 100px;
}

.footercpyright span em {
    font-style: normal;
}

/* start responsive */


@media(min-height:1050px) and (max-height:1080px) {
    .contacthill {
        margin-top: -200px;
    }
}


@media(min-width:2000px) {
    .btl-area:before {
        background: url(../images/grdent-bg.png) no-repeat;
        background-size: cover;
        background: linear-gradient(0deg, #353535, transparent);
    }

    .hill2-wrpr:before {
        background: linear-gradient(-180deg, #3d3d3d 70%, #373737);
    }



    .btl-area.scrolled:before {
        opacity: 1;
    }

    .btl-area.scrolled:after {
        opacity: 0;
    }

    .btl-wrpr {
        display: flex;
    }

    .btl-area.scrolled .btl-wrpr .txt-col {
        margin-top: -150px;
    }

    .btl-area.scrolled .btl-wrpr .txt-col.last {
        margin-top: 32px;
    }


    .btl-wrpr .img-col img {
        width: 350px;
        margin-top: -390px;
    }

    .btl-wrpr .txt-col p {
        font-size: 55px;
    }

    .hill2-wrpr:before {
        background: linear-gradient(-180deg, #3b3b3b 70%, #373737);
        height: 500px;
    }

    .contacthill {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}





@media(min-width:1500px) {
    .hill2 {
        margin-top: -191px;
    }

    /* .hill2-wrpr:before {
        background: linear-gradient(-180deg, #383838 70%, #373737);
    } */

    .hill2-wrpr:before {
        background: linear-gradient(0deg, #444444 70%, #444444);
    }


}


@media(max-width:1500px) {
    .logo a img {
        width: 130px;
    }

    .hero-sec {
        padding-top: 5px;
    }

    .hero-sec h2 {
        margin-top: 170px;
        font-size: 70px;
        line-height: 82px;
        font-weight: 500;
    }

    .common-sec {
        padding: 155px 0 70px;
    }

    .hill2 {
        margin-top: -191px;
    }

    .hill1 {
        margin-top: -44px;
    }

    .btl-wrpr .txt-col {
        padding-inline: 35px;
    }

    .plnt-txt-wrpr {
        max-width: 80%;
    }

    .contact-sec {
        background: #f3f6ff;
        padding: 70px 0;
    }


    .hero-sec h2 {
        letter-spacing: 8px;
    }

    .section-titl2 {
        letter-spacing: 10px;
    }

    .contact-sec .section-titl2 {
        margin-bottom: 40px;
    }

    .contact-frm input+label {
        font-size: 25px;
        line-height: 30px;
        top: -40px;
    }

    .contact-frm input {
        font-size: 22px;
    }

    .contact-frm input:focus+label, .contact-frm input:visited+label, .contact-frm input:valid+label {
        top: -72px;
    }

    .contact-frm .form-group:last-child {
        margin-top: 50px;
    }

    .plnt-txt-wrpr .txt {
        margin-right: 28px;
    }

    .planet-sec .sectitl {
        font-size: 52px;
        margin-bottom: 40px;
        font-weight: 500;
    }

    .plnt-txt-wrpr p {
        font-size: 22px;
        font-weight: 350;
        line-height: 28px;
        letter-spacing: 2px;
    }
}

@media(max-width:1400px) {

    .hero-sec h2 {
        margin-bottom: 35px;
    }

    /* .hill2 {
        margin-top: -166px;
    } */

    .sectitl {
        font-size: 52px;
    }

    .plnt-txt-wrpr p {
        font-size: 22px;
        line-height: 34px;
    }

    .hill1 {
        margin-top: -82px;
    }

    .plnt-txt-wrpr {
        max-width: 95%;
    }
}

@media(max-width:1300px) {
    .hero-sec h2 {
        margin-bottom: 0;
    }

    .btl-wrpr .txt-col p {
        line-height: 50px;
    }

    .btl-area.scrolled .btl-wrpr .txt-col {
        margin-top: 300px;
    }

    .contacthill {
        position: absolute;
        left: 0;
        bottom: -150px;
        width: 100%;
    }

    .contact-frm {
        max-width: 400px;
    }

    .plnt-txt-wrpr {
        max-width: 97%;
    }

    .btl-wrpr .txt-col p {
        font-size: 30px;
    }

    .planet-sec .sectitl {
        margin-bottom: 25px;
    }

    .hill1 {
        margin-top: -44px;
    }

    .common-sec {
        padding: 70px 0;
    }
}


@media(max-width:1199px) {
    .hero-sec h2 {
        margin-bottom: 84px;
    }

    .contacthill {
        bottom: -75px;
    }
}




@media only screen and (min-device-width: 992px) and (max-device-width: 1024px) and (orientation:portrait) {
    .hill1 {
        height: 1000px;
    }


    .btl-area.scrolled .btl-wrpr .txt-col {
        margin-top: 0;
    }

    .btl-area.scrolled .btl-wrpr .txt-col p {
        color: var(--black);
        text-shadow: none;
        font-weight: 600;
    }


}

@media(max-width:1023px) {

    .common-sec {
        padding: 65px 0 15px;
    }

    .hero-sec h2 {
        font-size: 58px;
        line-height: 70px;
        margin-bottom: 12px;
    }

    .btl-wrpr .txt-col p {
        font-size: 24px;
        line-height: 34px;
        letter-spacing: 7px;
    }

    .section-titl2 {
        font-size: 60px;
    }

    .sublist li {
        font-size: 25px;
    }

    .plnt-txt-wrpr {
        max-width: 100%;
    }

    .logo {
        margin-bottom: 0;
    }

    .footercpyright p {
        font-size: 16px;
    }

    .contacthill {
        height: 35%;
        object-fit: cover;
    }

    .hero-sec h2 {
        letter-spacing: 6px;
    }

    .section-titl2 {
        letter-spacing: 8px;
    }

    .sublist li {
        letter-spacing: 4px;
    }

}

@media(max-width:850px) {


    .btl-area.scrolled-mobile .btl-wrpr .txt-col p {
        color: var(--black);
        font-weight: 500;
    }

    .btl-area::after {
        opacity: 1;
        top: -2px;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        display: none;
    }


    .scrolledmb .btl-area::after {
        top: 100px;
        opacity: 0;
        transition: .2s ease-in-out;
        -webkit-transition: .2s ease-in-out;
        -moz-transition: .2s ease-in-out;
        -ms-transition: .2s ease-in-out;
        -o-transition: .2s ease-in-out;
    }

    .scrolledmb .hill1 {
        opacity: 0;
    }

    .btl-area.scrolled .btl-wrpr .txt-col {
        z-index: 123;
    }

    .hill2-wrpr:before {
        top: -25px;
        height: 135px;
    }

    .hill2 {
        margin-top: -138px;
    }

    .contacthill {
        bottom: 0;
    }

    .plnt-txt-wrpr p {
        text-align: left;
    }
}

@media(max-width:767px) {
    .logo a img {
        width: 115px;
    }

    .hero-sec h2 {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 186px;
    }

    .hill2 {
        margin-top: 0;
    }

    /* .hill2 {
        margin-top: 30px;
    } */

    .btl-area:before {
        top: -198px;
        height: 200px;
        z-index: -12;
    }

    .btl-wrpr {
        flex-wrap: wrap;
    }

    .btl-wrpr .txt-col {
        width: 35%;
        padding: 0;
        position: relative;
        margin-top: -175px;
        top: 55px;
        transition: .1s ease-in-out;
        -webkit-transition: .1s ease-in-out;
        -moz-transition: .1s ease-in-out;
        -ms-transition: .1s ease-in-out;
        -o-transition: .1s ease-in-out;
    }

    .btl-wrpr .txt-col.last {
        margin-top: -115px;
    }

    .btl-wrpr .txt-col p {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 4px;
    }

    .btl-wrpr .img-col img {
        width: 56px;
    }

    .btl-area {
        background: transparent;
        z-index: 123;
    }

    .btl-area::after {
        bottom: 26px;
        z-index: -1;
        display: none;
    }

    .plnt-txt-wrpr {
        flex-wrap: wrap;
    }

    .sectitl {
        font-size: 28px;
        line-height: 35px;
        margin-bottom: 15px;
    }

    .section-titl2 {
        font-size: 32px;
        line-height: 65px;
        margin-bottom: 25px;
    }

    .sublist li {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .sublist li:before {
        height: 22px;
        top: -27px;
    }

    .plnt-txt-wrpr p {
        font-size: 17px;
        line-height: 25px;
        text-align: center;
    }

    .plnt-txt-wrpr .txt {
        margin: 0 0 10px 0;
    }

    .mineral-top {
        height: 375px;
    }

    .mineral-top img {
        object-fit: cover;
        height: 100%;
        object-position: center;
    }

    .btl-wrpr .txt-col p {
        transition: .8s ease-in-out;
        -webkit-transition: .8s ease-in-out;
        -moz-transition: .8s ease-in-out;
        -ms-transition: .8s ease-in-out;
        -o-transition: .8s ease-in-out;
    }

    .btl-area.scrolled-mobile .btl-wrpr .txt-col {
        position: relative;
        top: 76px;
    }

    .btl-area.scrolled-mobile .btl-wrpr .txt-col p {
        /* color: var(--black);
        text-shadow: 0 1px 1px #ddd; */
        font-weight: 500;
        opacity: 1;
        text-shadow: 0 7px 6px #022026;
    }

    .image-one.scrolled-10 {
        opacity: 0;
        height: 0vh;
    }

    .scrolled-mobile .btl-wrpr {
        position: relative;
        top: 56px;
    }

    .btl-area.scrolled-mobile .btl-wrpr .txt-col p {
        color: var(--white);
    }


    .contact-frm {
        max-width: 90%;
    }

    .hero-sec h2 {
        letter-spacing: 2px;
        margin-top: 100px;
    }

    .section-titl2 {
        letter-spacing: 4px;
    }

    .contact-sec .section-titl2 {
        font-size: 32px;
        line-height: 35px;
        margin-bottom: 22px;
        letter-spacing: 5px;
    }

    .contact-frm input+label {
        font-size: 22px;
        line-height: 25px;
        top: -34px;
    }

    .contact-frm .form-group:last-child {
        margin-top: 35px;
    }

    .contact-frm input {
        font-size: 18px;
    }

    .contact-frm input:focus+label, .contact-frm input:visited+label, .contact-frm input:valid+label {
        top: -61px;
    }

    .planet-sec .sectitl {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 12px;

    }

    .footercpyright span img {
        width: 78px;
    }

    .plnt-txt-wrpr .txt {
        width: 100%;
    }

    .contact-frm .help-block {
        bottom: 5px;
    }
}

@media(max-width:500px) {


    .btl-wrpr .img-col img {
        width: 77px;
        margin-top: -165px;
    }

    .hill1 {
        margin-top: -248px;
        position: relative;
        z-index: 1;
    }

    .img-col {
        height: 0;
    }

    .btl-wrpr .img-col img {
        width: 75px;
    }

    .hero-sec .container {
        position: inherit;
    }

    .sublist li {
        letter-spacing: 2px;
    }

    [data-aos^=fade][data-aos^=fade] {
        opacity: 1 !important;
    }

    .common-sec {
        padding: 50% 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .common-sec.contact-sec {
        padding: 65px 0 15px;
        display: block;
    }
}

@media(max-width:450px) {
    .hill1 {
        margin-top: -205px;
    }

    .hill3 {
        margin-top: 0;
    }

    [data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] {
        /*transition-duration:0.5s;
            */
        transition: 0.7s ease-in;
        -webkit-transition: 0.7s ease-in;
        -moz-transition: 0.7s ease-in;
        -ms-transition: 0.7s ease-in;
        -o-transition: 0.7s ease-in;
    }


}

@media(max-width:390px) {
    .hill1 {
        margin-top: -242px;
    }
}


@media(max-width:360px) {
    .hill1 {
        margin-top: -251px;
    }
}


@media(max-width:330px) {

    .logo {
        margin-bottom: 15px;
    }

    .logo a img {
        width: 90px;
    }

    .hero-sec h2 {
        font-size: 25px;
    }

    .hill1 {
        margin-top: -272px;
    }

    .btl-wrpr .img-col img {
        margin-top: -123px;
    }


    .scrolled-mobile .btl-wrpr {
        top: 28px;
    }

    .btl-area.scrolled-mobile .btl-wrpr .txt-col.last {
        top: 40px;
    }

    .btl-wrpr .txt-col p {
        font-size: 12px;
        line-height: 19px;
    }

    .img-col {
        height: 24px;
    }

    .sectitl {
        font-size: 25px;
    }

    .plnt-txt-wrpr p {
        font-size: 15px;
        line-height: 20px;
    }

    .section-titl2 {
        font-size: 26px;
        line-height: 58px;
    }

    .sublist li {
        font-size: 15px;
    }

    .common-sec {
        padding: 30px 0 15px;
    }

    .hill2 {
        margin-top: 30px;
    }

    .hill2-wrpr:before {
        top: -36px;
        height: 170px;
    }

    .hill3 {
        margin-top: 0;
    }
}


@media (max-height: 400px) and (orientation: landscape) {

    .hero-sec h2 {
        margin-bottom: 24px;
    }

    .common-sec {
        padding: 15px 0;
    }

    [data-aos^=fade][data-aos^=fade] {
        opacity: 1;
    }

    .contacthill {
        height: auto;
    }

    .footercpyright {
        bottom: 10px;
    }

    .contact-sec {
        padding-bottom: 0;
        height: 220vh;
    }

    .section-titl2 {
        font-size: 35px;
        line-height: 50px;
        margin-bottom: 44px;
    }

    .sublist li {
        font-size: 17px;
        margin-bottom: 35px;
    }

    .sublist li:before {
        height: 30px;
        top: -35px;
    }
}