@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,100..900;1,100..900&family=Heebo:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playwrite+NZ+Guides&family=Poppins:wght@300&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Anybody", serif;
}

body {
    background-color: #edf2fa;
}

.container {
    max-width: 1200px;
    margin-inline: auto;
}

 img {
    max-width: 100%;
}

.container nav {
    position: fixed;
    top: 0;
    width: 90%;
}


header {
    background-color: transparent;
    position: relative;
    padding: 0 2rem;
    height: 6rem;
    z-index: 1;
}

.menu {
    padding: 1rem 0;
    /* height: 5rem; */
    position: fixed;
    width: 90%;
}

.our-info {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    z-index: 1;
}

.our-info :nth-child(1) {
    display: flex;
    gap: 2rem;
}

.our-info :nth-child(2) {
    display: flex;
    gap: .5rem;
}


.our-info a {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#twitter,#fb {
    color: #0966b8;
}

.social-media :nth-child(1) {
    color: black;
}

i {
    color: #356eca;
}
 
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* .logo img {
    width: 180px;
} */

.logo h1 {
    color: #356eca;
    font-size: 2.5rem;
}

.logo h1 span {
    color: black;
}
.navigation {
    display: flex;
    gap: 2rem;
    
}

.navigation li {
    list-style: none;
    text-transform: uppercase;
}

.navigation a {
    text-decoration: none;
    color: #0e0a08;
    font-weight: 600;
    font-size: 1.3rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.navigation a::after {
    content: "";
    background-color: #1389f0;
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    transition: 0.5s ease-in;
    transform:  scaleX(0);
}

.navigation a:hover {
    transition: 0.5s ease-in-out;
    color: #1389f0;
}

.navigation a:hover::after {
    transform: scaleX(1);
    
}


.btn a {
    color: #fff;
    text-decoration: none;
}

.btn:hover, 
.hero-btn:hover {
    background-color: #292828;
    transition-delay: 0.1s;
    box-shadow: 0 0 10px #1389f0,
    0 0 20px #1389f0,
    0 0 40px #1389f0;
    border-radius: 1rem;
}  

.btn {
    color: #fff;
    background-color: #356eca;
    padding: .7rem 2.5em;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    position: relative;
}

.btn ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    transition: 0.5s;
}

.btn ::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    transition: 0.5s;
}

.btn:hover::before,
.btn:hover::after {
    width: 100%;
    height: 100%;
} 


.mobile-menu {
    display: none;
}

.hamburger {
    display: none;
}


.hero {
    position: relative;
    overflow: hidden;
}

video {
    position: relative;
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
}

.hero-tittle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* padding-top: 3rem; */
    position: absolute;
    top: 20%;
    left: 20%;
    font-size: 3em;
}


.hero h1 span {
    color: #356eca;
}

.hero-btn {
    padding: 1.5rem 5rem;
    background-color: #09b8b5;
    border: none;
    border-radius: 1rem;
    color: #fff;
    font-size: 1rem;
 
}

.btn2 {
    color: #fff;
    background-color: #356eca;
    padding: .7rem 2em;
    border-radius: .5rem;
    border: none;
}


.grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-block: 3rem;
}

.boxes {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.box {
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
    gap: .5rem;
    background-color: transparent;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 6px 10px 2px lightskyblue;
    transition: all 350ms ease-out;
}

.box:hover {
    background-color: transparent;
    box-shadow: 0 8px 5px 4px #3bbbe2;
    width: 70%;
}

.box img {
    height: 50%;
    border-radius: 1rem;
}

.box h1 {
    background-color: #7a7676;
    text-align: center;
    padding: .1rem;
    border-radius: 1rem;
    color: #fff;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-block: 3rem;
    gap: 2rem;
}

.content h1 {
    font-size: 2.5rem;
    text-transform: uppercase;
}

.content i {
    font-size: 3rem;
}

.items {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
}


.items i {
    font-size: 4rem;
    background-color: transparent;
    padding: 3rem;
    border-radius: 50%;
    border: 1px solid #b9b9b9;
}

.items i:hover {
    background-color: #1389f0;
    color: #fff;
}

.items p {
    color: #535050;
    line-height: 1.5rem;
}
.content-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding: 5rem;
}

.content-image {
    background: linear-gradient(rgba(56, 102, 183, 0.8), rgba(113, 161, 244,0.7)),
    url("https://tse4.mm.bing.net/th?id=OIP.gCzXM_tn6YriK_LO7sh9tAHaE8&pid=Api&P=0&h=180") center/cover no-repeat;
}

.content3 {
    display: flex;
    gap: 2rem;
    align-items: center;
    color: #fff;
}

.content3 i {
    font-size: 2rem;
    border: 1px solid #fff;
    padding: 1rem;
    color: #fff;
    background-color: transparent;
    border-radius: 50%;
}

.content3 i:hover {
    background-color: #fff;
    color: #1389f0;
}


.content4-image {
    background: linear-gradient(rgba(56, 102, 183, 0.8), rgba(113, 161, 244,0.7)),
    url("/images/content4.jpg") center/cover no-repeat;
}

.content4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.content4-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 3rem;
    color: #fff;
}

.content4-btn .btn:hover {
   background-color: #fff;
   color: #1389f0;
}

.content4-btn i {
    color: #fff;
    margin-left: .5rem;
}

.home-bg {
    background: linear-gradient(rgba(56, 102, 183, 0.8), rgba(113, 161, 244,0.7)),
    url("/images/content4.jpg") center/cover no-repeat;
    height: 140vh;
    margin-block: 2rem;
}

.home-bg .heading,.about-bg2 .heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1.5rem;
}



.home-content  {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    gap: 1rem;   
}



.services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
    height: 100%;
    border-radius: 1rem;
    border: 1px solid #fff;
    padding-top: 1rem;
    margin-inline: 3rem;
}

.services:hover {
    background-color: rgba(254, 253, 253, 0.3);
}


.heading span {
    margin-top: 3rem;
    font-size: 1.5rem;
}

                    /*Contact page  */
 
.contact-hero {
    background: linear-gradient(rgba(37, 222, 182, 0.5), rgba(218, 71, 18, 0.3)),
    url("/images/contact-hero.jpg") top/cover no-repeat;
    height: 100vh;
    background-attachment: fixed; 
}   

.contact-hero .hero-tittle  {
   /* display: flex;
   justify-content: center;
   align-items: center;
   font-size: 4rem;
   color: #fff;
   padding-top: 20rem; */
     
}

.contact {
    margin-block: 4rem ;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.contact-info {
    display: flex;
    gap: 2rem;
    line-height: 2rem;
}

.contact-info i {
    font-size: 3rem;
}

.contact span {
    display: block;
}

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

.form-bg {
    background: linear-gradient(rgba(128, 130, 129, 0.5), rgba(125, 145, 105, 0.3)),
    url("/images/form-bg.jpg") right/cover no-repeat;
}

.form {
    margin-top: 4rem;
    background-color: gray;
    padding: 4rem 3rem;
    border-radius: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
}

.form .tittle {
    color: #32abd0;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 1rem;
    position: relative;
}

.form-discription,
.signin {
    color: #fff;
    font-size: 1rem;
    text-align: center;
    margin-inline: 1.5rem;
}


.form a {
    color: #32abd0;
    text-decoration: none;
}

.form a:hover {
    color: #3bbbe2;
    
}

.form-info {
    display: flex;
    gap: 3.5rem;
    width: 100%;
}

.form label {
    position: relative;
}

.form label input {
    width: 100%;
    padding: .5rem;
    outline: none;
    border: none;
    border-radius: .5rem;
}

.form label input + span {
    position: absolute;
    left: .8rem;
    top: .6rem;
    cursor: text;
    transform: .3s;
}

.form label input:placeholder-shown + span {
    top: 1rem;
    font-size: .9rem;
}
 
.form label input:focus + span,
.form label input:valid + span {
    top: -.7rem;
    font-size: 0.7rem;
}

.form label .icon {
    position: absolute;
    top: 35%;
    right: 10px;
    cursor: pointer;
}

.submit {
    border: none;
    outline: none;
    background-color: #32abd0;
    padding: .8rem;
    border-radius: .5rem;
    color: #fff;
    font-size: 1rem;
    transform: .3s ease-in-out ;
    cursor: pointer;
}

.submit:hover {
    background-color: #3bbbe2;
}


iframe {
    width: 100%;
    overflow: hidden;
    margin-top: 5rem;
}

.about-us {
    background: linear-gradient(rgba(37, 222, 182, 0.5), rgba(218, 71, 18, 0.3));
    /* url("https://tse3.mm.bing.net/th?id=OIP.zZz72mPv-zsOXn2tY85VQAHaEK&pid=Api&P=0&h=180") top/cover no-repeat; */
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.about-us .discription {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 2rem;
    gap: 1rem;

}

.department {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.department a {
    text-decoration: none;
    color: black;
    cursor: pointer;
    font-size: 1.2rem;
}

.about-us .logo h1 {
    padding: .5rem 2rem;
    font-size: 3em;
}

.contacts-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
    line-height: 1.5rem;
}

footer {
    background: linear-gradient(rgba(57, 10, 150, 0.5), rgba(33, 95, 129, 0.3));
    height: 150px;
}

.footer {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 3rem;
}

.footer span {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1389f0;
    margin-left: 1.5rem;
}

.footer img {
    display: block;
    width: 80px;
    border-radius: 50%;
    margin-bottom: -4rem;
    margin-left: 3rem;
}


            /*DOCTORS PAGE  */  

.Doctors-hero {
    background: linear-gradient(rgba(37, 222, 182, 0.5), rgba(218, 71, 18, 0.3)),
    url("/images/doctors.jpg") top/cover no-repeat;
    height: 100vh;
    background-attachment: fixed; 
} 

.Doctors-hero .hero-tittle  {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    color: #fff;
    /* padding-top: 20rem; */
      
 }

 .doctors-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-block: 5rem;
    gap: 2rem;
 }

.doctors-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
    border-radius: 1rem;
    box-shadow: 0 6px 10px 2px lightskyblue;
    transition: all 350ms ease-out;
}

.doctors-info:hover {
    background-color: transparent;
    box-shadow: 0 8px 5px 4px #3bbbe2;
    width: 110%;
}

.doctors-info :nth-child(3) {
    color: #ba7c11;
}
 

.doctors-info :nth-child(4) {
    color: #7bd77b;
}


                /* ABOUT PAGE */
 

.about-hero {
    background: linear-gradient(rgba(161, 200, 33, 0.5), rgba(53, 177, 222, 0.3)),
    url("/images/About.jpg") top/cover no-repeat;
    height: 100vh;
    background-attachment: fixed; 
} 
                
.about-hero .hero-tittle, .Doctors-hero .hero-tittle, .contact-hero .hero-tittle, .Services-hero .hero-tittle   {
    font-size: 3.4rem;
    color: #fff;
    /* margin-top: 5rem; */
    /* width: 100%; */
    height: 100vh;
    /* font-weight: 500; */
    /* align-content: center; */
   
                      
}  


.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-block: 5rem;
}

.few-words {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.few-words .discription {
    line-height: 2rem;
}

.few-words span {
    color: #7bd77b;
    font-weight: 600;
    font-size: 1.5rem;
}

.about-bg {
    background: linear-gradient(rgba(15, 16, 72, 0.5), rgba(35, 13, 133, 0.3)),
    url("/images/about-bg.jpg") top /cover no-repeat;
    width: 90%;
    height: 100%;
    padding: 5rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    color: #fff;
    border-radius: 2rem;
    font-size: 2rem;
} 

.about-bg p {
    font-size: 1.5rem;
}

.about-bg2 {
    background: linear-gradient(rgba(16, 24, 22, 0.5), rgba(17, 16, 19, 0.3)),
    url("/images/testimonial-bg.jpg") center/cover no-repeat;
    height: auto;
    margin-block: 4rem;
}

.about-grid2 {
    display: grid;
    grid-template-columns: repeat(4,200px);
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.about {
    color: #fff;
    font-weight: 600;
    backdrop-filter: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding-block: 3rem;
}  

.about h2{
    font-size: 2rem;
    color: #3619dd;
}

.about p {
    color: #fff;
}

.about i {
    color: rgb(111, 212, 64);
    font-size: 4rem;
}



        /* Testimonials page */

   
 .department-bg {
    background: linear-gradient(rgba(15, 16, 72, 0.5), rgba(35, 13, 133, 0.3)),
    url("https://images.pexels.com/photos/1250655/pexels-photo-1250655.jpeg?auto=compress&cs=tinysrgb&w=600") center /cover no-repeat;
    height: 100vh;
    background-attachment: fixed;
 }       

 .department-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
    margin: 4rem 2rem;
 }

 .department-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
 }

 .department-content span {
    color: #39c64e;
 }

 .department-content img {
    border-radius: 1rem;
 }
 .department-tittle {
    font-size: 4rem;
    display: flex;
    justify-content: center;
    padding-top: 15rem;
    color: #fff;
 }
@media  (max-width: 992px)  {


    .navigation {
        display: none;
    }
    .nav-bar :nth-child(3) {
        display: none;
    }

    .our-info :nth-child(1) {
        font-size: .9rem;
    }

    .our-info :nth-child(2) {
        font-size: .7rem;
    }
    .hamburger {
        display: block;
        position: absolute;
        color: white;
        top: 55px;
        right: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 2rem;
        
    }

.mobile-menu {
    right: .5rem;
    top: 85px;
    width: 300px;
    height: 50%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(15px);
    border-radius: 2rem;
    position: fixed;
    transform: translateX(0%); 
    transition: transform 450ms  ease-in-out;       
}

.mobile-menu[data-visible="false"] {
    transform: translateX(100%);
}

.hamburger i[data-visible="true"] {
        display: block;

}

.hamburger i[data-visible="false"] {
    display: none;
}


.mobile-menu .navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.hero {
    height: 100vh;
}

    
    .hero .hero-tittle :nth-child(1) {
        font-size: 3rem;
        width: 420px;
        margin-inline: auto;

        /* margin-right: 2rem; */
    }


    .hero-tittle :nth-child(2) {
        margin-right: 2rem;
    }

    .grid {
        grid-template-columns: 1fr 1fr;
    }

    .content-grid {
        grid-template-columns: 1fr 1fr;
    }

    .content3 {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
        gap: 1rem;
        margin-block: 1rem;
        padding: 0 1rem;
    }

    .content3-info {
        display: flex;
        flex-direction: column;
    }

    .contact-hero {
        overflow: hidden;
        height: 80vh;
    }


    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .home-bg {
        height: auto;
    }

    .home-bg .heading {
        font-size: 1rem;
    }

    .home-content {
        grid-template-columns: 1fr 1fr;  
        margin-block: 3rem; 
    }


    iframe {
        width: 100%;
    }

    .form {
        display: flex;
        margin-inline: auto;
    }

    .form-info {
       display: flex;
       gap: .5rem;
    }

    .about-us {
        grid-template-columns: 1fr;
        height: 100%;
        gap: 3rem;
    }
    
    .about-us .discription {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-block: 2rem;
        gap: 3rem;
    }

    .footer {
        font-size: .7rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .footer h2 {
        font-size: 1.5rem;
    }


    .doctors-grid {
        grid-template-columns: repeat(2,1fr);
    }



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

    .about-bg {
        width: 100%;
    }

    .about-grid2 {
        grid-template-columns: 1fr 1fr;
    }
   
    .department-container {
        grid-template-columns: 1fr 1fr;
    }

    .department-tittle {
        font-size: 2.5rem;
    }
}

@media  (max-width: 600px) {
    .department-container {
        grid-template-columns: 1fr;
    } 

    .hero-tittle :nth-child(1) {
        font-size: 4rem;
        /* margin-top: -5rem; */
    }


}
/* Mobile reponsive */

@media  (max-width: 480px) {

    .nav-bar :nth-child(1) {
        font-size: 1.5rem;
        margin-top: -1rem;
    
    }

    .our-info {
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .our-info .social-media {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: -5rem;
        margin-top: .4rem;
    }

    .hero {
        margin-bottom: 4rem;
    }
    .hero .hero-tittle :nth-child(1){
      font-size: 2.5rem;
      margin-top: -10rem;
      margin-right: 3rem;
    }

    .hero .hero-btn {
        margin-top: 1rem;
        margin-right: 4rem;
        padding-inline: 3rem;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .content3 {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 1rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
    .contact-info {
      margin: 0 3rem;
    }

    .home-content {
        grid-template-columns: 1fr;
    }
    
    .services {
        height: 100%;
        width: 80%;
    }
    

    .about :nth-child(2){
        display: flex;
        flex-direction: column;
        gap: 2rem;
        font-size: 1.4rem;
        font-weight: 300;
    }

    .about-bg2 .heading {
        font-size: 1.3rem;
    }

    .about-grid2 {
        grid-template-columns: 1fr;
    }

    .about h2 {
        font-size: 2.5rem;
    }


    .form-info {
        display: flex;
        gap: 1rem;
        text-wrap: nowrap;
     }

     .form-info :nth-child(1) {
        width: 135px;
     }

     .doctors-grid {
        grid-template-columns: 1fr;
    }
    .hero-tittle {
       
        padding: 8rem 0;
        top: 200px;
        left: 0;
      

    }
    .grid {
        grid-template-columns: 1fr;
        margin-top: 0;
    }
    .Doctors-hero .hero-tittle, .contact-hero .hero-tittle, .about-hero .hero-tittle {
     
        color: #fff;
        text-align: center;
        display: flex;
        align-content: center;
        height: 68%;
      
    }

    .department-tittle {
        font-size: 2rem;
    }

    .department-container {
        grid-template-columns: 1fr;
        
    } 
}
    /* crtl + f == magac radin
    crtl + g = liner number */