:root {

    --btn_color: #ffc000;

    --bg_dark:#1B1B1B;

}

.pb50{

padding-bottom: 50px;

}

.pt50{

padding-top: 50px;

}

.gtranslate_wrapper{

    color: black;

    border-radius: 10px;

}

.logo{

    align-items: center;

    gap: 20px;

}

.mentionedImg{

    

     width: 85px;

    padding: 10px 15px;

    border-radius: 20px;

}

.securedImg{

    width: 85px;

    background-color: white;

    padding: 10px 15px;

    border-radius: 20px;

}

.mentioned{

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

   margin-left: 20px;

}

.p0{

    padding-right: 0 !important;

    padding-left: 0 !important;

}

.hgt{

    height: 50px;

}

.wid{

    width: 115px;

}

.whatsapp-link{

    color: white !important;

    margin-top: 10px;

}

@import url('https://fonts.googleapis.com/css?family=Khula:400,700,800|Merriweather|Roboto:400,700');

*{

    margin: 0;

    padding: 0;

}

.flex {

    display: flex;

}



.grid {

    display: grid;

}



.nav {

    flex-direction: row;

}

.packimg img{

    height: 554px;

    width: 100%;

    aspect-ratio: 2/3;

}

.text-black {

    color: black !important;

}



.logo img {

    width: 90px;

    padding-left: 20px;

}



.menuButton {

    display: none;

}



.ul {

    gap: 20px;

    padding-right: 20px;

    color: white;

}



.image img:hover {

    color: white;

}



.nav {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

}



.menu li a {

    color: black !important;



}



header {

    /* padding: 20px 0px; */

    background-color: rgb(255, 255, 255);

}



.foot img {

    width: 150px;

    padding: 20px 0px;

}



.contact-widget {

    margin-top: 20px;

}



.item img :hover {

    transition: all 1s;

}



.item {

    margin: 20px;

}



.item img {

    width: 80%;

    display: block;

    margin: auto auto;

    border-radius: 50%;



}



.pic:hover {

    width: auto;

    height: 250;

    border-radius: 50% 50%;

    background-color: rgb(199, 199, 10);

    transition: all 1s;

}



.title,

.post {

    margin-top: 15px;

    text-align: center;

}



.aboutUs img {

    width: 100%;

}



#about {

    grid-template-columns: 1fr 1fr;

    text-align: start;

    gap: 20px;

}



.about-wrap {

    padding-left: 20px;

}



.w-100Img img {

    width: 100vw;

}



section ,

div {

    overflow: hidden !important;

    font-family: 'Khula';

}



.parallax-info {

    overflow: hidden;

}



.ourpackages {

    padding: 20px;

}



.cards,

.packageItem {

    flex-direction: column;

    overflow: hidden;

}



.details .flex {

    flex-direction: column;

    gap: 20px;

}



.mybtn {

    background-color: var(--btn_color);

    padding: 10px;

    border-radius: 20px;

}



.packages {

    overflow: hidden;

    padding-top: 20px;

}



.ourpackages {

    font-family: 'Khula', sans-serif;

}



.packageItem {

  background-color: #1B1B1B;

  border-radius: 50px;

  margin: 20px;

  border: 1px solid whitesmoke;

  padding-bottom: 20px;

}





.mybtn:hover {

    background-color: white;

}



.flex li b {

    color: rgb(24, 24, 24);

}



.w-100Img {

    display: none;

}



.ceoGrid {

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}



.ceoimg {

    overflow: hidden;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}



.ceoimg img {

    width: 50%;

}



.title {

    overflow: hidden;

    font-family: 'Khula' !important;

}



.mission-vision {

    overflow: hidden;

}



.mission-vision h3 {

    text-align: start;

}



.CEO {

    padding: 20px;

}



.visible {

    display: none;

}



.missionandvisionbtn {

    overflow: hidden;

    font-weight: 600;

    font-size: 20px;

    display: flex;

    width: 100%;

    background: none;

    border: none;

    text-align: start;

    align-items: center;

    gap: 10px;

}



.buttons {

    margin-top: 20px;

    flex-direction: column;

    gap: 20px;

}



.heading {

    font-size: 40px;

}



.footergrid {

    padding-top: 50px;

    padding-left: 10px;

    padding-bottom: 20px;

    grid-template-columns: 1fr 1fr 1fr 1fr;

    gap: 20px;

}



.overNone {

    overflow: hidden;

}



.menu {

    text-align: start;

    flex-direction: column;

    gap: 20px;

}



.dirCol {

    flex-direction: column;

    gap: 20px;

}



.flogo {

    text-align: start;

}



.menu h4 {

    color: white;

}



.dirCol {

    list-style: disc !important;

}



.dirCol li a {

    padding-left: 5px;

    color: white !important;

    word-wrap: break-word;

}



.leagalsgrid {

    width: 85vw;

    grid-template-columns: 1fr 1fr 1fr 1fr;

    gap: 30px;

}





.fixedvideo {

    width: 100vw;

    height: 100vh;

    position: fixed;

    z-index: -1000;

    top: 0;

}

.fbutton{

    text-align: start;

    background:transparent;

    border: none;

    color: white;

}

section{

    background-color: white;

}

body {

    background-color: white !important;

}



#stickyDiv {

    position: sticky;

    top: 0;

    z-index: 999;

}



.cards h3,

.cards h4 {

    text-align: start;

}

.service-inner{

    overflow: hidden;

}

.partnerLogo img{

    width: 200px;

}

#back_to_top{

    background-color: #ffc000;

    position: fixed;

    bottom: 80px;

    right: 20px;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    z-index: 100000;

}

#back_to_top img{

    padding-top: 10px;



}

#back_to_top:hover{

    background-color: white;

    transition: all 1s;

}

#history_para li ,#current_para li,.orderedOL li,#Future_para li{

    padding-bottom: 10px;

}

.orderedOL{

    list-style:decimal;

    padding-left: 20px;

}

.login_space *{

    overflow: hidden;

}

.template_btn{

    display: block;

    width: 100px;

    background-color: var(--btn_color);

    padding: 10px !important;

    border-radius: 20px !important;

}

.template_btn:hover{

    background-color: black;

    transition: all 1s;

}

.login_space{

    align-items: center;

    flex-direction: column;

    gap: 20px;

    padding: 50px;

}

.bitdeer{

    padding: 20px;

}

.partnerGrid{

    grid-template-columns: 1fr 1fr;

    width: 90vw;

    margin: auto;

}

.texts{

    flex-direction: column;

    gap: 20px;

}

.details{

    margin-top: 20px;

    flex-direction: column;

    gap: 20px;

    text-align: start;

}

.texts h4,.texts h5{

    text-align: start;

}

.imgflex{

    justify-content: center;

    align-items: center;

}

.imgflex img{

    width: 80%;

}

.leagalsgrid img{

    border-radius: 20px;

    padding: 20px;

    border: 2px solid rgb(187, 187, 187);

    box-shadow:1px 8px 11px 0px rgb(97, 97, 97);

}

.active{

    margin-right: 20px;

}

#myVideo {

    position: fixed;

    top: 10px;

    right: 0;

    bottom: 0;

    min-width: 100%;

    min-height: 100%;

    z-index: -100;

  }

  #services,

   #about,

   .assotiations,

   .ourpackages,

   .CEO,

   b,

   .leagals,

   #header,

   .work-wrap,

   .s_text,

   .bitdeer,

   .details,

   .login_space{

    background-color:var(--bg_dark)!important;

    color: white !important;

  }

  .text-white{

    color: white !important;

  }

  .ul li a{

    color: white !important;

    font-size: large;

  }

  .ul{

    background-color: var(--bg_dark) !important;

  }

  .details h5,.details h4{

    color: white !important;

  }

  .login_space h2{

    color: white;

  }

  .counter-container {

    text-align: center;

    background: white;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

.counter-animation {

    transform: scale(1.2);

}

#counter1 ,#counter2,#counter3,#counter4,#counter5 {

    font-size: 48px;

    margin: 20px 0;

    color: white !important;

}

.img_block{

    align-items: center;

    justify-content: center;

    gap: 15px;

}

.counter_flex{

 flex-wrap: wrap;

justify-content: center;

 text-align: center;

 gap: 10px;

}

.single-project-complete{

    padding: 20px !important;

}

.btc{

    font-size: 35px;

}

.s_div{

    width: 85vw;

    margin: auto;

}

.sub-heading{

    font: 600 18px 'Montserrat', sans-serif;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin: 0;

    -webkit-transition: color .2s;

    transition: color .2s;

    margin-bottom: 10px;

}

.sec_pad{

    padding-bottom: 30px;

    padding-top: 30px;

}

.btn_yellow{

    background-color: var(--btn_color);

    color: black;

    font-weight: 600;

}

.partnerLogo {

    background-color: white !important;

    height: 100%;

    width: 100%;

    display: grid;

    place-items: center;

}

.partnerLogo img {

width: 90%;

}

.assocCoursoul,.securedCoursoul{

    background-color: white !important;

    height: 176px;

}

.owl-wrapper-outer, .owl-wrapper, .owl-item{

    height: 100% !important;

}

.icon_point {

    align-items: center;

    justify-content: center;

    gap: 5px;

}

.icon_point img{

    margin-top: 10px;

}

.flogo{

    padding: 20px;

}

.cookie-banner {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #6b6b6b;

    color: rgb(241, 241, 241);

    padding: 15px;

    text-align: center;

    display: none; /*Initially hidden*/

    z-index: 100;

    opacity: 0; /* Start hidden */

    transition: opacity 0.5s ease; /* Smooth transition for opacity */

}



.cookie-banner.show {

    background-color: #494949;

    display: block; /* Show the banner */

    opacity: 1; /* Fade in */

}



.cookie-banner.hide {

    opacity: 0; /* Fade out */

}

#accept-cookies{

   background-color: #ffc000;

   padding: 5px 20px;

   color: black;

   border: none;

   border-radius: 10px;

}

.missionandvisionbtn img{

transform: rotate(-90deg);

}

.icon_point a{

    font-size: 40px;

    margin-bottom: 16px;

    color: #25D366

}

.contact{

    color:white;

    background-color: var(--bg_dark);



}

.contact_form{

    padding-top: 40px;

    width: 90vw;

    margin: auto;

}

.form {

    display: flex;

    flex-direction: column;

}

.form-label {

    margin-bottom: 5px;

}

.form-input, .form-textarea {

    padding: 10px;

    margin-bottom: 15px;

    border: 1px solid #ccc;

    border-radius: 4px;

    width: 80%;

}

.form-button {

    padding: 10px;

    background: var(--btn_color);

    color: #000000;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    width: 150px;

    font-weight: bolder;

}

.form-button:hover {

    background: #555;

    transition: all 0.75s ease;

}

.flist a{

 font-size: medium;

 margin-bottom: 0;

 word-break: break-all;

}



.lastOne{

    list-style: none !important;

}

.flist{

    justify-content: start !important;

    gap: 5px;

    align-items: first baseline;

}

.cookies-btn{

    width: 90vw;

    justify-content: space-around;

}

#close-cookies{

    background: none;

    color: white;

    border: none;

}

.do_not_show{

    display: none !important;

}

.popup {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup.active {
    visibility: visible;
    opacity: 1;
}

.popup-content {
    background: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    max-width: 90%;
    width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px; /* Increased size */
    color: white; /* Changed color to white */
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    padding: 5px;
    transition: transform 0.2s ease;
}

.close-button:hover {
    transform: scale(1.2); /* Slightly enlarge on hover */
}

.popup-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
}

.popup-text {
    font-size: 16px;
    color: #333;
}

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

    #banner-slider{

        height: 620px;

    }

    .s_div{

        width: 90vw;

    }

    #howorks {

        padding-bottom: 0px !important;

    }

    #counter1 ,#counter2,#counter3,#counter4,#counter5 {

        font-size: 28px;

        margin: 20px 0;

        color: white !important;

    }

    .packimg img{

        height: 450px;

        width: 100%;

    }

    .menuButton {

        display: block;

        background: transparent;

        border: none;

    }



    .ul {

        display: none;

        padding-right: 0;

    }



    .logo {

        justify-content: space-between;

        width: 100vw;

    }



    .logo .logoImg {

        width: 70px;

        align-self: center;

    }



    .nav {

        flex-wrap: wrap;

        padding-left: 0px;

        padding-right: 0px;

        justify-content: space-around;

    }



    .show {

        display: flex !important;

        flex-direction: column;

        background-color: white;

        padding-top: 20px;

        padding-bottom: 20px;

        width: 100vw;

        align-items: center;

    }



    header {

        padding: 0px;

    }



    .aboutUs img {

        width: 100%;

    }



    #about {

        grid-template-columns: 1fr;

    }



    .w-100Img {

        display: block;

    }



    .ceoGrid {

        grid-template-columns: 1fr;

    }



    .heading {

        font-size: 30px;

    }



    .footergrid {

        grid-template-columns: 1fr 1fr;

    }



    .leagalsgrid {

        grid-template-columns: 1fr;

    }

    .missionandvisionbtn {

        font-size: 15px;

    }

    .partnerLogo{

        text-align: center;

    }

    .partnerGrid{

        grid-template-columns:  1fr;

    }

    .slider-content {

        padding: 20px 0px !important;

        position: relative;

        z-index: 11;

    }

    .form-input, .form-textarea {

        width: 100%;

    }

    .form-button {

        padding: 10px;

        background: var(--btn_color);

        color: #000000;

        border: none;

        border-radius: 5px;

        cursor: pointer;

        width: 150px;

        font-weight: bolder;

    }

}