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

/* fonts.css import */
@import url("fonts.css");

/* utilities.css import */
@import url("utilities.css");



:root{
--blue: #20a0d8;
--blue-shade-1: #80d0f4;
--blue-shade-2: #bfe7f9;
--white: #fff;
--black: #262626;
--purple: #361354;
--purple-light: #4a2160;
--purple-dark: #1e0a2f;
}


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

html {
    scroll-behavior: smooth;
}


/* span with primary color */

.span-blue{
    color: var(--blue);
    display: inline;
}

.text-purple{
    color: var(--purple-dark);
    font-weight: bold;
}

.hide{
    display: none !important;
}


body{
    font-family: "Poppins", sans-serif;
    line-height: 1.6;
    font-size: 16px; /*adjust this value in media queries*/
    color: var(--black);
}

/* header */

header{
    margin: 20px 0px;
}

header .logo a,
header .cta a{
    text-decoration: none;
    color: var(--black);
}

header ul li{
    margin: 0 10px;
}

header ul li a{
    color: var(--black);
    text-decoration: none;
    padding-bottom: 2px;
    transition: 100ms ease-in-out;
}

header ul li a:hover{
    color: var(--blue);
    cursor: pointer;
    border-bottom: 3px solid var(--blue);
}

header div.cta button:nth-child(2){
    border: 1px solid var(--blue);
    background: var(--white);
}

header div.cta button:nth-child(2):hover{
    background: var(--purple-light);
}

button:nth-child(2):hover a{
    color: var(--white);
}

/* Showcase Section */

.showcase{
    height: calc(100vh - 80px);
    align-items: center;
    background-image: url("../img/kidney-heart.png");
    background-repeat: no-repeat;
}

.showcase img{
    display: none;
}

.showcase .showcase-text, .showcase .showcase-img{
    flex: 1;
}

.showcase .showcase-cta{
    margin: 30px 0px;
}

.showcase .showcase-cta button:nth-child(1){
    width: 50%;
}

/* Stats section */

div.stats{
    background: var(--black);
    color: var(--white);
    padding: 0 15px 15px 15px;
    opacity: 0.75;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

div.stats p{
    font-weight: 200;
}

/* Services Section */

.services{
    background: var(--blue-shade-2);
    height: 600px;
    padding: 0 30px;
    overflow: hidden;
}

.services-2{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 30px 0px;
    gap: 20px;
}

.services-2 div{
    background: var(--white);
    border-radius: 10px;
    text-align: center;
    padding: 20px;
}

.services-2 div i{
    font-size: 2rem;
}

.services-1{
    margin-top: 40px;
    width: 100%;
}


.services-2 div:hover{
    background: var(--blue);
    color: var(--white);
    cursor: pointer;
    transition: 100ms ease-in-out;
}

.services-2 div:hover i{
    color: var(--white);
}

/* about section */

.about{
    background-image: url(../img/about.png);
    background-size: cover;
    height: 750px;
}

.about i{
    color: var(--blue-shade-1);
}

.about div{
    flex: 1;
}

.about-text{
    background: var(--white);
    padding: 0px 20px;
}

.about-text > *{
    margin: 10px 0px;
}

.about button:hover{
    background: var(--purple-dark);
    color: var(--white);
    transition: 300ms ease-in-out;
}

/* What We do section */

.what-we-do{
    margin: 20px 0px;
}

.what-we-do-info{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.what-we-do-info div{
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
}

/* Mission & Vision section */

.mission-and-vision{
    background: #f4f4f4;
    padding: 20px;
}

.mission-and-vision-text{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mission-and-vision-text div{
    padding: 10px 20px;
}

/* Goals and values section */

.goals-and-values{
    margin-top: 40px;
}

.goals-section-text{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.goals-section-text div h3, 
.goals-section-text div p{
    margin: 10px;
}

.goals-section-text div h3{
    text-align: center;
}

/* Our partners section */

.partners-section {
    text-align: center;
    padding: 20px;
  }
  .partners-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .partners-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .partner-logo {
    width: 150px; /* Adjust logo size */
    height: auto;
    transition: transform 0.3s ease;
  }
  .partner-logo:hover {
    transform: scale(1.1); /* Slight zoom on hover */
  }

  .partners-section img{
    height: 100px;
  }

/* Team Section */
/* 
.team{
    background: var(--purple-light);
    padding: 20px;
}

.team .team-text h3{
    color: var(--white);
    margin: 10px 0px 30px 0px;
    opacity: 0.8;
}

.team .team-people{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: 300px;
}

.team .team-people div{
    background-color: var(--white);
    border-radius: 10px;
    text-align: center;
    position: relative;
}

.team-people div img{
    background-size: contain;
    border-radius: 10px 10px 0px 0px;
    background-position: center;
    height: 200px;
}

.team-people div p:nth-child(2){
    margin-top: 20px;
} */

/* End of team section */

/* subscribe to newsletter section */

.subscribe{
    background: var(--blue);
    padding: 10px 10px;
    color: white;
    height: 850px;
    margin: 0px 0px 40px 0px;
}

.subscribe > div{
    flex: 1;
}

.subscribe h2{
    font-weight: 600;
}

.contact label, .contact input, .contact textarea{
    display: block;
    margin: 0 auto;
    width: 100%;
    margin: 10px 0px;
    padding: 10px;
}

.contact input{
    padding: 10px;
    outline: none;

}

.contact input[type="submit"]{
    margin: 30px 0px 0px 0px;
    cursor: pointer;
}

/* Footer Section */

footer{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    background: var(--purple-dark);
    color: var(--white);
    padding: 20px;
    gap: 20px;
    margin-top: 70px;
}

footer h2{
    font-weight: 450;
}

footer p{
    font-weight: lighter;
    margin: 10px 0px;
}

footer ul li{
    padding: 5px 0px;
    font-weight: lighter;
}

footer ul li a{
    text-decoration: none;
    color: var(--white);
}

footer div button{
    margin: 20px 0px;
}

footer h2{
    margin: 0px 0px 20px 0px;
}

.footer-bottom{
    background: var(--purple-dark);
    color: var(--white);
    padding: 20px;
    border-top: 1px solid var(--white);
    font-weight: 100;
}


/* End of footer section */

/* Mobile menu section */
.mobile-menu{
    position: absolute;
    top: 70px;
    right: 0;
    background: var(--white);
    padding: 20px;
}

.mobile-menu ul li a{
 text-decoration: none;
 color: var(--black);
}

.mobile-menu ul li a:hover{
    text-decoration: underline;
   }

/* Media queries */

@media(max-width: 1000px) {

    .services{
        height:900px;
    }
    .services-2{
     width: 100%;
     grid-template-columns: repeat(2, 1fr);
    }
 
    .services-2 div{
     width: 100%;
    }
    
 }

 /* 800px */

 @media(max-width: 800px){
    header nav ul.flex-nav,
    header .cta{
        display: none;
    }

    .showcase{
        margin-top: 30px;
    }

    header .icon {
        display: block !important;
        cursor: pointer;
        font-size: 1.5rem;
    }

    /* Showcase section */

    .showcase .showcase-text{
        text-align: center;
    }

    .showcase .showcase-text h1{
        font-size: 2.2rem;
    }
    .showcase .showcase-text p{
        font-size: 0.8rem;
    }

    .showcase .showcase-img{
        display: none;
    }

    /* Statistics Section */

    div.stats{
        display: grid;
        grid-template-columns: 1fr;
    }

    /* About section */

    .about{
        background: white;
        margin-top: 70px;
    }

    .about .about-img{
        display: none;
    }

    /* What we do section */

    .what-we-do{
        margin-top: 100px;
    }

    .what-we-do-info{
        grid-template-columns: 1fr;
    }

    /* Mission & Vision section */

    .mission-and-vision-text{
        grid-template-columns: 1fr;
    }

    /* Goals and Values Section */
    .goals-section-text{
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Why choose us section */
    .why-choose-us{
        text-align: center;
    }
    
    /* Services */
    .services{
        height:1800px;
    }
    .services-2{
     width: 100%;
     grid-template-columns: 1fr;
    }
 
    .services-2 div{
     width: 100%;
    }

    /* Subscribe section */

    .subscribe{
        height: 800px;
        text-align: center;
    }

    .contact{
        overflow: hidden;
    }

    .contact label{
        display: inline;
    }

    .contact input, .contact textarea{
        display: block;
    }


    /* Footer section */

    footer{
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-bottom{
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }

 }