@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
    padding: 0;
    margin: 0;
    font-family: Nunito, 'Poppins', sans-serif;
}


@media screen and (min-width:1024px) {
    .navbar {
        max-width: 100%;
        height: 4.6rem;
        display: flex;
        align-items: center;
        background-color: white;
        position: sticky;
        top: 0px;
        gap: 0.75rem;
        z-index: 100;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        border: 1px solid rgb(245, 244, 244);
    }

    .side-menu,
    .menu-icon {
        display: none;
    }

    .nav-containers {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;
    }

    .nav-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        gap: 2.6rem;
        margin-left: 11.2rem;
    }


    .nav-list a:hover {
        opacity: .8;
    }

    #icon-page a:hover,
    #nav-search-icon a:hover {
        opacity: 1;
    }

    img[alt="nav-search-icon"] {
        width: 1.4rem;
        opacity: .6;
        vertical-align: middle;
    }

    .navbar a {
        text-decoration: none;
        color: #0D0D28;
    }

    .nav-profile {
        width: 48px;
        height: 48px;
        background-color: rgb(247, 251, 254);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border: 1px solid #e5e7eb;
        border-bottom: 3px solid rgb(199, 199, 201);
    }

    .nav-profile img {
        width: 22px;
        height: 22px;
    }

    .login-text {
        display: none;
    }
}


@media screen and (max-width:1023px) {
    .navbar {
        display: flex;
        height: 73px;
        max-width: 100%;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: white;
    }

    .nav-icons {
        display: flex;
        align-items: center;
    }

    .menu-icon {
        width: 1.5rem;
        height: auto;
        margin-left: 1.2rem;
    }

    .menu-icon img {
        margin-top: 5px;
        width: 100%;
    }

    .nav-list,
    .nav-profile {
        display: none;
    }

    .login-text {
        font-size: 14px;
    }

    .side-menu {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: white;
        z-index: 100;
        padding: 5rem 2.5rem;
        font-size: 20px;
        animation: translatex .5s ease;
        display: none;
    }

    @keyframes translatex {
        0% {
            left: -100%;
        }

        100% {
            left: 0%;
        }
    }

    .side-menu ul li {
        list-style: none;
        margin-bottom: 2rem;
    }

    a {
        text-decoration: none;
        color: #0D0D28;
    }

}

@media screen and (max-width: 640px) {
    .side-menu {
        width: 70%;
        font-size: 18px;
    }
}

img[alt="navbar-logo"] {
    width: 11.5rem;
    height: 2.2rem;
    margin-left: 1rem;
}



/* #navbar {
    background-color: white;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#navparent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo styling */
/* #logo img {
    width: 150px;
} */

/* Navigation Links styles */
/* #navlinks {
    display: flex;
    gap: 20px;
} */
/* 
#navlinks a {
    text-decoration: none;
    font-weight: 500;
    color: #000;
    font-size: 1rem;
}

#navlinks a.active {
    font-weight: bold;
    color: #007bff;
}

#navlinks a:hover {
    color: #007bff;
} */



/* Hamburger menu styling */
/* #hamburger-menu {
    cursor: pointer;
    display: none; */
    /* Hidden by default */
    /* flex-direction: column;
    justify-content: space-between;
    width: 30px; */
    /* Width for the hamburger icon */
    /* height: 20px; */
    /* Height for the hamburger icon */
/* } */

/* #hamburger-menu div { */
    /* height: 3px; */
    /* Thickness of the hamburger lines */
    /* background-color: #000; */
    /* Color of the hamburger lines */
    /* transition: all 0.3s ease; */
    /* Animation for the transformation */
/* } */

/* Sidebar menu styles */
/* .side-menu {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white; */
    /* White background */
    /* overflow: hidden;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 1000;
    /* Above other content */
    /* box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}

.side-menu a { */
    /* padding: 10px 15px;
    text-decoration: none;
    font-size: 1.5rem; */
    /* Increased font size */
    /* color: black; */
    /* Dark text color */
    /* display: block;
    transition: 0.3s; */
/* } */
/* 
.side-menu a:hover {
    font-weight: bolder;
}

#close-menu {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 36px;
    color: black; */
    /* Close icon color */
    /* cursor: pointer; */
/* } */

/* User sign-in button */
/* #nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
} */

#signinbtn {
    border: none;
    background-color: transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(242, 246, 249);
    border: none;
    cursor: pointer;
    border-bottom: 2px solid #525559;
    display: flex;
    justify-content: center;
    align-items: center;
}

#signinbtn img {
    width: 35px;
    height: 35px;
}



#signinbtn:hover {
    background-color: #d1e7fd;
}

#signinbtn img {
    display: block;
    width: 100%;
    height: auto;
}


/* <-------- main section ------> */
main {
    background-image: url("https://hugeicons.com/home/top_header_background.svg");
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom-color: 2px solid rgb(229, 229, 229);
}

#in1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

#maind1 {
    padding-top: 15%;
    margin: auto;
    text-align: center;
    margin-bottom: 0;
    font-family: '__ceraVariable_4b5655', '__ceraVariable_Fall', sans-serif;
}

#maind1>h1 {
    font-size: 3.4em;
}

#maind1 h3 {
    font-size: 1.9em;
    font-weight: lighter;
    color: #525559;
}

#maind1 input {
    width: 80%;
    /* Use percentage for responsiveness */
    max-width: 500px;
    /* Optional max-width to limit size on larger screens */
    border-radius: 50px;
    border: 4px solid rgb(212, 212, 212);
    padding: 2.2%;
    height: 4.5rem;
    position: relative;
}

#in1 {
    position: relative;
}

#in1 input {
    padding: 1em 3em 1em 2em;
    /* Adjust padding for icon */
}

@media (max-width:420px) {
    #in1 p {
        display: none;
    }
}

#in1 p {
    position: absolute;
    color: gray;
    left: 56%;
    font-size: 0.9em;
    font-weight: lighter;
    line-height: 1px;
    text-wrap: nowrap;
}

#in1 input::placeholder {
    font-size: 1.2em;
}

#in1 i {
    position: absolute;
    right: 35%;
    /* Adjust to keep icon inside the input */
    top: 50%;
}

#maind2 {
    margin: auto;
    margin-top: 50px;
    text-align: center;
    width: 50%;
    background-color: #f8f9fb;
    padding-bottom: 1%;

    animation: fadeInText 1.5s ease-in-out forwards;
    /* Text animation */
}

#maind2 img {
    width: 9%;
    animation: zoomIn 5s infinite forwards;
    animation-delay: 0.5s;
    /* Delay for first image */
}

#maind2 {
    border: 2px solid #eceff4;
    border-radius: 35px;
}


/* Adding animation delays for each image to create a staggered effect */
#maind2 img:nth-child(2) {
    animation-delay: 0.7s;
}

#maind2 img:nth-child(3) {
    animation-delay: 0.9s;
}

#maind2 img:nth-child(4) {
    animation-delay: 1.1s;
}

#maind2 img:nth-child(5) {
    animation-delay: 1.3s;
}

#maind2 img:nth-child(6) {
    animation-delay: 1.5s;
}

#maind2 img:nth-child(7) {
    animation-delay: 1.7s;
}

/* Animation keyframes */

/* Fade-in and slide-up animation for the text */
@keyframes fadeInText {
    0% {
        opacity: 0;
        transform: translateY(50px);
        /* Text starts lower */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        /* Final position */
    }
}

/* Zoom-in animation for the images */
@keyframes zoomIn {
    0% {
        border: 2px solid black;
        opacity: 1;
        transform: scale(0.8);
        /* Start smaller */
    }

    100% {
        opacity: 1;
        transform: scale(1);
        /* End at normal size */
    }
}



/* -----------------section svg--------- */
#svgp {
    /* background-color: antiquewhite; */
    display: flex;
    /* justify-content: center; */
    gap: 1%;
}

#svgc {
    /* background-color: rgb(255, 0, 255); */
    padding: 2.2%;

    /* margin-left: 3%; */
    margin-bottom: 2%;
    text-align: center;
    border-radius: 20px;
    width: 50%;
    height: 35vh;

}

#svgc h3 {
    color: #525559;
    font-weight: lighter;
    padding-top: 0.2em;
}

#svgc h1 {
    /* margin-bottom: 0; */
    font-size: 1.4em;
    line-height: 1px;
    margin-top: 30%;
}

#svgc:first-child {
    background-color: #ffd7d7;
}

#svgc:nth-child(2) {
    background-color: #d6f0f1;
}

#svgc:nth-child(3) {
    background-color: #ffebd6;
}

#svgc:nth-child(4) {
    background-color: #ddeeff;
}


#svgc:nth-child(5) {
    background-color: #ffeae9;
}

section>h3 {
    width: 100%;
    text-align: center;
    padding-top: 5em;
    color: gray;
    font-size: 1.8em;
    font-weight: lighter;
    font-family: '__ceraVariable_4b5655', '__ceraVariable_Fall', sans-serif;

}

section>h1 {
    margin-top: 0;
    /* line-height: px; */
    text-align: center;
    font-size: 3em;
    font-family: '__ceraVariable_4b5655', '__ceraVariable_Fall', sans-serif;
}

#svgb1 {
    border-radius: 50%;
    border: none;
    background-color: #0d0d12;
    padding: 0.4em;
    margin-left: 80%;
    margin-top: 30%;
}

#svgpb1 {
    padding-top: 1em;
    display: flex;
    justify-content: center;
    /* align-items: end; */
    width: 100%;
    margin-top: 15%;
    /* margin-left: 15%; */
    /* gap: 15%; */
}

#svgb2 {

    border-radius: 50%;
    border: none;
    background-color: #0d0d12;
    padding: 0.4em;
    margin-top: 15%;
    cursor: pointer;
    /* margin-top: 5em; */
    /* margin-right:15%; */

}

#svgp2 {
    margin-top: 20%;
    display: flex;
    padding: 0.4em;
    cursor: pointer;
    /* margin-bottom: 0; */
    /* padding-bottom:100%; */
    /* justify-content:center; */
    gap: 10%;
    /* margin-left: 15%; */
}

/* #svgtxt{
    margin-right: 5%;
} */

/* -----------------section svg--------- */

/* --------------earthimgsection-------- */

#earth {
    display: flex;
    padding-bottom: 8%;
    justify-content: space-around;
    padding-top: 5%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#e1 img {
    margin-top: 1em;
    padding-top: 20%;
    padding-left: 30%;
    width: 40%;
    /* Ensure the image rotates around its center */
    transform-origin: center;

    /* Rotation animation */
    animation: rotateEarth 12s linear infinite;
}

@keyframes rotateEarth {
    0% {
        transform: rotate(0deg) translateX(80px) rotate(0deg);
        /* Starts at the right edge */
    }

    100% {
        transform: rotate(360deg) translateX(80px) rotate(-360deg);
        /* Full circular orbit */
    }
}



#e2 {
    width: 30%;
    display: flex;
    justify-content: space-between;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    flex-wrap: wrap;
    /* gap: 50%; */
}

#e21>div,
#e23>div {
    padding-bottom: 20%;
    width: 45%;
    /* Set width for responsiveness */
    box-sizing: border-box;
    /* Include padding in width */
}

#e21>div>h1,
#e23>div>h1 {
    /* font-family: 'Montserrat', sans-serif; */
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Inter', sans-serif; */
    /* font-family: font-family: "Varela Round", sans-serif; */
    font-family: "Varela Round", sans-serif;
}

#de {
    color: #b18484;
    background-color: #ffeae7;
    border: none;
    border-radius: 5px;
    padding: 0.5em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#ds {
    color: #7b6142;
    background-color: #fbefe1;
    border: none;
    border-radius: 5px;
    padding: 0.5em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


#e23 h3,
#e21 h3 {
    font-weight: 400;
    color: gray;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


@media (max-width: 768px) {
    #earth {
        flex-direction: column;
        /* Stack vertically */
        align-items: center;
        /* Center align content */
        padding: 0;
        /* Remove padding to prevent overlap */
    }

    #e1 img {
        width: 20%;
        /* Adjust image width for mobile */
        height: auto;
        /* Maintain aspect ratio */
        margin: 0;
        /* Remove margins for better alignment */
        padding-bottom: 20px;
        /* Add some space below the image */
    }

    #e2 {
        flex-direction: column;
        /* Stack elements vertically */
        width: 100%;
        /* Full width */
        margin-top: 20px;
        /* Add margin to separate from Earth image */
    }

    #e21>div,
    #e23>div {
        width: 90%;
        /* Set width for responsiveness */
        margin: 20px 0;
        /* Add vertical margin */
        text-align: center;
        /* Center text */
    }

    #e21>div>h1,
    #e23>div>h1 {
        font-size: 1.5em;
        /* Adjust font size for mobile */
    }


}



/* ------------- */
#crd2main {
    background-color: #f8f8f8;
    padding-left: 10%;
    padding-bottom: 5em;
}

#crd2c1>p {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.2em;
    /* line-height: 1em; */
    margin-bottom: 0;
}

#crd2c1>h1 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 3em;
    line-height: 1em;
}

#crd2c1 {
    padding-top: 2%;
    padding-bottom: 5%;
}

#p1 {
    margin-top: 0;
    display: flex;
    justify-content: space-around;
    margin-right: 8%;
    /* gap: 5%; */
    /* background-color: #b18484; */
}

#p1:nth-child(2) {
    margin-top: 2em;
}

#p1 img {
    width: 100%;
    /* height: 40vh; */
}

#crd2c2child {

    width: 32%;
    /* background-color: #b18484; */
}

#crd2c2child>h3 {
    font-weight: bold;
    font-size: 1.6em;

}

#crd2c2child>p {
    font-weight: 500;
    font-size: 1.2em;
    /* line-height:; */
    color: gray;
}

/* -----------------bulid--------- */

#bulid {
    background-color: #17181c;
    padding-left: 10%;
    padding-bottom: 5em;
}

#blc1>p {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.8em;
    color: #83848a;
    /* line-height: 1em; */
    margin-bottom: 0;
    font-weight: lighter;
}

#blc1>h1 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 3em;
    line-height: 1em;
    color: #f9ffee;
}

#blc1 {
    padding-top: 2%;
    padding-bottom: 5%;
}

#p2 {
    margin-top: 0;
    display: flex;
    justify-content: space-around;
    margin-right: 8%;
    /* gap: 5%; */
    /* background-color: #b18484; */
}

#p2:nth-child(2) {
    margin-top: 2em;
}

#p2 img {
    width: 100%;
    height: 40vh;
}

#blc2child {

    width: 29%;
    /* background-color: #b18484; */
}

#blc2child span {
    /* line-height: 5%; */
    font-weight: bold;
    color: #f8f8f8;
    font-size: 1em;

}

#blc2child>p {
    font-weight: 500;
    font-size: 1.2em;
    /* line-height:; */
    color: #737479;
}

#bl h1 {
    /* color: rgb(44, 158, 80); */
    color: #969bae;
}

#bl img {
    width: 5%;
}

/* ------------------------- */


/* ------------------------------------- */

#btl {
    /* text-align: center; */
    margin-top: 50px;
    margin-left: 20%;
}

h1 {
    font-size: 2.5rem;
    font-family: Arial, sans-serif;
}

#animated-text {
    font-weight: bold;

}

.cursor {
    font-weight: bold;
    font-size: 2.5rem;
    color: rgb(32, 154, 61);
    animation: blink 0.7s steps(2, start) infinite;
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}







/* ----------------video---------------- */

#vidparent {
    padding: 5em;
    padding-left: 20%;
}

#vc1 h1 {
    font-size: 2.5em;
    line-height: 0.2em;
}

#vc1 p {
    color: #83848a;

    font-size: 1.2em;
}

video {
    margin-top: 1em;
    position: relative;
    /* width: 80%; */
    /* height: auto; */
    overflow: hidden;
    border: 2px solid #ccc;
    /* Border color */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Shadow effect */
}

#vc3 p {
    color: #83848a;
    font-size: 2.5em;
    line-height: 0.1em;
    font-size: 1.2em;
}

#vc3 h1 {
    font-size: 2.1em;
    /* line-height: 1em; */
}

#vc3 {
    padding-top: 2em;
}

#vc3 h2,
h3 {
    display: inline-block;
}

/* #vc3 button{
    font-size: 1.5em;
    color:blue;
    border: none;
    background-color: transparent;
} */
#vc3 h2 {
    color: #4a71b6;
    font-size: 1.5em;
}

#vb1 {
    background-color: #e7e7e7;
    border: none;
    border-radius: 7px;
    color: #0d0d12;
    padding: 0.9em;
    margin-right: 5%;
    font-size: 1em;
    font-weight: bold;
}

#vb2 {
    background-color: #afe77c;
    border: none;
    border-radius: 7px;
    color: #0d0d12;
    padding: 1em;
    margin-right: 5%;
    font-size: 0.9em;
    padding-left: 2em;
    padding-right: 1.5em;
    font-weight: bold;
}


/* ---------------after video  firstdiv---- */
#vide0 img {
    width: 80%;
}

#vc4 p {
    color: #83848a;
    font-size: 2.5em;
    line-height: 0.1em;
    font-size: 1.2em;
}

#vc4 h1 {
    font-size: 2rem;
    /* line-height: 1em; */
}

#vc4 {
    padding-top: 2rem;
}

#vc4 h2 {
    color: #4a71b6;
    font-size: 1.3em;
    line-height: 1em;
}





/* <-------- Responsive Styles ------> */

@media (max-width: 768px) {
    #maind1 h1 {
        font-size: 2.5em;
        /* Reduced font size */
    }

    #maind1 h3 {
        font-size: 1.5em;
        /* Reduced font size */
    }

    #in1 input {
        width: 90%;
        /* Adjust width for smaller screens */
    }
}




@media (max-width: 915px) {
    #signinbtn {
        width: 35px; 
        height: 35px; 
    }
}

@media (max-width: 480px) {
    #signinbtn {
        width: 30px; 
        height: 30px; 
    }
}

@media (max-width: 370px) {
    body {
        font-size: 10px; 
    }

    #signinbtn {
        width: 25px; 
        height: 25px; 
    }
}

@media (max-width: 200px) {
    body {
        font-size: 10px; 
    }

    #signinbtn {
        width: 25px; 
        height: 25px; 
    }
}


@media (max-width: 768px) {
    #in1 {
        width: 90%;
        /* Adjust input width for smaller screens */
    }

    #in1 input {
        padding: 8px 35px 8px 8px;
        /* Adjust padding for smaller screens */
        font-size: 0.9rem;
        /* Adjust font size */
    }

    #in1 i {

        position: absolute;

        font-size: 0rem;
        /* Reduce icon size slightly */
    }
}

/* @media (min-width: 800px) and (max-width: 2000px)
{
    #in1 i {

        position: absolute;
       
        font-size: 0rem; 
    }
} */


#image-sliders {
    width: 100%;
    height: auto;
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: rgb(248 248 249);
    margin-top: 100px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

#image-sliders h1 {
    width: 30rem;
    margin: auto;
    font-size: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 5em;
}

.slider1 {
    display: flex;
    width: calc(560px * 14);
    gap: 1rem;
    animation: scroll 100s linear infinite;
}

.slider1>div img {
    width: 100%;
    height: 100%;
}

.slides {
    width: 50rem;
    height: 30rem;
    display: flex;
    align-items: center;
}

@keyframes scroll {
    0% {
        transform: translateX(calc(-560px * 7));
    }

    100% {
        transform: translateX(0);
    }
}

.slider2 {
    display: flex;
    width: 150%;
    gap: 1rem;
    overflow: hidden;
    /* animation: scroll-reverse 100s linear infinite; */
    animation: scroll-reverse 10s linear infinite;
}

.slides-2 {
    display: flex;
    height: 30rem;
}

.slides-2 img {
    height: 100%;
    width: auto;
    max-width: none;
}

/* @keyframes scroll-reverse {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
} */


@keyframes scroll-reverse {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.33%);
        /* transform: translateX(-50%);  */
        /* Adjust to -50% to allow seamless looping */
    }
}




#the-creator {
    color: rgb(204, 201, 201);
    font-size: 14px;
}

.head-info {
    width: 100%;
    margin-top: 7rem;
    text-align: center;
    background: linear-gradient(0deg, rgba(244, 247, 249, 1) 0%, rgba(235, 239, 241, 1) 0%, rgba(255, 255, 255, 1) 100%);
    padding-bottom: 6rem;
}

.head-info-desc h2 {
    font-size: 36px;
}

.head-info-desc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.head-info-desc p {
    margin-left: 1rem;
    margin-bottom: -1rem;
    background-color: rgb(228 235 239);
    padding: .4rem .6rem;
    border-radius: 2rem;
    font-size: 13px;
    letter-spacing: 1px;
}

.head-info-roles {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    gap: 3rem;
}

.head-role {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    transition: color 0.3s ease;
    color: rgb(152 165 174);
}

.head-role:active {
    color: rgb(83, 160, 5);
}

.head-info-roles>div:first-child {
    color: rgb(83, 160, 5);
}



/* ---------------- */

/* Styles for the button when it's active (clicked) */
.head-role.active {
    font-size: 1.5em;
    color: #4CAF50;
    /* Parrot green color for text */
}

.head-role.active img {
    filter: brightness(0) saturate(100%) invert(51%) sepia(29%) saturate(2368%) hue-rotate(65deg) brightness(96%) contrast(85%);
    /* The above filter will turn the icon green */
}

/* Default state for icons */
.head-role img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(6%) saturate(58%) hue-rotate(173deg) brightness(96%) contrast(89%);
}




.head-pic {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 1rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.head-pic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid white;

}

.head-info-container {
    max-width: 45rem;
    margin: auto;
}

.head-info-box {
    margin-top: 2rem;
    flex-direction: column;
    gap: 2rem;
    display: none;
}

.head-info-container>div:first-child {
    display: block;
}

.head-info-box>p:first-child {
    font-size: 36px;
    width: 45rem;
    max-width: 100%;
}

.head-info-box>p:last-child {
    font-size: 18px;
}

.head-info-box>p:last-child span {
    color: rgb(116 120 130);
}

.head-info-box>p:last-child span span {
    font-size: 20px;
}







/* Parent container for the slider */
#icoinslider_parent {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Flexbox for slider with infinite scrolling effect */
#icoin_first_slid_parent {
    display: flex;
    animation: icoin_slider 4s linear infinite;
    gap: 15px;
    /* Space between icons */
}

/* Styling each icon item like a pill-shaped button */
.icoin_item {
    /* margin-top: 1em; */
    background-color: white;
    border-radius: 30px;
    /* Pill shape */
    padding: 8px 20px;
    /* Space inside the pill */
    display: flex;
    /* Align image and text side by side */
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    border: 1px solid #e0e0e0;
    /* Light border for separation */
    transition: transform 0.3ms ease;
}

/* Image inside the pill */
.icoin_item img {
    width: 24px;
    /* Icon size */
    height: auto;
    margin-right: 10px;
    /* Space between icon and text */
}

/* Text next to the image */
.icoin_item span {
    font-size: 16px;
    font-weight: 500;
    color: #4CAF50;
    /* Green text */
}

/* Adding hover effect to buttons */
.icoin_item:hover {
    transform: translateY(-3px);
    /* Slight lift when hovered */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Keyframes for infinite slider movement */
@keyframes icoin_slider {
    0% {
        transform: translateX(-20%);
    }

    100% {
        transform: translateX(0);
        /* Adjust based on total items */
    }
}



/* ----------------second0--------- */


/* Parent container for the slider */
/* Parent container for the slider */
#icoinslider_parent2 {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Flexbox for slider with infinite scrolling effect */
#icoin_first_slid_parent2 {
    /* margin-top: 1.5em; */
    display: flex;
    gap: 15px;
    animation: icoin_slider2 15s linear infinite;
}

/* Styling each icon item like a pill-shaped button */
.icoin_item2 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    background-color: white;
    border-radius: 30px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    transition: transform 0.3ms ease;
}

/* Image inside the pill */
.icoin_item2 img {
    width: 24px;
    height: auto;
    margin-right: 10px;
}

/* Text next to the image */
.icoin_item2 span {
    font-size: 16px;
    font-weight: 500;
    color: #4CAF50;
}

/* Adding hover effect to buttons */
.icoin_item2:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Keyframes for infinite slider movement */
@keyframes icoin_slider2 {
    0% {
        transform: translateX(0);
        /* Start position */
    }

    100% {
        transform: translateX(-33%);
        /* End position, move left half of the items */
    }
}


/* ---------------------- */


#icoinslider_parent3 {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Flexbox for slider with infinite scrolling effect */
#icoin_first_slid_parent3 {
    display: flex;
    animation: icoin_slider3 5s linear infinite;
    gap: 15px;
    /* Space between icons */
}

/* Styling each icon item like a pill-shaped button */
.icoin_item3 {
    margin-bottom: 1em;
    margin-top: 1.5em;
    /* margin-top: 1em; */
    /* background-color: white; */
    border-radius: 30px;
    /* Pill shape */
    padding: 8px 20px;
    /* Space inside the pill */
    display: flex;
    /* Align image and text side by side */
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    border: 1px solid #e0e0e0;
    /* Light border for separation */
    transition: transform 0.1ms ease;
}

/* Image inside the pill */
.icoin_item3 img {

    width: 24px;
    /* Icon size */
    height: auto;
    margin-right: 10px;
    /* Space between icon and text */
}

/* Text next to the image */
.icoin_item3 span {
    font-size: 16px;
    font-weight: 500;
    color: #4CAF50;
    /* Green text */
}

/* Adding hover effect to buttons */
.icoin_item3:hover {
    transform: translateY(-3px);
    /* Slight lift when hovered */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Keyframes for infinite slider movement */
@keyframes icoin_slider3 {
    0% {
        transform: translateX(-20%);
    }

    100% {
        transform: translateX(0);
        /* Adjust based on total items */
    }
}


#icoinslider_txt h1 {
    line-height: 1.2em;
    text-align: center;
    font-size: 2em;
    color: rgb(48, 44, 44);
    font-weight: lighter;
}




/* ------------------support section------------ */

/* #sup_gr_parent{
    margin-left: 30%;
} */


#sup_gr_parent h1 {
    text-align: center;
    margin-top: 5em;
    font-weight: bold;
}

#sup_parent1 {
    display: flex;
    width: 100%;
    gap: 10%;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}

#sup_parent1 {
    display: flex;
    justify-content: space-evenly;
    gap: 1.5em;
    margin: auto;
    width: 60%;
    align-items: center;
    /* background-color: #4e56c5; */
    margin-top: 2.5em;
    line-height: 1em;
    margin-bottom: 1em;
    border-radius: 8px;
}

.sup_ch1 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 50%;
    height: 8rem;
    border-radius: 8px;
}

.sup_ch1:nth-child(1) {
    padding: 1em;
    background-color: #4e56c5;
}

.sup_ch1:nth-child(2) {
    padding: 1em;
    background-color: black;

}

.sup_ch1:nth-child(2) h3 {
    color: #726f65;
    margin-top: 0;
    font-weight: 700;
}

#sup_c1 p {
    line-height: 1.5rem;
    color: white;
    font-weight: 700;
}

#sup_c1 h3 {
    color: #838ada;
    margin-top: 0;
    font-weight: 700;
}

#imcr {
    height: 8vh;
    width: 17%;
    border-radius: 50%;
    background-color: #6169cc;
    margin-top: 0.8em;
    display: flex;
    /* margin: auto; */
    /* margin-top: 0.2em; */
    justify-content: center;
    align-items: center;
}

.sup_ch1:nth-child(2) #imcr {
    background-color: #262629;
}

/* #imcr img { */
/* display: block;
    margin: auto;
    margin-top: 0.2em; */
/* } */


#bigctr {
    background-color: #d4f1b9;
    display: flex;
    width: 60%;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 1em;
    gap: 2em;
    border-radius: 8px;
    margin-bottom: 8em;
    margin-top: 2em;
}

.cr2 {
    height: 11vh;
    width: 10%;
    border-radius: 50%;
    background-color: #bfe2a0;
    margin-top: 0.5em;
    display: flex;
    /* margin: auto; */
    /* margin-top: 0.2em; */
    justify-content: center;
    align-items: center;
}


#bigctr_txt p {
    line-height: 1em;
    font-size: 1.1em;
    font-weight: 700;
}

#bigctr_txt h3 {
    font-size: 1.1em;
}

@media screen and (max-width: 640px) {
    #bigctr {
        width: 60%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: .5rem;
        border-radius: 0px;
        margin-bottom: 2rem;
    }

    .sup_ch1 {
        border-radius: 0;
        width: 100%;
    }

}

/* -----------------backgroundimg2----------- */
#aftern {

    padding-bottom: 18em;
    /* min-height: 100vh; */
    background-size: 100% 80vh;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("https://hugeicons.com/home/pro-footer-sm-bg.png");
}

#aftern>h1 {
    text-align: center;
    /* background-color: #4CAF50; */
    margin: auto;
    color: white;
    padding-top: 5em;
    font-size: 2.5em;
    line-height: 2.4em;

}

#aftern>h4 {
    text-align: center;
    color: white;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 0.5em;
}

#btndivsfter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2em;
    gap: 1rem;

}

@media screen and (max-width:639px) {
    #btndivsfter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        margin: auto;
    }

    #btndivsfter button {
        display: block;
        width: 100%;
        border: 1px solid orange;
    }
}

#btndivsfter>button:nth-child(1) {
    background-color: white;
    color: black;
    padding: 1.1em 2.5em;
    border-radius: 1.5em;
    font-size: 1em;
    font-weight: bold;
    border: none;
}


#btndivsfter>button:nth-child(2) {
    background-color: #4CAF50;
    color: white;
    padding: 1.1em 3em;
    border-radius: 2.5em;
    font-size: 1em;
    font-weight: bold;

    border: none;
}











footer {
    border-top: 2px solid rgb(231, 231, 231);
    padding-left: 3rem;
}

.footer-links-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 5rem;
    gap: 8rem;
    flex-wrap: wrap;
}

.footer-links-container>div p {
    font-size: 16px;
    font-weight: 800;
    line-height: 3rem;
    color: #0D0D28;
}

.footer-links-container a {
    display: block;
    text-decoration: none;
    color: #4f4f50;
    line-height: 2.3rem;
}

.footer-contacts {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgb(236, 236, 236);
    padding: 2rem 0rem;
    margin-top: 3rem;
    color: #4f4f50;
    width: 98%;
    flex-wrap: wrap;
}

.footer-contacts-desc {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-contacts-desc p span {
    opacity: .2;
    margin: 0 .5rem;
}

.footer-social-logos {
    display: flex;
}

.footer-social-logos img {
    display: block;
    width: 1.2rem;
    margin: 0 .5rem;
}

.consent-text {
    font-size: 14px;
}






/* Scoped styling for the card slider */
.custom-slider {
    gap: 5%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Ensure it adapts to the container */
    margin-top: 50px;
}

.custom-card-container {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
    /* justify-content: center; */

}

.custom-card {
    border-radius: 20px;
    padding-top: 2em;
    min-width: 275px;
    margin: 0 15px;
    text-align: center;
    transition: transform 0.5s ease;
    background-color: #4CAF50;
}

.slider-title,
.slider-header {
    margin-top: 10px 0;
}

.custom-card:nth-child(1) {
    background-color: #ffd7d7;
}

.custom-card:nth-child(2) {
    background-color: #d6f0f1;
}

.custom-card:nth-child(3) {
    background-color: #ffebd6;
}


.custom-card:nth-child(4) {
    background-color: #ddeeff;
}

.custom-card:nth-child(5) {
    background-color: #ffeae9;
}


.custom-card:nth-child(6) {
    background-color: #ffebd6;
}

.custom-card:nth-child(7) {
    background-color: #d6f0f1;
}

/* Styling the buttons */
.custom-prev-btn,
.custom-next-btn {
    cursor: pointer;
    padding: 10px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
}

.custom-prev-btn {
    left: 10px;
}

.custom-next-btn {
    right: 10px;
}

/* Media queries to adjust for mobile screens */
@media (max-width: 768px) {
    .custom-slider {
        flex-direction: column;
    }

    .custom-card-container {
        display: block;
        /* Stack SVG icons vertically */
    }

    .custom-card {
        min-width: 200px;
        margin: 0 10px;
    }
    
}












@media (max-width: 768px) {
    #earth {
        flex-direction: column;
        align-items: center;
        padding: 2em 5%;
    }

    #e1 h1 {
        font-size: 2em;
        text-align: center;
        padding: 0 10%;
    }

    #e1 img {
        width: 40%;
        padding-left: 0;
        padding-top: 2em;
        margin-top: 1em;
    }

    #e2 {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #e21,
    #e23 {
        display: flex;
        justify-content: center;
        gap: 2em;
    }

    #e21 div,
    #e23 div {
        text-align: center;
        margin-bottom: 1em;
    }

    #crd2main {
        padding: 2em 5%;
    }

    #p1 {
        flex-direction: column;
        margin-right: 0;
        gap: 2em;
        flex-wrap: wrap;
    }

    #crd2c2child {
        width: 100%;
        text-align: center;
        margin-bottom: 2em;
    }

    #crd2c2child h3 {
        font-size: 1.4em;
        word-wrap: break-word;
        text-align: center;
        line-height: 1.2em;
    }

    #crd2c2child p {
        font-size: 1.1em;
    }

    /* #blc1 h1 {
        font-size: 2.5em;
        text-align: center;
    }

    #blc1 p {
        font-size: 1.5em;
        text-align: center;
        padding: 0 10%;
    }

    #bl img {
        width: 10%;
        margin: 1em;
    }

    #bl {
        text-align: center;
    } */

    #blc1 {
        text-align: center;
    }

    #p2 {
        flex-direction: column;
        align-items: center;
        margin-right: 0;
        gap: 2em;
    }

    #blc2 {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #blc2child {
        width: 80%;
        text-align: center;
        margin-bottom: 2em;
    }

    #blc1 h1 {
        font-size: 2.5em;
    }

    #blc1 p {
        font-size: 1.5em;
        padding: 0 5%;
    }

    #bl img {
        width: 15%;
        margin: 1em;
    }



    #vc1 h1 {
        font-size: 1.8em;
        line-height: 1.4em;
        margin-bottom: 0.5em;
    }

    #vc1 p {
        font-size: 1em;
        line-height: 1.6em;
        margin-bottom: 1em;
    }

    #vc3 h1,
    #vc4 h1 {
        font-size: 1.6em;
        line-height: 1.4em;
        margin-bottom: 0.5em;
    }

    #vc3 p,
    #vc4 p {
        font-size: 0.9em;
        line-height: 1.5em;
        margin-bottom: 1em;
    }

    #vidparent {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2em;
        padding: 1em;
    }

    #vide0 img {
        width: 100%;
        height: auto;
    }

    video {
        width: 100%;
        height: auto;
    }



    #image-sliders h1 {
        width: 100%;
        font-size: 2rem;
        line-height: 2.2rem;
        padding: 0 1rem;
        margin-bottom: 30px;
    }

    .slides {
        width: 100%;
        height: auto;
    }


    #icoinslider_txt h1 {
        font-size: 1.6rem;
        text-align: center;
        line-height: 3rem;
        padding: 0 1rem;
    }

    .head-info {
        padding-bottom: 4rem;
    }

    .head-info-desc h2 {
        font-size: 28px;
        /* Smaller font size for heading */
    }

    .head-info-desc p {
        font-size: 12px;
        /* Adjust font size for paragraph */
        margin-left: 0;
        /* Remove margin for better alignment */
        margin-bottom: 0;
        /* Remove negative margin */
    }

    .head-info-roles {
        flex-direction: column;
        /* Stack roles vertically */
        gap: 1rem;
        /* Reduce gap between items */
        margin-top: 2rem;
        /* Adjust margin */
    }

    .head-role {
        flex-direction: column;
        /* Stack icon and text vertically */
        align-items: center;
        /* Center align items */
        gap: 0.2rem;
        /* Reduce gap */
    }

    .head-role img {
        width: 40px;
        /* Reduce icon size */
        height: 40px;
        /* Reduce icon size */
    }

    .head-info-box p:first-child {
        font-size: 24px;
        /* Smaller font size for quotes */
    }

    .head-info-box p:last-child {
        font-size: 16px;
        /* Adjust font size for name */
    }

    .head-pic {
        width: 70px;
        /* Smaller picture size */
        height: 70px;
        /* Smaller picture size */
    }


    #sup_parent1 {
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    .sup_ch1 {
        width: 90%;
        min-height: auto;
        padding: 1em;
        text-align: left;
    }

    #sup_c1 h2 {
        font-size: 1.2em;
    }

    #sup_c1 h3 {
        font-size: 1em;
        margin-top: 0.5em;
    }

    #bigctr {
        width: 88%;
        padding: 2em;
        text-align: left;
    }

    #bigctr_txt h2,
    #bigctr_txt h3 {
        font-size: 1.2em;
        line-height: 1.4em;
    }

    #aftern {
        padding-bottom: 10em;
        background-size: cover;
        padding-top: 3em;
    }

    #aftern>h1 {
        font-size: 2.5em;
        line-height: 1.5em;
        padding-top: 2em;
    }

    #aftern>h4 {
        font-size: 1.2em;
        line-height: 1.2em;
        padding: 0 1em;
        color: rgb(158, 158, 158);
    }

    #aftern>h4>span {
        color: white;
    }

    #btndivsfter {
        margin-top: 2rem;
        flex-direction: column;
        gap: 1.1em;
        padding-top: 1.5em;
    }

    #btndivsfter>button {
        font-size: 0.9em;
        padding: 0.8em 1.2em;
        margin: 0;
        /* width: 80%; */
        /* max-width: 250px; */
    }


    #in1 i {
        right: 15%;
        /* Adjust icon position on smaller screens */
    }


    #in1 p {
        right: 20%;
    }
}



@media (max-width: 480px) {

    #vc1 h1,
    #vc3 h1,
    #vc4 h1 {
        font-size: 1.4em;
    }

    #vc1 p,
    #vc3 p,
    #vc4 p {
        font-size: 0.8em;
    }

    #vb1,
    #vb2 {
        font-size: 0.9em;
        padding: 0.6em;
    }

    #image-sliders h1 {
        font-size: 1.5rem;
        line-height: 2rem;
        padding: 0 0.5rem;
    }

    .slides {
        height: auto;
    }


    #icoinslider_txt h1 {
        font-size: 1.5rem;
        text-align: center;
        line-height: 2.5rem;
        padding: 0 0.5rem;
    }


    .head-info {
        margin-top: 5rem;
        /* Adjust margin for smaller screens */
    }

    .head-info-desc h2 {
        font-size: 24px;
        /* Even smaller font size for heading */
    }

    .head-info-desc p {
        font-size: 10px;
        /* Smaller font size for paragraph */
    }

    .head-info-roles {
        margin-top: 1rem;
        /* Further adjust margin */
    }

    .head-role {
        font-size: 14px;
        /* Adjust font size for roles */
    }

    .head-info-box p:first-child {
        font-size: 20px;
        /* Smaller font size for quotes */
    }

    .head-info-box p:last-child {
        font-size: 14px;
        /* Adjust font size for name */
    }


    #sup_gr_parent h1 {
        font-size: 1.5em;
    }

    #bigctr {
        padding: 0.5em;
    }

    #bigctr_txt h2 {
        font-size: 1.1em;
    }

    #bigctr_txt h3 {
        font-size: 1em;
    }


}