html {
    scroll-behavior: smooth;
}


.bricolage {
    font-family: "Outfit", sans-serif;
}


/*Common*/
body {
    padding-top: 30px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #151515;
    background-color: #fff;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

p {
    margin-bottom: 0px;
}

ul {
    padding: 0px;
    list-style: none;
    margin: 0px;
}

.ls1 {
    letter-spacing: 1px;
}

.ls2 {
    letter-spacing: 2px;
}

.ls9 {
    letter-spacing: 9px;
}

.padding0 {
    padding: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
}


@media (min-width:240px) {
    .xs8 {
        font-size: 8px;
    }

    .xs9 {
        font-size: 9px;
    }

    .xs10 {
        font-size: 10px;
    }

    .xs11 {
        font-size: 11px;
    }

    .xs12 {
        font-size: 12px;
    }

    .xs13 {
        font-size: 13px;
    }

    .xs14 {
        font-size: 14px;
    }

    .xs15 {
        font-size: 15px;
    }

    .xs16 {
        font-size: 16px;
    }

    .xs17 {
        font-size: 17px;
    }

    .xs18 {
        font-size: 18px;
    }

    .xs19 {
        font-size: 19px;
    }

    .xs20 {
        font-size: 20px;
    }

    .xs21 {
        font-size: 21px;
    }

    .xs22 {
        font-size: 22px;
    }

    .xs23 {
        font-size: 23px;
    }

    .xs24 {
        font-size: 24px;
    }

    .xs25 {
        font-size: 25px;
    }

    .xs27 {
        font-size: 27px;
    }

    .xs28 {
        font-size: 28px;
    }

    .xs29 {
        font-size: 29px;
    }

    .xs30 {
        font-size: 30px;
    }

    .xs31 {
        font-size: 31px;
    }

    .xs33 {
        font-size: 33px;
    }

    .xs35 {
        font-size: 35px;
    }

    .xs37 {
        font-size: 37px;
    }

    .xs39 {
        font-size: 39px;
    }

    .xs40 {
        font-size: 40px;
    }

    .xs41 {
        font-size: 41px;
    }

    .xs43 {
        font-size: 43px;
    }

    .xs45 {
        font-size: 45px;
    }

    .xs47 {
        font-size: 47px;
    }

    .xs49 {
        font-size: 49px;
    }

    .xs51 {
        font-size: 51px;
    }

    .xs56 {
        font-size: 56px;
    }

    .xs60 {
        font-size: 60px;
    }

    .xs70 {
        font-size: 70px;
    }

    .xs85 {
        font-size: 85px;
    }

    .xsmt1 {
        margin-top: 1%;
    }

    .xsmt2 {
        margin-top: 2%;
    }

    .xsmt3 {
        margin-top: 3%;
    }

    .xsmt4 {
        margin-top: 4%;
    }

    .xsmt5 {
        margin-top: 5%;
    }

    .xsmt6 {
        margin-top: 6%;
    }

    .xsmt8 {
        margin-top: 8%;
    }

    .xsmt13 {
        margin-top: 13%;
    }

    .xsmt20 {
        margin-top: 20%;
    }

    .xsmb1 {
        margin-bottom: 1%;
    }

    .xsmb2 {
        margin-bottom: 2%;
    }

    .xsmb3 {
        margin-bottom: 3%;
    }

    .xsmb4 {
        margin-bottom: 4%;
    }

    .xsmb6 {
        margin-bottom: 6%;
    }

    .xsmb7 {
        margin-bottom: 7%;
    }

    .xsmb8 {
        margin-bottom: 8%;
    }

    .xsmb10 {
        margin-bottom: 10%;
    }

    .xsmb15 {
        margin-bottom: 15%;
    }

    .xsmb0 {
        margin-bottom: 0%;
    }

    .xsmt-1 {
        margin-top: -1%;
    }

    .xsmt-3 {
        margin-top: -3%;
    }

    .xsmt-11 {
        margin-top: -11%;
    }

    .mycontainer {
        width: 90%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .mycontainer2 {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

}


@media (min-width:768px) {
    .sm8 {
        font-size: 8px;
    }

    .sm9 {
        font-size: 9px;
    }

    .sm10 {
        font-size: 10px;
    }

    .sm11 {
        font-size: 11px;
    }

    .sm12 {
        font-size: 12px;
    }

    .sm13 {
        font-size: 13px;
    }

    .sm14 {
        font-size: 14px;
    }

    .sm15 {
        font-size: 15px;
    }

    .sm16 {
        font-size: 16px;
    }

    .sm17 {
        font-size: 17px;
    }

    .sm18 {
        font-size: 18px;
    }

    .sm19 {
        font-size: 19px;
    }

    .sm20 {
        font-size: 20px;
    }

    .sm21 {
        font-size: 21px;
    }

    .sm22 {
        font-size: 22px;
    }

    .sm23 {
        font-size: 23px;
    }

    .sm24 {
        font-size: 24px;
    }

    .sm25 {
        font-size: 25px;
    }

    .sm27 {
        font-size: 27px;
    }

    .sm28 {
        font-size: 28px;
    }

    .sm29 {
        font-size: 29px;
    }

    .sm30 {
        font-size: 30px;
    }

    .sm31 {
        font-size: 31px;
    }

    .sm32 {
        font-size: 32px;
    }

    .sm33 {
        font-size: 33px;
    }

    .sm35 {
        font-size: 35px;
    }

    .sm37 {
        font-size: 37px;
    }

    .sm38 {
        font-size: 38px;
    }

    .sm39 {
        font-size: 39px;
    }

    .sm40 {
        font-size: 40px;
    }

    .sm41 {
        font-size: 41px;
    }

    .sm43 {
        font-size: 43px;
    }

    .sm44 {
        font-size: 44px;
    }

    .sm45 {
        font-size: 45px;
    }

    .sm46 {
        font-size: 46px;
    }

    .sm47 {
        font-size: 47px;
    }

    .sm49 {
        font-size: 49px;
    }

    .sm50 {
        font-size: 50px;
    }

    .sm55 {
        font-size: 55px;
    }

    .sm60 {
        font-size: 60px;
    }

    .sm70 {
        font-size: 70px;
    }

    .sm80 {
        font-size: 80px;
    }

    .sm100 {
        font-size: 100px;
    }

    .sm130 {
        font-size: 130px;
    }

    .lmt0 {
        margin-top: 0%;
    }

    .lmt1 {
        margin-top: 1%;
    }

    .lmt2 {
        margin-top: 2%;
    }

    .lmt3 {
        margin-top: 3%;
    }

    .lmt4 {
        margin-top: 4%;
    }

    .lmt5 {
        margin-top: 5%;
    }

    .lmt10 {
        margin-top: 10%;
    }

    .lmt13 {
        margin-top: 13%;
    }

    .lmt6 {
        margin-top: 6%;
    }

    .lmt7 {
        margin-top: 7%;
    }

    .lmt8 {
        margin-top: 8%;
    }

    .lmt9 {
        margin-top: 9%;
    }

    .lmt11 {
        margin-top: 11%;
    }

    .lmt12 {
        margin-top: 12%;
    }

    .lmt16 {
        margin-top: 16%;
    }

    .lmt18 {
        margin-top: 18%;
    }

    .lmt12 {
        margin-top: 12%;
    }

    .lmt13 {
        margin-top: 13%;
    }

    .lmt14 {
        margin-top: 14%;
    }

    .lmt15 {
        margin-top: 15%;
    }

    .lmt18 {
        margin-top: 18%;
    }

    .lmt20 {
        margin-top: 20%;
    }

    .lmt22 {
        margin-top: 22%;
    }

    .lmt25 {
        margin-top: 25%;
    }

    .lmt28 {
        margin-top: 28%;
    }

    .lmt30 {
        margin-top: 30%;
    }

    .lmt34 {
        margin-top: 34%;
    }

    .lmt45 {
        margin-top: 45%;
    }

    .lmt-15 {
        margin-top: -14%;
    }

    .lmt-25 {
        margin-top: -25%;
    }

    .lmt-3 {
        margin-top: -3%;
    }

    .lmt-1 {
        margin-top: -1%;
    }

    .lmt-2 {
        margin-top: -2%;
    }

    .lmt-3 {
        margin-top: -3%;
    }

    .lmt-4 {
        margin-top: -4%;
    }

    .lmt-5 {
        margin-top: -5%;
    }

    .lmt-6 {
        margin-top: -6%;
    }

    .lmt-7 {
        margin-top: -7%;
    }

    .lmt-8 {
        margin-top: -8%;
    }

    .lmt-9 {
        margin-top: -9%;
    }

    .lmt-11 {
        margin-top: -11%;
    }

    .lmt-13 {
        margin-top: -13%;
    }

    .lmt-20 {
        margin-top: -20%;
    }

    .lmb0 {
        margin-bottom: 0%;
    }

    .lmb1 {
        margin-bottom: 1%;
    }

    .lmb2 {
        margin-bottom: 2%;
    }

    .lmb7 {
        margin-bottom: 7%;
    }

    .lmb10 {
        margin-bottom: 10%;
    }

    .lmb15 {
        margin-bottom: 15%;
    }

    .lmb30 {
        margin-bottom: 30%;
    }

    .lmb-8 {
        margin-bottom: -8%;
    }

    .lmb-4 {
        margin-bottom: -4%;
    }

    .lml-2 {
        margin-left: -2%;
    }

    .pc-right {
        text-align: right;
    }

    .mobile-center {
        text-align: left;
    }

    .mycontainer {
        width: 730px;
    }

    .mycontainer2 {
        width: 730px;
    }



}

@media (min-width: 992px) {
    .md8 {
        font-size: 8px;
    }

    .md9 {
        font-size: 9px;
    }

    .md10 {
        font-size: 10px;
    }

    .md11 {
        font-size: 11px;
    }

    .md12 {
        font-size: 12px;
    }

    .md13 {
        font-size: 13px;
    }

    .md14 {
        font-size: 14px;
    }

    .md15 {
        font-size: 15px;
    }

    .md16 {
        font-size: 16px;
    }

    .md17 {
        font-size: 17px;
    }

    .md18 {
        font-size: 18px;
    }

    .md19 {
        font-size: 19px;
    }

    .md20 {
        font-size: 20px;
    }

    .md21 {
        font-size: 21px;
    }

    .md22 {
        font-size: 22px;
    }

    .md23 {
        font-size: 23px;
    }

    .md24 {
        font-size: 24px;
    }

    .md25 {
        font-size: 25px;
    }

    .md26 {
        font-size: 26px;
    }

    .md27 {
        font-size: 27px;
    }

    .md28 {
        font-size: 28px;
    }

    .md29 {
        font-size: 29px;
    }

    .md30 {
        font-size: 30px;
    }

    .md31 {
        font-size: 31px;
    }

    .md32 {
        font-size: 32px;
    }

    .md33 {
        font-size: 33px;
    }

    .md34 {
        font-size: 34px;
    }

    .md35 {
        font-size: 35px;
    }

    .md36 {
        font-size: 36px;
    }

    .md37 {
        font-size: 37px;
    }

    .md38 {
        font-size: 38px;
    }

    .md39 {
        font-size: 39px;
    }

    .md40 {
        font-size: 40px;
    }

    .md41 {
        font-size: 41px;
    }

    .md42 {
        font-size: 42px;
    }

    .md44 {
        font-size: 44px;
    }

    .md45 {
        font-size: 45px;
    }

    .md46 {
        font-size: 46px;
    }

    .md47 {
        font-size: 47px;
    }

    .md48 {
        font-size: 48px;
    }

    .md49 {
        font-size: 49px;
    }

    .md50 {
        font-size: 50px;
    }

    .md51 {
        font-size: 51px;
    }

    .md52 {
        font-size: 52px;
    }

    .md53 {
        font-size: 53px;
    }

    .md54 {
        font-size: 54px;
    }

    .md55 {
        font-size: 55px;
    }

    .md56 {
        font-size: 56px;
    }

    .md58 {
        font-size: 58px;
    }

    .md66 {
        font-size: 66px;
    }

    .md68 {
        font-size: 68px;
    }

    .md60 {
        font-size: 60px;
    }

    .md64 {
        font-size: 64px;
    }

    .md75 {
        font-size: 75px;
    }

    .md70 {
        font-size: 70px;
    }

    .md80 {
        font-size: 80px;
    }

    .md84 {
        font-size: 84px;
    }

    .md90 {
        font-size: 90px;
    }

    .md106 {
        font-size: 106px;
    }

    .md170 {
        font-size: 170px;
    }

    .md210 {
        font-size: 240px;
    }


    .mmb0 {
        margin-bottom: 0%;
    }

    .mmb3 {
        margin-bottom: 3%;
    }

    .mmb5 {
        margin-bottom: 5%;
    }

    .mmb7 {
        margin-bottom: 7%;
    }

    .mmb8 {
        margin-bottom: 8%;
    }

    .mmb11 {
        margin-bottom: 11%;
    }

    .mmb12 {
        margin-bottom: 12%;
    }

    .mmb14 {
        margin-bottom: 14%;
    }

    .mmb15 {
        margin-bottom: 15%;
    }

    .mmb16 {
        margin-bottom: 16%;
    }

    .mmb20 {
        margin-bottom: 20%;
    }

    .mmb28 {
        margin-bottom: 28%;
    }

    .mmb35 {
        margin-bottom: 35%;
    }

    .mmt0 {
        margin-top: 0%;
    }

    .mmt1 {
        margin-top: 1%;
    }

    .mmt2 {
        margin-top: 2%;
    }

    .mmt3 {
        margin-top: 3%;
    }

    .mmt4 {
        margin-top: 4%;
    }

    .mmt5 {
        margin-top: 5%;
    }

    .mmt6 {
        margin-top: 6%;
    }

    .mmt7 {
        margin-top: 7%;
    }

    .mmt8 {
        margin-top: 8%;
    }

    .mmt10 {
        margin-top: 10%;
    }

    .mmt11 {
        margin-top: 11%;
    }

    .mmt12 {
        margin-top: 12%;
    }

    .mmt13 {
        margin-top: 13%;
    }

    .mmt14 {
        margin-top: 14%;
    }

    .mmt15 {
        margin-top: 15%;
    }

    .mmt18 {
        margin-top: 18%;
    }

    .mmt11a {
        margin-top: 11.6%;
    }

    .mmt20 {
        margin-top: 20%;
    }

    .mmt28 {
        margin-top: 28%;
    }

    .mmt31 {
        margin-top: 31%;
    }

    .mmt36 {
        margin-top: 36%;
    }

    .mmt-2 {
        margin-top: -2%;
    }

    .mmt-3 {
        margin-top: -3%;
    }

    .mmt-4 {
        margin-top: -4%;
    }

    .mmt-5 {
        margin-top: -5%;
    }

    .mmt-8 {
        margin-top: -8%;
    }

    .mmt-9 {
        margin-top: -9%;
    }

    .mmt-9a {
        margin-top: -9.5%;
    }

    .mmt-12 {
        margin-top: -12%;
    }

    .mmb-5 {
        margin-bottom: -5%;
    }

    .mmb-6 {
        margin-bottom: -6%;
    }

    .mml-4 {
        margin-left: -4%;
    }

    .mycontainer {
        width: 880px;
    }

    .mycontainer2 {
        width: 922px;
    }

}

@media (min-width:1200px) {
    .lg8 {
        font-size: 8px;
    }

    .lg9 {
        font-size: 9px;
    }

    .lg10 {
        font-size: 10px;
    }

    .lg11 {
        font-size: 11px;
    }

    .lg12 {
        font-size: 12px;
    }

    .lg13 {
        font-size: 13px;
    }

    .lg14 {
        font-size: 14px;
    }

    .lg15 {
        font-size: 15px;
    }

    .lg16 {
        font-size: 16px;
    }

    .lg17 {
        font-size: 17px;
    }

    .lg18 {
        font-size: 18px;
    }

    .lg19 {
        font-size: 19px;
    }

    .lg20 {
        font-size: 20px;
    }

    .lg21 {
        font-size: 21px;
    }

    .lg22 {
        font-size: 22px;
    }

    .lg23 {
        font-size: 23px;
    }

    .lg24 {
        font-size: 24px;
    }

    .lg25 {
        font-size: 25px;
    }

    .lg26 {
        font-size: 26px;
    }

    .lg28 {
        font-size: 28px;
    }

    .lg29 {
        font-size: 29px;
    }

    .lg30 {
        font-size: 30px;
    }

    .lg31 {
        font-size: 31px;
    }

    .lg32 {
        font-size: 32px;
    }

    .lg33 {
        font-size: 33px;
    }

    .lg34 {
        font-size: 34px;
    }

    .lg35 {
        font-size: 35px;
    }

    .lg36 {
        font-size: 36px;
    }

    .lg37 {
        font-size: 37px;
    }

    .lg38 {
        font-size: 38px;
    }

    .lg39 {
        font-size: 39px;
    }

    .lg40 {
        font-size: 40px;
    }

    .lg41 {
        font-size: 41px;
    }

    .lg42 {
        font-size: 42px;
    }

    ..lg43 {
        font-size: 43px;
    }

    .lg44 {
        font-size: 44px;
    }

    .lg45 {
        font-size: 45px;
    }

    .lg46 {
        font-size: 46px;
    }

    .lg47 {
        font-size: 47px;
    }

    .lg48 {
        font-size: 48px;
    }

    .lg49 {
        font-size: 49px;
    }

    .lg50 {
        font-size: 50px;
    }

    .lg51 {
        font-size: 51px;
    }

    .lg52 {
        font-size: 52px;
    }

    .lg53 {
        font-size: 53px;
    }

    .lg54 {
        font-size: 54px;
    }

    .lg55 {
        font-size: 55px;
    }

    .lg56 {
        font-size: 56px;
    }

    .lg58 {
        font-size: 58px;
    }

    .lg62 {
        font-size: 62px;
    }

    .lg60 {
        font-size: 60px;
    }

    .lg65 {
        font-size: 65px;
    }

    .lg68 {
        font-size: 68px;
    }

    .lg71 {
        font-size: 71px;
    }

    .lg70 {
        font-size: 70px;
    }

    .lg75 {
        font-size: 75px;
    }

    .lg80 {
        font-size: 80px;
    }

    .lg82 {
        font-size: 82px;
    }

    .lg86 {
        font-size: 86px;
    }

    .lg90 {
        font-size: 90px;
    }

    .lg100 {
        font-size: 100px;
    }

    .lg106 {
        font-size: 106px;
    }

    .lg180 {
        font-size: 180px;
    }

    .lg210 {
        font-size: 240px;
    }




    .lmtm-3 {
        margin-top: -3%;
    }

    .lgmb0 {
        margin-bottom: 0%;
    }

    .lgmb2 {
        margin-bottom: 2%;
    }

    .lgmb3 {
        margin-bottom: 3%;
    }

    .lgmb5 {
        margin-bottom: 5%;
    }

    .lgmb11 {
        margin-bottom: 11%;
    }

    .lgmb12 {
        margin-bottom: 12%;
    }

    .lgmb22 {
        margin-bottom: 22%;
    }

    .lgmb25 {
        margin-bottom: 25%;
    }

    .lgmb-6 {
        margin-bottom: -6%;
    }


    .lgmt5 {
        margin-top: 5%;
    }

    .lgmt18 {
        margin-top: 18%;
    }

    .lgmt13 {
        margin-top: 13%;
    }

    .lgmt15 {
        margin-top: 15%;
    }

    .lgmt23 {
        margin-top: 23%;
    }

    .lgmt26 {
        margin-top: 26%;
    }

    .lgmt29 {
        margin-top: 29%;
    }

}

@media (min-width:1500px) {
    .xl8 {
        font-size: 8px;
    }

    .xl9 {
        font-size: 9px;
    }

    .xl10 {
        font-size: 10px;
    }

    .xl11 {
        font-size: 11px;
    }

    .xl12 {
        font-size: 12px;
    }

    .xl13 {
        font-size: 13px;
    }

    .xl14 {
        font-size: 14px;
    }

    .xl15 {
        font-size: 15px;
    }

    .xl16 {
        font-size: 16px;
    }

    .xl17 {
        font-size: 17px;
    }

    .xl18 {
        font-size: 18px;
    }

    .xl19 {
        font-size: 19px;
    }

    .xl20 {
        font-size: 20px;
    }

    .xl21 {
        font-size: 21px;
    }

    .xl22 {
        font-size: 22px;
    }

    .xl23 {
        font-size: 23px;
    }

    .xl24 {
        font-size: 24px;
    }

    .xl25 {
        font-size: 25px;
    }

    .xl26 {
        font-size: 26px;
    }

    .xl27 {
        font-size: 27px;
    }

    .xl28 {
        font-size: 28px;
    }

    .xl29 {
        font-size: 29px;
    }

    .xl30 {
        font-size: 30px;
    }

    .xl31 {
        font-size: 31px;
    }

    .xl32 {
        font-size: 32px;
    }

    .xl33 {
        font-size: 33px;
    }

    .xl34 {
        font-size: 34px;
    }

    .xl35 {
        font-size: 35px;
    }

    .xl36 {
        font-size: 36px;
    }

    .xl37 {
        font-size: 37px;
    }

    .xl38 {
        font-size: 38px;
    }

    .xl39 {
        font-size: 39px;
    }

    .xl40 {
        font-size: 40px;
    }

    .xl41 {
        font-size: 41px;
    }

    .xl42 {
        font-size: 42px;
    }

    .xl44 {
        font-size: 43px;
    }

    .xl45 {
        font-size: 45px;
    }

    .xl46 {
        font-size: 46px;
    }

    .xl47 {
        font-size: 47px;
    }

    .xl48 {
        font-size: 48px;
    }

    .xl49 {
        font-size: 49px;
    }

    .xl50 {
        font-size: 50px;
    }

    .xl51 {
        font-size: 51px;
    }

    .xl52 {
        font-size: 52px;
    }

    .xl53 {
        font-size: 53px;
    }

    .xl55 {
        font-size: 55px;
    }

    .xl56 {
        font-size: 56px;
    }

    .xl58 {
        font-size: 58px;
    }

    .xl65 {
        font-size: 65px;
    }

    .xl60 {
        font-size: 60px;
    }

    .xl75 {
        font-size: 75px;
    }

    .xl70 {
        font-size: 70px;
    }

    .xl80 {
        font-size: 80px;
    }

    .xl87 {
        font-size: 87px;
    }

    .xl170 {
        font-size: 170px;
    }

    .xl210 {
        font-size: 240px;
    }

}

.mycontainer-left {}

.responsive-video {
    padding-bottom: 56.21%;
    overflow: hidden;
    position: relative;
    z-index: 3;
    box-shadow: 0px 19px 40px 0px rgba(0, 0, 0, 0.24);
}

.video-box-main-out {
    padding: 0%;
}

.video-box-main-inn {
    width: 103.4%;
    padding: 0%;
    max-width: 103.4%;
    margin: auto;
    position: relative;
    background-color: #000;
    margin-right: -12%;
    border-radius: 20px;
    box-shadow: 9.508px 8.866px 24px 0px rgb(38 38 117 / 35%);
}

.autoplayer-subarea,
.autoplayer-subarea iframe {
    border-radius: 20px !important;
}

.video-box-main {
    padding: 0;
}

.video-box {
    position: relative;
    overflow: hidden;
    border-style: solid;
    border-radius: 22px;
    box-shadow: 0px 32px 38px 0px rgba(0, 0, 0, 0.21);
}

.videoBg {
    position: absolute;
    top: -2.5%;
    max-width: 123%;
    left: -9.5%;
}

.autoplayer-subarea-16-by-9 {
    padding-bottom: 56.25% !important;
    border-radius: 0;
}

.video-box iframe {
    border-radius: 15px;
}

.demo {
    padding-bottom: 55.21%;
    overflow: hidden;
    position: relative;
    border: 0px solid #ffffff42;
}

.demo-video-out {
    padding: 0 2.4%;
}

.demo-video {
    overflow: hidden;
    margin-top: 5%;
    padding: 0;
    border-width: 5px;
    border-color: rgb(255, 255, 255);
    border-style: solid;
    border-radius: 24px;
    background-color: black;
    box-shadow: 0px 42px 55.08px 12.92px rgba(0, 0, 0, 0.46);
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed,
.responsive-video1 iframe,
.responsive-video1 object,
.responsive-video1 embed,
.responsive-demo-video embed,
.responsive-demo-video object,
.responsive-demo-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.autoplayer-area {
    z-index: 2;
}

.green_dark {
    color: #589d0e;
}

.gray {
    color: #aaaaaa;
}

.black2 {
    color: #1f2024;
}

.green {
    color: #bde513;
}

.blue {
    color: #022c28;
}


.mycontainer {
    margin: auto;
}

.italic {
    font-style: italic;
}

.upper {
    text-transform: uppercase
}




/*font-weight*/
.w100 {
    font-weight: 100;
}

.w200 {
    font-weight: 200;
}

.w300 {
    font-weight: 300;
}

.w400 {
    font-weight: 400;
}

.w500 {
    font-weight: 500;
}

.w600 {
    font-weight: 600;
}

.w700 {
    font-weight: 700;
}

.w800 {
    font-weight: 800;
}

.w900 {
    font-weight: 900;
}

.lh0 {
    line-height: 0%;
}

.lh50 {
    line-height: 50%;
}

.lh60 {
    line-height: 60%;
}

.lh70 {
    line-height: 70%;
}

.lh80 {
    line-height: 80%;
}

.lh90 {
    line-height: 90%;
}

.lh100 {
    line-height: 100%;
}

.lh110 {
    line-height: 110%;
}

.lh120 {
    line-height: 120%;
}

.lh130 {
    line-height: 130%;
}

.lh140 {
    line-height: 140%;
}

.lh145 {
    line-height: 145%;
}

.lh150 {
    line-height: 150%;
}

.lh160 {
    line-height: 160%;
}

.lh170 {
    line-height: 170%;
}

.lh180 {
    line-height: 180%;
}

.lh190 {
    line-height: 190%;
}

.lh200 {
    line-height: 200%;
}

.lh210 {
    line-height: 210%;
}

.lh220 {
    line-height: 220%;
}

.lh230 {
    line-height: 230%;
}


.mycontainer-left {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
}

.mycontainer-right {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-left: auto;
}

.clear {
    clear: both;
}

.text-white {
    color: #fff;
}

.videoframe {
    position: relative;
}

/*hover effect 73*/


.SMN_effect-73 a {
    text-decoration: none;
    position: relative;
    transition: color 0.5s ease;
}

.SMN_effect-73 a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #bde513, #589d0e, transparent);
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity 0.5s;
}

.SMN_effect-73 a:hover {
    color: #A6A6A6;
}

.SMN_effect-73 a:hover::after {
    opacity: 1;
    animation: shimmer111 2s linear infinite !important;
}

@keyframes shimmer111 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/*------------------------------------------------*/
html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/*Gradients*/

.gradient {
    background: linear-gradient(90deg, #589d0e, #bde513);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a.navbar-brand {
    background: #000;
    padding: 10px 35px;
    border-radius: 50px;
    margin: 0;
}

nav.navbar {
    position: fixed;
    left: 0;
    top: 25px;
    right: 0;
    width: 90%;
    z-index: 999;
    margin: 0 auto;
    border-radius: 50px;
    padding: 1% 1.3%;
    box-shadow: none;
    backdrop-filter: blur(16px);
    background-color: rgb(13 13 13 / 2%);
    border: 1px solid rgb(204 203 203 / 25%);
}


.navbar-light .navbar-brand {
    color: rgba(0, 0, 0, .9);
    padding: 20px;
}

.navbar-light .navbar-nav .nav-link {
    color: #aaa8a8;
    position: relative;
    padding: 10px 10px 10px 10px;
    transition-duration: 0.3s;
}


.navbar-light .navbar-nav .nav-link:hover {
    color: #589d0e;
    transition-duration: 0.3s;
}

a.nav-link {
    margin: 0 0px 0 15px;
}

.getlink {
    text-align: center;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    transition-duration: 0.3s;
    background: linear-gradient(334deg, #bde513 28%, #589d0e 78%);
    color: #fff;
    border-radius: 40px;
}

.getlink:hover {
    background: linear-gradient(334deg, #589d0e 28%, #bde513 78%);
    transition-duration: 0.3s;
    color: #fff;
}




/*============================================== Bannar*/

.banner {
    background: url(../images/sectionBg1.png) no-repeat center top;
    background-size: cover;
    background-color: #fff;
    padding: 9% 0% 6% 0%;
    background-attachment: fixed;
}

.banner .swiper-slide {
    padding: 0 5%;
}

.slider-btnn a {
    background: linear-gradient(334deg, #bde513 28%, #589d0e 78%);
    padding: 12.7px 50px !important;
    transition-duration: 0.3s;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    transition-duration: 0.3s;
    border-radius: 50px;
    border: 1px solid #ff5a1500;
    z-index: 99;
}

.slider-btnn a:hover {
    background: linear-gradient(334deg, #589d0e 28%, #bde513 78%);
    transition-duration: 0.3s;
}

.ailine_right {
    opacity: 0.7;
}

.ailine_left {
    opacity: 0.7;
}


/*============================== Line Animation*/

.animatedLine {
    position: fixed;
    top: 0;
    height: 10%;
    width: 1px;
    background: rgb(0 0 0 / 3%);
    overflow: hidden;
    z-index: 5;
}

.animatedLine:nth-child(1) {
    left: 18%;
}

.animatedLine:nth-child(1)::after {
    animation-delay: -2s;
}

.animatedLine:nth-child(2) {
    left: 82%;
}

.animatedLine:nth-child(2)::after {
    animation-delay: -1s;
}

.animatedLine::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 75px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #589d0e 75%, #bde513 100%);
    animation: animatedLine 5s 0s infinite;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
    animation-fill-mode: forwards;
}

@keyframes animatedLine {
    0% {
        top: -150px;
    }

    60% {
        top: calc(100% + 150px);
    }

    100% {
        top: calc(100% + 150px);
    }
}


.loader-container {
    position: absolute;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-reflect: below 0 linear-gradient(#00000005, transparent, rgb(0 0 0 / 4%));
    left: -50%;
    top: 65%;
    z-index: 0;
}

.loader {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    animation: animate 2s linear infinite;
}

.loader1:before,
.loader2:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to top, transparent, rgba(0, 255, 249, 0.4));
    background-size: 100px 180px;
    background-repeat: no-repeat;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.loader2,
.loader4 {
    animation-delay: -1s;
    filter: hue-rotate(290deg);
}

.loader i {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #00fff9;
    border-radius: 50%;
    z-index: 100;
    box-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9, 0 0 30px #00fff9,
        0 0 40px #00fff9, 0 0 50px #00fff9, 0 0 60px #00fff9, 0 0 70px #00fff9,
        0 0 80px #00fff9, 0 0 90px #00fff9, 0 0 100px #00fff9;
}

.loader span {
    position: absolute;
    inset: 20px;
    background: #fff;
    /* yahan black ki jagah white */
    border-radius: 50%;
    z-index: 1;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.online_stBox {
    border-radius: 18px;
    border: 1px solid #0000000f;
    padding: 10px 5px 10px 10px;
    text-align: justify;
}

.icon_1 {
    margin: 0 5px 0 0px;
    border-radius: 10px;
    /* border: 1px solid #00000021; */
    padding: 6px;
    max-width: 24%;
    background: #bde51329;
}

.spcpp {
    margin-top: 10px;
}

.icon-right {
  position: absolute;
  top: 2.7rem;   
  right: 1.2rem;
}


/*left Right Slider*/

.slider1 {
    position: relative;
    width: 100%;
    top: 0;
    overflow: hidden;
}

.slider2 {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 2%;
    margin-bottom: 1%;
}

.slider1 .slider-row {
    width: 1500px;
    height: 40px;
    background-size: 1500px 40px;
    animation: slide 70s linear infinite;
    background-repeat: repeat-x;
}


@keyframes slide {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -2204px;
    }
}

.slide_client {
    background: #022c28;
    padding: 2.5% 0%;
    max-width: 90%;
    margin: auto;
    border-radius: 20px;
}

.slide_client::before,
.slide_client::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* width: 55px; shadow ki width */
    z-index: 1;
}




/*=======================================================section2*/


.section_2 {
    background: url(../images/section_2Bg2.png) no-repeat center top;
    background-size: cover;
    padding: 5% 0 5% 0;
    position: relative;
}

.you_main_video {
    background-color: #022c28;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    overflow: hidden;
    padding: 6px;
    border: 1px solid hsl(0deg 0% 72.55% / 9%);
    margin-top: -10%;
    transition-duration: 0.3s;
    position: relative;
    z-index: 1;
}

.section_2:hover .you_main_video {
    margin-top: 0%;
    transition-duration: 0.3s;
}

.responsive-video {
    border-radius: 15px;
}

.responsive-video {
    padding-bottom: 56.21%;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed,
.responsive-video1 iframe,
.responsive-video1 object,
.responsive-video1 embed,
.responsive-demo-video embed,
.responsive-demo-video object,
.responsive-demo-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 4;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 42%;
    left: 47%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 25px;
    height: 80px;
    width: 80px;
    line-height: 108%;
    text-align: center;
    transition-duration: 0.3s;
    transform: scale(1);
}

.play-button:hover {
    transition-duration: 0.3s;
    transform: scale(1.05);
    background-color: #bde513;
    backdrop-filter: blur(6px);
    overflow: hidden;
    border: 1px solid hsl(0deg 0% 72.55% / 9%);
}



/*=======================================================section3*/

.section_3 {
    padding: 10% 0 10% 0;
    position: relative;
    max-width: 92%;
    margin: auto;
    border-radius: 30px;
    background: linear-gradient(144deg, #022c28 20%, #bde513 78%);
    z-index: 0;
}

.section_3shape {
    background: #ffffff;
    border: 1px solid #0000000f;
    padding: 5px 20px;
    border-radius: 30px;
}

.section3_box {
    border-width: 1px;
    border-color: rgb(0 0 0 / 30%);
    border-style: solid;
    border-radius: 15px;
    background-color: #ffffff;
    max-width: 32%;
    margin: 8px 8px;
    padding: 40px 20px;
    text-align: left;
    position: relative;
}

.admin {
    position: absolute;
    top: 30px;
    right: 30px;
}

.section3_box_text5 {
    margin-top: 3.6%;
}

.section3_spc {
    max-width: 65%;
}

.section_3_arrow {
    position: relative;
}

.section3_1 {
    position: absolute;
    top: 0;
    left: 11%;
}

.section3_2 {
    position: absolute;
    top: 0;
    right: 11%;
}

@keyframes star {
    to {
        zoom: 10%;
        opacity: 0;
    }

    from {
        zoom: 100% opacity:1;
    }
}

.star {
    animation-name: star;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-direction: alternate;

}

@keyframes star1 {
    to {

        opacity: 0;
    }

    from {

        opacity: 1;
    }
}

.star1 {
    animation-name: star1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-direction: alternate;
}

@keyframes star2 {
    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}

.star2 {
    animation-name: star2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-direction: alternate;
}

.stars_icon {
    position: absolute;
    right: 0%;
    top: 3%;
}


/*=======================================================section4*/


.section_4 {
    background: url(../images/sectionBg4.png) no-repeat center top;
    background-size: cover;
    padding: 10% 0% 7% 0%;
    background-color: #fff;
    margin-top: -3%;
}

.about_box {
    padding: 5% 3% 5% 6%;
    border-radius: 15px;
    backdrop-filter: blur(16px);
    background-color: rgb(13 13 13 / 2%);
    margin: 0 0 0 -8.5%;
    border: 1px solid #00000029;
}

.smt_spc {
    margin-top: 2%;
}


/*=======================================================section5*/

.section_5 {
    background: url(../images/sectionBg5.png) no-repeat center top;
    background-size: cover;
    padding: 9% 0 9% 0;
    margin-top: -3%;
    position: relative;
}

.section_5shape {
    background: #333333
    ;
    border: 1px solid #ffffff24;
    padding: 5px 20px;
    border-radius: 30px;
    z-index: 100;
    position: relative;
}

.section_5_box {
    padding: 8% 5% 8% 5%;
    background: #ffffff36;
    border-radius: 15px;
    /* border: 1px solid #ffffff2b; */
    height: 100%;
    transition-duration: 0.3s;
}

.section_5_box:hover .section_5_text {
    background: linear-gradient(334deg, #bde513 28%, #589d0e 78%);
    transition-duration: 0.3s;
}

.section_5_text {
    border: 1px solid #ffffff42;
    padding: 5% 5%;
    border-radius: 15px;
    background: #bde5130d;
}

.section_5_box .section_5_img {
    border-radius: 15px;
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-transition: all .5s ease-in-out;
}

.section_5_box:hover .section_5_img {
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.01);
}

.spc5 {
    margin-top: 2.5%;
}



/*=======================================================section6*/


.section_6 {
    /*background: linear-gradient(4deg, #bde513 28%, #589d0e 78%);*/
    background: url(../images/sectionBg6.png) no-repeat center top;
    background-size: cover;
    padding: 3% 0 4% 0;
    max-width: 75%;
    margin: auto;
    border-radius: 30px;
    margin-top: -3%;
    z-index: 1;
    position: relative;
}

.section_6_box {
    text-align: center;
    background: #fff;
    padding: 6% 1.5%;
    border-radius: 15px;
    box-shadow: 16px 18px 0px -4px rgb(178 221 18 / 27%);
    border: 1px solid #00000026;
}

.stepiCon {
    max-width: 15%;
    margin-right: 1.5%;
}



/*=======================================================section7*/

.section_7 {
    padding: 6% 0 7% 0;
}

.testi-box {
    border-radius: 15px;
    border: 1px solid #00000014;
    box-shadow: 12px 12px 20px 0px rgb(0 0 0 / 4%);
    padding: 8% 8%;
    height: 100%;
}


.swiper-container.swiper1.swiper-container-horizontal {
    padding: 30px 0 50px 0;
}

/*pagination*/

.swiper4-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: linear-gradient(to right, #bde513, #589d0e) !important;
    padding: 4px 10px !important;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.swiper-container.swiper4.swiper-container-horizontal.swiper-container-ios {
    height: 100%;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: linear-gradient(334deg, #bde513 28%, #589d0e 78%);
    padding: 6px;
    transition-duration: 0.3s;

}

.swiper-pagination {
    display: none !important;
}

span.swiper-pagination-bullet {
    padding: 4px;
    transition-duration: 0.3s;
}


.footer {
    padding: 6% 0 4% 0;
    background: linear-gradient(to bottom, #589d0e, #bde513);
    margin-top:-3%;
}

.cn_box {
    text-align: center;
}


/* list with green bullets */
.footer .link-list {
    list-style: none;
    padding: 0;
    margin: 6% 0 0 0;
}

/* contact pill cards */
.contact-tile {
    display: flex;
    align-items: center;
    gap: .9rem;
    border: 1px solid #0000002b;
    background: #00000008;
    padding: .75rem .9rem;
    border-radius: 14px;
    margin: .6rem 0;
}

.contact-tile .icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #242424;
    display: grid;
    place-items: center;
    background: #ffffff;
}

.contact-tile a {
    color: #ffffff;
}

.contact-tile a:hover {
    color: #fff
}

/* newsletter */

.input-wrap {
    display: flex;
    width: 100%;
    background: #0f0f0f;
    border: 1px solid #1d1d1d;
    border-radius: 14px;
    overflow: hidden;
    margin-top: 3%;
}

.input-wrap input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #e5e7eb;
    padding: .85rem 1rem;
    font-size: .95rem;
    width: 100%;
}

.input-wrap button {
    background: #ffffff;
    color: #000000;
    border: 0;
    padding: .85rem 1rem;
    min-width: 90px;
    font-weight: 600;
    letter-spacing: .2px;
}

.input-wrap button:hover {
    filter: brightness(1.15)
}

.input-wrap:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent)
}

/* socials */
.socials {
    display: flex;
    gap: .7rem;
    margin-top: 1rem
}

.socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0f0f0f;
    border: 1px solid #1d1d1d;
    color: #cbd5e1;
}

.socials a:hover {
    color: #fff
}


.footer::after {
    transform: translateX(-50%) rotate(-45deg)
}

@media (max-width:991.98px) {
    .footer {
        padding: 48px 0 28px
    }

    .input-wrap button {
        min-width: 120px
    }
}

.link-list li {
    padding: 8% 0 0 0;
}

.link-list li a {
    color: #000;
}

.link-list li a:hover {
    color: #fff;
}

.ft_bottom {
    padding: 15px 0;
    background: #000000;
    color: #ffffffa6;
}


/*----------------------------------------------991.98px*/

@media only screen and (max-width: 992px) {

    a.nav-link {
        margin: 0px;
    }

    .navbar-collapse .btnn {
        text-align: center;
        margin-top: 1%;
    }

    .SMN_effect-73 a:after {
        left: 45%;
        width: 10%;
    }

    nav.navbar {
        width: 90%;
        padding: 1% 2%;
        border-radius: 20px;
    }

    a.navbar-brand {
        max-width: 30%;
    }

    .banner {
        padding: 15% 0% 6% 0%;
    }

    .ailine_left {
        max-width: 25%;
    }

    .ailine_right {
        max-width: 25%;
    }

    .slider-btnn a {
        padding: 11px 25px !important;
    }

    .slide_client {
        max-width: 95%;
    }

    .ai_Bot {
        max-width: 10%;
    }

    .section3_box {
        max-width: 47%;
    }

    .section3_spc {
        max-width: 96.5%;
    }

    .section3_box_text5 {
        margin-top: 3.6%;
    }

    .section_5 {
        padding: 12% 0 9% 0;
    }

    .section_6 {
        max-width: 95%;
    }

    .section3_1 {
        left: 1%;
        max-width: 30%;
    }

    .section3_2 {
        right: 1%;
        max-width: 30%;
    }

    .play-button {
        top: 35%;
        left: 45%;
    }

    .link-list li {
        padding: 5% 0 0 0;
    }

    .stars_icon {
        display: none;
    }




}



/*----------------------------------------------767px*/

@media only screen and (max-width: 767px) {

    nav.navbar {
        top: 15px;
        padding: 2% 2% 2% 2%;
        border-radius: 20px;
    }

    a.navbar-brand {
        max-width: 50%;
    }

    a.navbar-brand {
        padding: 8px 20px;
    }

    .banner {
        padding: 24% 0% 6% 0%;
    }

    .line1 {
        max-width: 70%;
    }

    .online_stBox {
        margin-bottom: 3%;
    }

    .icon_1 {
        max-width: 20%;
    }

    .slide_client {
        max-width: 100%;
        border-radius: 15px;
        padding: 4.5% 0%;
    }

    .ailine_left {
        display: none;
    }

    .ailine_right {
        display: none;
    }

    .slider1 .slider-row {
        width: 900px;
        height: 26px;
        background-size: 900px 26px;
    }

    .play-button {
        top: 35%;
        left: 40%;
        font-size: 20px;
        padding: 16px 20px;
        height: 50px;
        width: 50px;
    }

    .you_main_video {
        padding: 12px;
    }

    .navbar-toggler {
        background-color: #ffffff;
    }

    .section3_box {
        max-width: 100%;
    }

    .section_3 {
        padding: 10% 5px 2% 5px;
        max-width: 95%;
        border-radius: 20px;
    }

    .admin {
        max-width: 11%;
    }

    .section3_box_text5 {
        margin-top: 7.6%;
    }

    .about {
        max-width: 75%;
        margin-bottom: -3.5%;
    }

    .about_box {
        padding: 5% 3% 5% 3%;
        border-radius: 15px;
        backdrop-filter: blur(16px);
        background-color: rgb(13 13 13 / 2%);
        margin: 0 0 0 0%;
        border: 1px solid #00000029;
        text-align: center;
    }

    .section_5 {
        padding: 8% 0 9% 0;
        background: #000;
        margin: 0;
        border-top: 5px solid #afda12;
    }

    .section_5_box {
        padding: 6% 5% 6% 5%;
        height: auto;
        margin-bottom: 3%;
    }

    .section_5_text {
        padding: 4% 3%;
    }

    .spc5 {
        margin-top: 0%;
    }

    .section_6_box {
        padding: 5% 1.5%;
        box-shadow: 8px 8px 0px -4px rgb(178 221 18);
        margin-bottom: 3%;
    }

    .section_6 {
        border-radius: 15px;
    }

    .testi_icon {
        max-width: 25%;
    }

    .testi-box {
        padding: 5% 5%;
        text-align: center;
    }

    .cn_box {
        text-align: left;
        padding: 0 5%;
    }

    .link-list li {
        padding: 3% 0 0 0;
    }

    .footer .link-list {
        margin: 2% 0 3% 0;
    }

    .footer {
        padding: 35px 0 15px 0;
    }

    .input-wrap {
        width: 75%;
    }







}


@media (max-width: 480px) {}


/*..............................................................*/


@media (min-width: 480px) {}

@media only screen and (min-width: 768px) {

    .wrapper {
        top: 8%;
        left: 70%;
        z-index: 2;
    }

    .arrow1 {
        max-width: 4%;
        top: -7%;
        right: 21%;
    }

    .sdmokup1 {
        max-width: 66%;
    }

    .sdmokup2 {
        max-width: 23%;
        top: 37%;
        right: 12%;
    }

    .sdmokup3 {
        max-width: 13.5%;
        top: 53%;
        right: 3%;
    }

    .sdmokup4 {
        max-width: 13%;
        top: 65%;
        right: 18.5%;
    }

}


@media only screen and (min-width: 800px) {

    .items {
        padding-bottom: 58.5%;
    }

    .getlink {
        padding: 12px 40px !important;
    }

}

@media only screen and (min-width: 992px) {

    .wrapper {
        top: 2%;
        left: 68%;
        z-index: 2;
    }


    .arrow1 {
        max-width: 5%;
        top: -9%;
        right: 21%;
    }

    .sdmokup1 {
        max-width: 66%;
    }

    .sdmokup2 {
        max-width: 25%;
        top: 28%;
        right: 10%;
    }

    .sdmokup3 {
        max-width: 13%;
        top: 46%;
        right: 3%;
    }

    .sdmokup4 {
        max-width: 13%;
        top: 60%;
        right: 18.1%;
    }

    .populerimg {
        margin: 0 0 -10% 0;
    }

    .items {
        padding-bottom: 75.5%;
    }

    .t3 {
        font-size: 18px;
    }

    .problemtext {
        margin-top: 10%;
    }

}

.mycontainer-left,
.mycontainer-right {
    max-width: 962px;
}



@media only screen and (min-width: 1000px) {

    .wrapper {
        top: 2%;
        left: 68%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -19%;
        right: 4%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 5%;
        top: -10%;
        right: 22%;
    }

    .sdmokup1 {
        max-width: 60%;
    }

    .sdmokup2 {
        max-width: 21%;
        top: 22%;
        right: 21%;
    }

    .sdmokup3 {
        max-width: 11%;
        top: 40%;
        right: 14%;
    }

    .sdmokup4 {
        max-width: 11%;
        top: 55%;
        right: 27.1%;
    }

    .populerimg {
        margin: 0 0 -12% 0;
    }

    .items {
        padding-bottom: 77.5%;
    }

    .t3 {
        font-size: 16px;
    }

    .problemtext {
        margin-top: 10%;
    }

}

@media only screen and (min-width: 1100px) {

    .wrapper {
        top: 2%;
        left: 68%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -19%;
        right: 5%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 5%;
        top: -10%;
        right: 22%;
    }

    .sdmokup1 {
        max-width: 60%;
    }

    .sdmokup2 {
        max-width: 21%;
        top: 22%;
        right: 21%;
    }

    .sdmokup3 {
        max-width: 11%;
        top: 40%;
        right: 14%;
    }

    .sdmokup4 {
        max-width: 11%;
        top: 55%;
        right: 27.1%;
    }

    .populerimg {
        margin: 0 0 -12% 0;
    }

    .items {
        padding-bottom: 75.5%;
    }

    .t3 {
        font-size: 16px;
    }

    .problemtext {
        margin-top: 10%;
    }

}

@media only screen and (min-width: 1200px) {

    .wrapper {
        top: 5%;
        left: 67%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -19%;
        right: 7%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 5%;
        top: -10%;
        right: 25%;
    }

    .sdmokup1 {
        max-width: 60%;
    }

    .sdmokup2 {
        max-width: 21%;
        top: 22%;
        right: 21%;
    }

    .sdmokup3 {
        max-width: 11%;
        top: 40%;
        right: 14%;
    }

    .sdmokup4 {
        max-width: 11%;
        top: 55%;
        right: 27.1%;
    }

    .populerimg {
        margin: 0 0 -12% 0;
    }

    .items {
        padding-bottom: 73%;
    }

    .t3 {
        font-size: 20px;
    }

    .problemtext {
        margin-top: 10%;
    }

}


@media (min-width:1300px) {
    .mycontainer {
        width: 1120px;
    }

    .mycontainer2 {
        width: 1180px;
    }

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1250px;
    }

    .wrapper {
        top: 5%;
        left: 67%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -19%;
        right: 8%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 5%;
        top: -10%;
        right: 25%;
    }

    .sdmokup1 {
        max-width: 60%;
    }

    .sdmokup2 {
        max-width: 21%;
        top: 22%;
        right: 21%;
    }

    .sdmokup3 {
        max-width: 11%;
        top: 40%;
        right: 14%;
    }

    .sdmokup4 {
        max-width: 11%;
        top: 55%;
        right: 27.1%;
    }

    .populerimg {
        margin: 0 0 -9% 0;
    }

    .items {
        padding-bottom: 67%;
    }

    .t3 {
        font-size: 20px;
    }

    .problemtext {
        margin-top: 8%;
    }

}

@media (min-width:1400px) {
    .mycontainer {
        width: 1160px;
    }

    .mycontainer2 {
        width: 1219px;
        ;
    }

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1298px;
    }

    .wrapper {
        top: 5%;
        left: 67%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -19%;
        right: 11%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 5%;
        top: -10%;
        right: 26%;
    }

    .sdmokup1 {
        max-width: 60%;
    }

    .sdmokup2 {
        max-width: 21%;
        top: 22%;
        right: 21%;
    }

    .sdmokup3 {
        max-width: 11%;
        top: 40%;
        right: 14%;
    }

    .sdmokup4 {
        max-width: 11%;
        top: 55%;
        right: 27.1%;
    }

    .populerimg {
        margin: 0 0 -8.1% 0;
    }

    .items {
        padding-bottom: 61%;
    }

    .t3 {
        font-size: 20px;
    }

    .problemtext {
        margin-top: 8%;
    }


}

@media (min-width:1500px) {
    .mycontainer {
        width: 1310px;
    }

    .mycontainer2 {
        width: 1219px;
    }

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1363px;
    }

    .wrapper {
        top: 5%;
        left: 67%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -19%;
        right: 13%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 5%;
        top: -10%;
        right: 27%;
    }

    .sdmokup1 {
        max-width: 60%;
    }

    .sdmokup2 {
        max-width: 21%;
        top: 22%;
        right: 21%;
    }

    .sdmokup3 {
        max-width: 11%;
        top: 40%;
        right: 14%;
    }

    .sdmokup4 {
        max-width: 11%;
        top: 55%;
        right: 27.1%;
    }

    .populerimg {
        margin: 0 0 -7.8% 0;
    }

    .items {
        padding-bottom: 57.5%;
    }

    .t3 {
        font-size: 22px;
    }

    .problemtext {
        margin-top: 6%;
    }

}


@media (min-width:1600px) {
    .mycontainer {
        width: 1310px;
    }

    .wrapper {
        top: 5%;
        left: 66%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -19%;
        right: 13%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 5%;
        top: -10%;
        right: 26%;
    }

    .sdmokup1 {
        max-width: 60%;
    }

    .sdmokup2 {
        max-width: 100%;
        top: 21%;
        right: 15%;
    }

    .sdmokup3 {
        max-width: 100%;
        top: 40%;
        right: 5.5%;
    }

    .sdmokup4 {
        max-width: 100%;
        top: 53%;
        right: 23.1%;
    }

    .populerimg {
        margin: 0 0 -7.8% 0;
    }

    .items {
        padding-bottom: 53.5%;
    }

    .t3 {
        font-size: 22px;
    }

    .problemtext {
        margin-top: 6%;
    }

}

@media (min-width:1700px) {
    .mycontainer {
        width: 1380px;
    }

    .wrapper {
        top: 8%;
        left: 74%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -19%;
        right: 2%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 100%;
        top: -10%;
        right: 15%;
    }

    .sdmokup1 {
        max-width: 100%;
    }

    .sdmokup2 {
        max-width: 100%;
        top: 21%;
        right: 9%;
    }

    .sdmokup3 {
        max-width: 100%;
        top: 40%;
        right: 1.5%;
    }

    .sdmokup4 {
        max-width: 100%;
        top: 51%;
        right: 17.5%;
    }

    .populerimg {
        margin: 0 0 -6.8% 0;
    }

    .items {
        padding-bottom: 50.5%;
    }

    .t3 {
        font-size: 24px;
    }

    .problemtext {
        margin-top: 6%;
    }
}


@media (min-width:1800px) {
    .mycontainer {
        width: 1470px;
    }

    .wrapper {
        top: 8%;
        left: 70%;
        z-index: 2;
    }

    .arrowtext1 {
        top: -24%;
        right: 17%;
        padding: 5px 0;
    }

    .arrow1 {
        max-width: 100%;
        top: -9%;
        right: 19%;
    }

    .sdmokup1 {
        max-width: 100%;
    }

    .sdmokup2 {
        max-width: 100%;
        top: 22%;
        right: 14%;
    }

    .sdmokup3 {
        max-width: 100%;
        top: 37%;
        right: 5.5%;
    }

    .sdmokup4 {
        max-width: 100%;
        top: 53%;
        right: 21%;
    }

    .populerimg {
        margin: 0 0 -6.8% 0;
    }

    .items {
        padding-bottom: 47%;
    }

    .t3 {
        font-size: 26px;
    }

    .problemtext {
        margin-top: 5%;
    }

}

@media (min-width:1900px) {

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1363px;
    }

    .mycontainer {
        width: 1570px;
    }

    .mycontainer2 {
        width: 1384px;
    }


    .wrapper {
        top: 7%;
        left: 66%;
        z-index: 2;
    }

    .arrow1 {
        max-width: 100%;
        top: -13%;
        right: 26%;
    }

    .arrowtext1 {
        padding: 5px 0;
        top: -23%;
        right: 14%;
    }

    .sdmokup1 {
        max-width: 100%;
    }

    .sdmokup2 {
        max-width: 100%;
        top: 23%;
        right: 19%;
    }

    .sdmokup3 {
        max-width: 100%;
        top: 39%;
        right: 11%;
    }

    .sdmokup4 {
        max-width: 100%;
        top: 56%;
        right: 25.1%;
    }

    .populerimg {
        margin: 0 0 -6.4% 0;
    }

    .arrow2 {
        max-width: 100%;
        bottom: 14%;
        left: 8%;
    }

    .items {
        padding-bottom: 47%;
    }

    .t3 {
        font-size: 26px;
    }

    .problemtext {
        margin-top: 5%;
    }

}

@media (min-width:2000px) {}


.mt0 {
    margin-top: 0%;
}

.mt1 {
    margin-top: 1%;
}

.mt2 {
    margin-top: 2%;
}

.mt3 {
    margin-top: 3%;
}

.mt4 {
    margin-top: 4%;
}

.mt5 {
    margin-top: 5%;
}

.mt6 {
    margin-top: 6%;
}

.mt7 {
    margin-top: 7%;
}

.mt8 {
    margin-top: 8%;
}

.mt9 {
    margin-top: 9%;
}

.mt10 {
    margin-top: 10%;
}

.mt11 {
    margin-top: 11%;
}

.mt12 {
    margin-top: 12%;
}

.mt13 {
    margin-top: 13%;
}

.mt14 {
    margin-top: 14%;
}

.mt15 {
    margin-top: 15%;
}

.mt17 {
    margin-top: 17%;
}

.mt20 {
    margin-top: 20%;
}

.mt22 {
    margin-top: 22%;
}

.mt26 {
    margin-top: 26%;
}

.mt28 {
    margin-top: 28%;
}

.mtm14 {
    margin-top: -14%;
}

.mtm4 {
    margin-top: -4%;
}

.mtm1 {
    margin-top: -1%;
}

.mtm2 {
    margin-top: -2%;
}

.mtm3 {
    margin-top: -3%;
}

.mtm6 {
    margin-top: -6%;
}

.mtm8 {
    margin-top: -8%;
}

.mtm9 {
    margin-top: -9%;
}

.mtm20 {
    margin-top: -20%;
}

.mtm12 {
    margin-top: -12px;
}

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

/* ==============================
   Glassmorphic Navigation Styles
================================= */
.navbar {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    position: relative;
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.nav-link {
    font-weight: 500;
    color: #333 !important;
    position: relative;
    padding: 12px 10px !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0 2px;
}

.nav-link:hover {
    color: #589d0e !important;
    background: rgba(40, 167, 69, 0.1);
    transform: translateY(-2px);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1.5px;
    bottom: 0;
    left: 50%;
    background: linear-gradient(90deg, #589d0e, #bde513);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 80%;
}

/* ==============================
   Glassmorphic Mega Menu
================================= */
.mega-menu {
    position: absolute !important;
    top: 100%;
    left: 50% !important;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px 0;
    margin: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.dropdown:hover .mega-menu,
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mega-menu .container {
    max-width: 1200px;
}

.mega-menu .dropdown-header {
    color: #589d0e;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(40, 167, 69, 0.2);
    position: relative;
}

.mega-menu .dropdown-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #bde513, #589d0e);
    border-radius: 2px;
}

.mega-menu .dropdown-item {
    padding: 12px 16px;
    color: #555;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
}

.mega-menu .dropdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(40, 167, 69, 0.1), transparent);
    transition: left 0.5s ease;
}

.mega-menu .dropdown-item:hover {
    color: #589d0e;
    background: rgba(40, 167, 69, 0.08);
    transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}

.mega-menu .dropdown-item:hover::before {
    left: 100%;
}

/* Mega Menu Column Hover */
.mega-menu .col-md-3 {
    padding: 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.mega-menu .col-md-3:hover {
    background: rgba(40, 167, 69, 0.03);
    transform: translateY(-2px);
}

/* ==============================
   Glassmorphic Button
================================= */
.btn-success {
    background: linear-gradient(135deg, #bde513, #589d0e);
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    box-shadow: 0 8px 20px #589d0e;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #589d0e, #bde513);
}

.btn-success:hover::before {
    left: 100%;
}

/* ==============================
   Slider Buttons
================================= */
.slider-btnn {
    position: relative;
    z-index: 10;
}

.slider-btnn a {
    position: relative;
    z-index: 11;
    display: inline-block;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #bde513, #589d0e);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}

.slider-btnn a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.slider-btnn a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #589d0e, #bde513);
}

.slider-btnn a:hover::before {
    left: 100%;
}
/* ==============================
   Responsive Styles
================================= */

/* Large tablets and below */
@media (max-width: 991px) {
  .navbar {
    background: rgba(255, 255, 255, 0.98) !important;
  }
  .mega-menu {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    display: block !important;
  }
  .mega-menu .row {
    flex-direction: column;
    margin: 0;
  }
  .mega-menu .col-md-3,
  .mega-menu .col-md-6 {
    width: 100% !important;
    max-width: unset !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    flex: unset !important;
  }
  .mega-menu .dropdown-header {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(40,167,69,0.1), rgba(40,167,69,0.05));
    border-radius: 12px;
    font-weight: 600;
    color: #28a745;
    border: 1px solid rgba(40,167,69,0.1);
    margin-bottom: 0.5rem;
  }
  .mega-menu .dropdown-item:hover {
    transform: translateX(5px);
    border-left: 3px solid #bde513;
    background: rgba(40,167,69,0.1);
  }
  .btn-success, .slider-btnn a {
    width: 100% !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .mega-menu .col-md-3,
  .mega-menu .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Small mobile devices */
@media (max-width: 576px) {
  .navbar-brand img {
    height: 35px;
  }
  .mega-menu {
    max-height: 60vh;
  }
  .mega-menu .dropdown-header {
    font-size: 0.9rem;
    padding: 0.75rem;
  }
  .mega-menu .dropdown-item {
    font-size: 0.85rem;
    padding: 0.75rem;
  }
  .mega-menu .col-md-3,
  .mega-menu .col-md-6 {
    width: 100% !important;
    margin-bottom: 1rem !important;
    height: auto !important;
    max-width: unset !important;
    padding: 0 !important;
    flex: unset !important;
  }
}


/* Horizontal dropdown: make row flex direction row and items inline */
.horizontal-dropdown .row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.horizontal-dropdown .dropdown-item {
  white-space: nowrap; 
  text-align: center;
  padding: 1rem 1.5rem;
}

/* Optional: adjust for smaller screens */
@media (max-width: 768px) {
  .horizontal-dropdown .row {
    flex-wrap: wrap;
  }
  .horizontal-dropdown .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.75rem;
  }
}