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

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
    overflow-x: hidden;
}

:root {
    --color: rgb(100, 154, 201);
    --white: white;
    --red: rgb(77, 194, 107);
    --light: rgb(218, 218, 218);
    --gray: rgb(179, 179, 179);
    --black: black;
    --light-blue: rgb(252, 243, 240);
}
header {
    width: 100%;
    height: 70vh;
    background-image: url(../IMAGES/BANNER/BBBB.jpg);
    background-position: center center;
    background-size: cover;
    position: relative;
    margin-bottom: 5%;
}


/* --------------------Guidence Counter-------------------------------------------------- */


.guidence-section{
    width: 100%;
    text-align: center;
    margin-bottom: 5%;
}

.guidence-title{
    margin-bottom: 2%;
}

.guidence-title h4{
    font-family: 'Poppins', sans-serif;
    color: var(--color);
    font-weight: 700;
}


.guidence-title p{
    font-family: 'Poppins', sans-serif;
    color: var(--gray);
}


.guidence-content{
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: var(--color);
    padding: 2%;
}

.guidence-content .guidence-boxs{
    width: 20%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.5px solid var(--light);
    padding: 1%;
    border-radius: 15px;
    transition: 1s;
    cursor: pointer;
}

.guidence-content .guidence-boxs .guidence-icons{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--color);
    transition: 1s;
}

.guidence-content .guidence-boxs .guidence-details h1{
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    transition: 1s;
    font-size: 20px;
}

.guidence-content .guidence-boxs .guidence-details h5{
    font-family: 'Poppins', sans-serif;
    color: var(--light);
    transition: 1s;
    font-size: 15px;
}

.guidence-content .guidence-boxs:hover{
    background-color: var(--white);
}

.guidence-content .guidence-boxs:hover .guidence-icons{
    background-color: var(--red);
    color: var(--white);
}

.guidence-content .guidence-boxs:hover h1{
    color: var(--color);
}


.guidence-content .guidence-boxs:hover h5{
    color: var(--black);
}


/*------------------- Ecosystem section start------------------------- */

.ecosystem-section{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 5%;
    background-color: var(--light-blue);
    padding: 2%;
}

.ecosystem-section .ecosystem-title{
    margin-bottom: 5%;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
}

.ecosystem-section .ecosystem-title h4{
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    color: var(--color);
}

.ecosystem-content{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.ecosystem-boxes{
    border: 0.5px solid var(--gray);
    padding: 5% !important;
    display: flex;
    border-radius: 15px;
    align-items: center;
    transition: 1s;
    cursor: pointer;
}

.ecosystem-boxes:hover{
    background-color: var(--color);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.ecosystem-boxes .ecosystem-icons{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecosystem-boxes .ecosystem-icons img{
    width: 100%;
}


.ecosystem-boxes .ecosystem-details h4{
    text-align: end;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    transition: 1s;
    color: var(--color);
    font-weight: 700;
}

.ecosystem-boxes:hover .ecosystem-details h4{
    color: var(--white);
}




































@media screen and (max-width:320px) {
    
    
/* --------------------Guidence Counter-------------------------------------------------- */


.guidence-section{
    width: 100%;
    text-align: center;
    margin-bottom: 5%;
    padding: 0.5%;
}

.guidence-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color);
    padding: 2%;
}

.guidence-content .guidence-boxs{
    width: 80%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.5px solid var(--light);
    padding: 2%;
    border-radius: 15px;
    transition: 1s;
    margin-bottom: 3%;
    cursor: pointer;
}

}

@media screen and (min-width:321px) and (max-width:425px) {
        
/* --------------------Guidence Counter-------------------------------------------------- */


.guidence-section{
    width: 100%;
    text-align: center;
    margin-bottom: 5%;
    padding: 0.5%;
}

.guidence-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color);
    padding: 2%;
}

.guidence-content .guidence-boxs{
    width: 80%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.5px solid var(--light);
    padding: 2%;
    border-radius: 15px;
    transition: 1s;
    margin-bottom: 3%;
    cursor: pointer;
}
}

@media screen and (min-width:426px) and (max-width:600px) {
        
/* --------------------Guidence Counter-------------------------------------------------- */


.guidence-section{
    width: 100%;
    text-align: center;
    margin-bottom: 5%;
    padding: 0.5%;
}

.guidence-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color);
    padding: 2%;
}

.guidence-content .guidence-boxs{
    width: 80%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.5px solid var(--light);
    padding: 2%;
    border-radius: 15px;
    transition: 1s;
    margin-bottom: 3%;
    cursor: pointer;
}
}

@media screen and (min-width:601px) and (max-width:768px) {
    
}

@media screen and (min-width:769px) and (max-width:900px) {
    
}

@media screen and (min-width:901px) and (max-width:992px) {
    
}

@media screen and (min-width:993px) and (max-width:1024px) {
    
}

@media screen and (min-width:1025px) and (max-width:1140px) {
    
}