*{
    box-sizing: border-box;
    margin: 0;
    padding:0;
    scroll-behavior: smooth;
}
 
body{
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; 
    background-color: #F2F2F2;
}
.toggle-out{
    display: none;
}

header{
    display: flex;
    justify-content: space-between;
    position: sticky;
    top:0;
    background-color: #e1e1e1;
}

header .logo{
    height: 6rem;
    width: 13rem;
    margin:1rem;
}

.hamburger{
    margin:2rem 0 -1rem 1rem;
    display: none;
    cursor: pointer;
}

nav{
    margin:3.2rem 1rem 0 0;
}
nav li{
    display: inline-block;
}
nav li a{
    text-decoration: none;
    padding: 1rem;
    color: #141414;
}
nav li a:hover{
    color:#F50A9F;
    transition:0.5s;
}
.active{
    color:#1164EE;
}
.nav-toggler{
    display: block;
}

.hero-section{
    background-image: url(assets/bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-around;
    padding:6rem 3rem;
}
.hero-section img{
    height:25rem;
    max-width:35rem;
    width: 100%;
    margin-top:-3rem;
}
.hero-heading h1{
    font-size: 3rem;
}
.hero-section button{
    outline:none;
    border:none;
    border-radius:10px;
    padding:1.2rem;
    background-color:#1164EE;
    color:#FFFFFF;
    margin-top: 6rem;
    font-family: 'Poppins';
    font-size: 1rem;
}
.hero-section button:hover{
    cursor:pointer;
    background: #FFFFFF;
    color:#1164EE;
    border:1px solid #1164EE;
    transition: 0.3s ease-in-out;
}

.about-section{
    margin-top:3rem;
    vertical-align: middle;
}
.about-section img{
    height:17rem;
    width:27rem;
}
.about-contents{
    display: flex;
    justify-content: space-around;
    margin: 2rem 3rem;
}
.about-contents p, .about-contents img{
    padding:2rem;
}


/*      SERVICES SECTION        */

.services-section{
    background: url(assets/background2-blue1.png);
    background-size: cover;
    margin-top: 3rem;
    padding:10rem;
}
.services-content{
    display: grid;
    grid-template-columns:repeat(4,auto);
    grid-template-rows: auto;
    justify-items: center;
    gap:2rem;
    margin-top: 3rem;
}
.test {
    grid-column:1/2 ;
    grid-row:1/2 ;
}
.vaccination{
    grid-column:2/3 ;
    grid-row: 1/2;
}
.treatment{
    grid-column: 3/4;
    grid-row:1/2;
}
.scientist-guy{
    grid-column:4/5 ;
    grid-row: 1/3;
}
#scientist-guy{
    height:20rem;
    width:12rem;
}
.dentistry{
    grid-column: 1/2;
    grid-row: 2/3;
}
.mental-health{
    grid-column: 2/3;
    grid-row:2/3 ;
}
.counselling{
    grid-column: 3/4;
    grid-row:2/3 ;
}
.services-content img{
    height:7rem;
    width:7em;
}
.test, .vaccination, .treatment, .dentistry, .mental-health, .counselling{
    height:12rem;
    width:14rem;
    background-color: #ffffff50;
    color:#ffffff;
    border-radius: 10px;
    text-align: center;
    place-content: center;
}



/*      BENEFITS SECTION        */

.benefits-section{
    margin-top: 4rem;
    padding-bottom: 3rem;
}
.benefits-content{
    display: grid;
    grid-template-columns: repeat(3,auto);
    grid-template-rows: auto;
    align-items: center;
    justify-items: center;
    gap:2rem;
    margin-top: 4rem;
}
.doctor{
    grid-row:1/3;
    grid-column:1/2;
}
.med-tech{
    grid-row:1/2;
    grid-column:2/3;
    align-content: center;
}
.two-four-hour{
    grid-row:1/2;
    grid-column:3/4;
    align-content: center;
}
.professionals{
    grid-row:2/3;
    grid-column:2/3;
    align-content: center;
}
.prices{
    grid-row:2/3;
    grid-column:3/4;
    align-content: center;
}
#doctor{
    height:25rem;
    width:25rem;
}
.benefits-content img{
    height:7rem;
    width:7rem;
}
.med-tech, .two-four-hour, .professionals, .prices{
    background-color: #FFFFFF;
    border-radius: 10px;
    height:13rem;
    width:14rem;
    text-align: center;
}


/*      TESTIMONIAL SECTION     */

.testimonial-section{
    background: url(assets/background1.png);
    background-size: cover;
    padding: 15rem;
}
.testimonial-contents{
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 5rem;
}
.john, .jane, .jonathan{
    width:15rem;
    height:auto;
}
.testimonial-contents img{
    height:10rem;
    width:10rem;
}
#doe{
    font-weight: 600;
    font-size: 1.3rem;
    margin-top: 2rem;
}

.appointment-heading{
    text-align: center;
}
.appointment-section{
    margin-top: 1rem;
    padding:5rem;
}
.appointment-section img{
    height:25rem;
    width:25rem;
}
.appointment-contents{
    display: flex;
    justify-content: space-evenly;
    margin-top: 3rem;
}
form{
    background-color: #FFFFFF;
    border-radius: 10px;
    padding:2rem;
}
form input{
    height: 3rem;
    width: 100%;
    max-width:27rem;
    margin: 1rem auto 2rem auto; 
    background-color: #ffffff;
    border: 1px solid #606060;
    border-radius: 10px;
    color:grey;
    outline: none;
    padding-left: 0.5rem;
    font-family: 'Poppins', Helvetica;
 }
 ::placeholder{
     color: grey;
     padding-left: 0.3rem;
     font-family: 'Poppins', Helvetica;
 }
 input[type=submit]{
     background-color: #1164EE;
     color:#FFFFFF;
     font-weight: 400;
     border: none;
     font-size: 1rem;
     display: flex;
     justify-content: center;
 }
 input[type=submit]:hover{
     cursor: pointer;
     background-color:#FFFFFF ;
     color: #1164EE;
     border:1px solid #1164EE;
     transition: 0.3s ease-in-out;
 }

 footer{
    background-color: #CECCCC;
    padding:2rem;
 }
 footer img {
    height:2rem;
    width:2rem;
    vertical-align: middle;
    margin-right:1rem;
 }
 footer .col{
    display: flex;
    justify-content: center;
 }
 footer .telephone, footer .location, footer .email{
    display: flex;
    vertical-align: middle;
    padding: 0.5rem;
 }
 #email{
    text-decoration: none;
    color:#606060;
 }
 .social-icons{
    text-align: center;
 }
 .social-icons img{
    height: 2rem;
    width: 2rem;
 }
 .social-icons img:hover{
    filter: grayscale(100%);
    transition: 0.3s ease-in-out;
 }
 #copyright {
    text-align: center;
    margin-top: 2rem;
    color: #606060;
 }


 @media screen and (max-width:600px){
    header .logo{
        width: 9rem;
        height: 4rem;
    }
    .hamburger{
        display: block;
        margin: 0.5rem 0.5rem 0 0;
    }

    nav{
        position: absolute;
        z-index: 1;
        width: 100%;
        margin: 6rem 0;
        background-image:linear-gradient(rgba(178, 178, 178, 0.9), rgba(178,178,178,0.9));
    }
    header nav li{
        text-align: center;
        display: none;
        border-bottom: 1px solid #aaaaaa;
        padding: 0.5rem;
    }
    .hero-section{
        flex-wrap: wrap-reverse;
        padding: 6rem 1rem 4rem 1rem;
        text-align: center;
    }
    .hero-section img{
        height:15rem;
    }
    .hero-heading{
        margin-top: 2rem;
    }
    .hero-section h1{
       font-size: 2.2rem; 
    }
    
    .about-section{
        margin-bottom: 3rem;
    }
    .about-contents{
        flex-wrap: wrap;
        margin:0;
    }
    .about-contents p{
        padding:1rem;
    }
    .about-section img{
        height:15rem;
        width:18rem;
        margin-top: 1.5rem;
    }

    .services-section{
        padding:2rem 0;
        margin:0;
        background-image: none;
        background-color: #1166ee8a;
    }
    .services-content{
        grid-template-columns: auto;
    }
    .scientist-guy{
        grid-column:1/2 ;
        grid-row: 1/2;
    }
    .vaccination{
        grid-column:1/2;
        grid-row: 2/3;
    }
    .treatment{
        grid-column: 1/2;
        grid-row: 3/4;
    }
    .test {
        grid-column:1/2 ;
        grid-row: 4/5;
    }
    .dentistry{
        grid-column: 1/2;
        grid-row: 5/6;
    }
    .mental-health{
        grid-column: 1/2;
        grid-row: 6/7;
    }
    .counselling{
        grid-column: 1/2;
        grid-row: 7/8;
    }
    #scientist-guy{
        height:20rem;
        width:12rem;
    }
    
    .benefits-content{
        grid-template-columns: auto;
    }
    .doctor{
        grid-row:1/2;
        grid-column:1/2;
    }
    .med-tech{
        grid-row:2/3;
        grid-column:1/2 ;
    }
    .two-four-hour{
        grid-row:3/4;
        grid-column:1/2 ;
    }
    .professionals{
        grid-row:4/5;
        grid-column:1/2 ;
    }
    .prices{
        grid-row:5/6;
        grid-column:1/2 ;
    }
    .benefits-section h1, .testimonial-section h1{
        font-size: 2rem;
    }
    #doctor{
        height:15rem;
        width:15rem;
    }

    .testimonial-section{
        margin: 0;
        padding: 2rem 0;
        background-image: none;
        background-color: #F50A9F52;
    }
    .testimonial-contents{
        flex-wrap: wrap;
        justify-content: center;
    }
    .appointment-contents{
        flex-wrap: wrap;
        justify-content: center;
    }
    .appointment-section{
        padding: 1.5rem;
    }
    .appointment-section img{
        max-width: 30rem;
        width:17rem;
        height:20rem;
    }
    .social-icons{
        margin-top: 1.5rem;
    }
 }
    footer .col{
        flex-wrap: wrap;
    }

 @media screen and (min-width:601px) and (max-width:901px){
    .hamburger{
        display: block;
        margin: 0.5rem 0.5rem 0 0;
    }

    nav{
        position: absolute;
        z-index: 1;
        width: 100%;
        margin: 6rem 0;
        background-color:#c0c0c0;
    }
    header nav li{
        text-align: center;
        display: none;
        border-bottom: 1px solid #aaaaaa;
        padding: 0.5rem;
    }
    .hero-section{
        flex-wrap: wrap-reverse;
        text-align: center;
    }
    .hero-heading{
        margin-top:2rem;
    }
    .about-contents{
        flex-wrap: wrap;
        margin: 1rem;
    }

    .services-section{
        padding:2rem;
        margin:0;
        background-image: none;
        background-color: #1166ee8a;
    }
    .services-content{
        grid-template-columns: auto;
    }
    .scientist-guy{
        grid-column:1/3;
        grid-row: 1/2;
    }
    .vaccination{
        grid-column:1/2;
        grid-row: 2/3;
    }
    .treatment{
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .test {
        grid-column:1/2;
        grid-row: 3/4;
    }
    .dentistry{
        grid-column: 2/3;
        grid-row: 3/4;
    }
    .mental-health{
        grid-column: 1/2;
        grid-row: 4/5;
    }
    .counselling{
        grid-column: 2/3;
        grid-row: 4/5;
    }

    .benefits-content{
        grid-template-columns: auto;
    }
    .doctor{
        grid-row:1/2;
        grid-column:1/3 ;
    }
    .med-tech{
        grid-row:2/3;
        grid-column:1/2 ;
    }
    .two-four-hour{
        grid-row:2/3;
        grid-column:2/3 ;
    }
    .professionals{
        grid-row:3/4;
        grid-column:1/2 ;
    }
    .prices{
        grid-row:3/4;
        grid-column:2/3 ;
    }

    .testimonial-section{
        margin: 0;
        padding: 0;
        background-image: none;
        background-color: #f50a9f52;
    }

    .testimonial-contents{
        flex-wrap: wrap;
    }
    .appointment-contents{
        flex-wrap: wrap;
    }
    .appointment-section{
        margin:1rem 0 3rem 0;
        padding:0;
    }
    .appointment-section img{
        height:22rem;
        width:20rem;
    }

 }

 @media screen and (min-width:901px) and (max-width:1200px) {
    .services-section h1{
        margin-top: 2rem;
    }
    .services-content{
        grid-template-columns: auto;
    }
    .scientist-guy{
        grid-column:1/3 ;
        grid-row: 1/2;
    }
    .vaccination{
        grid-column:1/2;
        grid-row: 2/3;
    }
    .treatment{
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .test {
        grid-column:1/2 ;
        grid-row: 3/4;
    }
    .dentistry{
        grid-column: 2/3;
        grid-row: 3/4;
    }
    .mental-health{
        grid-column: 1/2;
        grid-row: 4/5;
    }
    .counselling{
        grid-column: 2/3;
        grid-row: 4/5;
    }
 }