/* :root{
    --border-2px-solid--black:2px solid black;
} */

*{

    padding: 0;
    margin: 0;
    
}

body{
    width:100%;
}

.header{
    
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2vw;
    padding-bottom: 1vw;

}



.title{
    display: flex;
    align-items: center;
}

.header h1{
   font-size: 5vw;
}

.logo{
    width:15%
}

.dr-name{
    background-color: red;
    color: white;
    text-align: center;
    align-content: center;
    padding: 1vw;
    margin-right: 2vw;
    display: flex;
    width: 24vw;
    font-size: 3vw;
}
.dr-name:hover{
    background-color: rgb(48, 5, 5);
}

.date-time{
   
    display: none;
}


.num{
    display: none;

}


.body-content{

  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 5vw;
  
 

}

.main-img{
    width: 100%;
    
}

.about-us {

    padding: 5vw;
    border: var(--border-2px-solid--black);
   
}

.btn-gallery{
    margin-top: 3vw;
    width: 35vw;
    height: 12vw;
    background-color: rgb(49, 110, 56);
    color: white;
    border-style: none;
    border-radius: 3vw;
    font-size: 4.5vw;
}

.btn-gallery:hover{

   background-color: black;
}



   /* -------------------------  CONDITIONS ------------------------------- */



.conditions{

    padding: 5vw;
    border: var(--border-2px-solid--black);
    display: flex;
    flex-direction: column;
    padding-bottom: 0vw;


}

#con{
   text-align: center;
   color: green;
}

.conditions-p{
    text-align: center;
}

.conditions h1{

   text-align: center;

}


.condition-img{
    width: 100%;
    padding-top: 3vw;
    
}

.sciatica{

    padding-top: 5vw;
}

.learn-more p{
    color: rgb(11, 146, 153);
    text-decoration: underline;
 
}

.sciatica a{

    text-decoration: none;
    color: black;

}

.sciatica h2{

    text-decoration: none;
    color: rgb(171, 68, 68);

}

.sciatica-img{
    width: 100%;
   
}

.Cervical-sector{

    padding-top: 5vw;
}

.Cervical-sector a{

    text-decoration: none;
    color: black;

}

.Cervical-sector h2{

    color: rgb(171, 68, 68);
    
  

}

.cervical-img{
    width: 100%;
   
}


.lowback-sector{

    padding-top: 5vw;
}

.lowback-sector a{

    text-decoration: none;
    color: black;

}

.lowback-sector h2{

    color: rgb(171, 68, 68);
    padding-top: 3vw;
    padding-bottom: 3vw;
  

}

.lowback-img{
    width: 100%;
}



.knee-sector{

    padding-top: 5vw;
}

.knee-sector a{

    text-decoration: none;
    color: black;

}

.knee-sector h2{

    color: rgb(171, 68, 68);
    padding-top: 3vw;
    padding-bottom: 3vw;
  

}

.knee-img{
    width: 100%;
}


.postural-sector{

    padding-top: 5vw;
}

.postural-sector a{

    text-decoration: none;
    color: black;

}

.postural-sector h2{

    color: rgb(171, 68, 68);
    padding-top: 3vw;
    padding-bottom: 3vw;

}

.postural-img{
    width: 100%;
}


.tennis-sector{

    padding-top: 5vw;
}

.tennis-sector a{

    text-decoration: none;
    color: black;

}

.tennis-sector h2{

    color: rgb(171, 68, 68);
    padding-top: 3vw;
    padding-bottom: 3vw;

}

.tennis-img{
    width: 100%;
}



.golfer-sector{

    padding-top: 5vw;
}

.golfer-sector a{

    text-decoration: none;
    color: black;

}

.golfer-sector h2{

    color: rgb(171, 68, 68);
    padding-top: 3vw;
    padding-bottom: 3vw;

}

.golfer-img{
    width: 100%;
}


.carpal-sector{

    padding-top: 5vw;
}

.carpal-sector a{

    text-decoration: none;
    color: black;

}

.carpal-sector h2{

    color: rgb(171, 68, 68);
    padding-top: 3vw;
    padding-bottom: 3vw;
 
}

.carpal-img{
    width: 100%;
}



.frozen-sector{

    padding-top: 5vw;
}

.frozen-sector a{

    text-decoration: none;
    color: black;

}

.frozen-sector h2{

    color: rgb(171, 68, 68);
    padding-top: 3vw;
    padding-bottom: 3vw;

}

.frozen-img{
    width: 100%;
}


.ligament-sector{

    padding-top: 5vw;
}

.ligament-sector a{

    text-decoration: none;
    color: black;

}

.ligament-sector h2{

    color: rgb(171, 68, 68);
    padding-top: 3vw;
    padding-bottom: 3vw;

}

.ligament-img{
    width: 100%;
}


   /* ------------------------- SERVICES ------------------------------- */

.services{
    padding: 5vw;
    border: var(--border-2px-solid--black);
    display: flex;
    flex-direction: column;
    padding-top: 0vw;
}
.service-h1 {
    text-align: center;
    color: green;
   
}

.serive-p{
    text-align: center;
}

.services h1{

    text-align: center;
}

.manual-therapy{

    padding-top: 5vw;
}

.manual-therapy a{

    text-decoration: none;
    color: black;

}

.manual-therapy h2{

    color: rgb(171, 68, 68);
    margin-top: 3vw;
    padding-bottom: 3vw;

}

.manual-img{
    width: 100%;
}



.exercise-service{

    padding-top: 5vw;
}

.exercise-service a{

    text-decoration: none;
    color: black;

}

.exercise-service h2{

    color: rgb(171, 68, 68);
    margin-top: 3vw;
    padding-bottom: 3vw;

}

.exercise-img{
    width: 100%;
}



.sports-service{

    padding-top: 5vw;
}

.sports-service a{

    text-decoration: none;
    color: black;

}

.sports-service h2{

    color: rgb(171, 68, 68);
    margin-top: 3vw;
    padding-bottom: 3vw;

}

.sports-img{
    width: 100%;
}


.post-surgical-service{

    padding-top: 5vw;
}

.post-surgical-service a{

    text-decoration: none;
    color: black;

}

.post-surgical-service h2{

    color: rgb(171, 68, 68);
    margin-top: 3vw;
    padding-bottom: 3vw;

}

.post-img{
    width: 100%;
}

.chronic-pain-service{

    padding-top: 5vw;
}

.chronic-pain-service a{

    text-decoration: none;
    color: black;

}

.chronic-pain-service h2{

    color: rgb(171, 68, 68);
    margin-top: 3vw;
    padding-bottom: 3vw;

}

.chronic-img{
    width: 100%;
}

.gallery-imgs{

    width: 100%;
    background-color: rgb(255, 255, 255);
    margin-top: 15vw;
    display: flex;
    gap: 2vw;
    overflow: hidden;

}

.review-h1{
    margin-top: 5VW;
    text-align: center;
}

.scroll-imgs{
    width: 80%;
   
    animation: rotate 25s linear infinite;
   
}



@keyframes rotate {

    0%{transform: translateX(0);    }
    
    100%{
        transform: translateX(calc(-80vw *9));
    }

}



  /* ------------------------- FOOTER START  ------------------------------- */


.footer{
    width: 90%;
    background-color:black;
    color: white;
    padding: 5vw;
    display: flex;
    flex-direction: column;
    row-gap: 5vw;
    margin-top: 20vh;
    
}

.book{
    width: 80%;
    text-align: center;
    margin-left: 5vw;
}



.book-btn{
    margin-top: 5vw;
    width: 40vw;
    height: 10vw;
    font-size: 5vw;
    color: rgb(215, 66, 66);
}

.footer-about{
    padding-top: 10vh;
}

.footer-about h1{
    padding-bottom: 3vw;
}

.footer-about p{
    padding-bottom: 3vw;
    width: 90%;
}

.footer-contact{

    width: 100%;

}

.footer-contact h1{
    padding-bottom: 3vw;
}

.footer-contact p{
    padding-bottom: 5vw;
    width: 90%;
}

.subs{
    display: flex;
    gap: 1%;
}

.your-email{
    height: 5vh;
}

.Subscribe-btn{
    width: 30vw;
    height: 5.6vh;
    background-color: rgb(225, 84, 84);
    color: white;
    font-size: 3vw;
    border-style: none;  
    
}

.social-links{

    display: flex;
    justify-content: center;
    column-gap: 15vw;
    padding-top: 5vw;

}

@media(width>700px){



    *{

        padding: 0;
        margin: 0;
        
    }
    
    body{
        width:100%;
    }
    
    .header{
        width:100%;  
        display: flex;
        align-items: center;
        padding-bottom: 0vw;
        padding-top: 1vw;
       
    
    
    }

    h1{
        font-size: 2.5vw;
    }
    
    p{
        font-size: 1vw;
        
    }
    
    
    .title{
        width: 100%;
        display: flex;
        align-items: center;
    }
    
    .header h1{
       font-size: 2vw;
    }
    
    .logo{
        width:8%
    }

    .header-left{
        display: flex;
        gap: 5vw;

        width: 60%;
    }
    
    .dr-name{
        background-color: red;
        color: white;
        text-align: center;
        align-content: center;
        padding: 1vw;
        display: inline-block;
        width: 8vw;
       font-size: 1vw;
    }

    .date-time{
        color: black;
        align-content: center;
        font-size: 1.2vw;
        font-weight: 500;
        display: inline-block;
    }
 
   
  .num{
    align-content: center;
    color: black;
    font-size: 1.2vw;
    font-weight: 500;
    display: inline-block;

    }



    
    .body-content{
    
      width: 100%;
      display: flex;
      flex-direction: column;
      row-gap: 2vw;
    
    }


    .top-img-div{
        width: 100%;
      
    }
    
    .main-img{
        width: 100%;
    
    }
    
    .about-us {
    
        padding: 5vw;
        border: var(--border-2px-solid--black);
       
    }
    
    .btn-gallery{
        margin-top: 1vw;
        width: 15vw;
        height: 4vw;
        background-color: rgb(49, 110, 56);
        color: white;
        border-style: none;
        border-radius: 3vw;
        font-size: 1vw;
    }
    
    .btn-gallery:hover{
    
       background-color: black;
    }
    
    
    
       /* -------------------------  CONDITIONS ------------------------------- */
    
    
    
    .conditions{
    
        padding: 5vw;
        border-top: 2px solid red;
        display: grid;
        grid-template-columns: auto auto auto ;
        gap: 2vw;
        
    
    }
    
    .conditions-p{
        text-align: center;
    }
    
    .conditions h1{
    
       text-align: center;
    
    }
    
    
    
    .sciatica{
    
        padding-top: 0vw;
        border: var(--border-2px-solid--black);
    }
    
    .learn-more p{
        color: rgb(11, 146, 153);
        text-decoration: underline;
     
    }
    
    .sciatica a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .sciatica h2{
    
        text-decoration: none;
        color: rgb(171, 68, 68);
    
    }
    
    .sciatica-img{
        width: 100%;
        height: 65%;
        
    }
    
    .Cervical-sector{
    
        padding-top: 0vw;
        border: var(--border-2px-solid--black);
    }
    
    .Cervical-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .Cervical-sector h2{
    
        color: rgb(171, 68, 68);
        margin-top: 0.5vw;
      
    
    }
    .cervical-img{
        width:100%;
        height: 65%;
    }
    
    
    .lowback-sector{
    
        padding-top: 0vw;
        border: var(--border-2px-solid--black);
    }
    
    .lowback-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .lowback-sector h2{
    
        color: rgb(171, 68, 68);
        padding-top: 2vw;
        padding-bottom: 1vw;
       
      
    
    }
    
    .lowback-img{
        width: 100%;
        height: 65%;
       
    }
    
    
    
    .knee-sector{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .knee-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .knee-sector h2{
    
        color: rgb(171, 68, 68);
        padding-top: 3vw;
        padding-bottom: 1vw;
      
    
    }
    
    .knee-img{
        width: 100%;
       height: 50%;
    }
    
    
    .postural-sector{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .postural-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .postural-sector h2{
    
        color: rgb(171, 68, 68);
        padding-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .postural-img{
        width: 100%;
    }
    
    
    .tennis-sector{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .tennis-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .tennis-sector h2{
    
        color: rgb(171, 68, 68);
        padding-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .tennis-img{
        width: 100%;
    }
    
    
    
    .golfer-sector{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
        
    }
    
    .golfer-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .golfer-sector h2{
    
        color: rgb(171, 68, 68);
        padding-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .golfer-img{
        width: 100%;
        height: 55%;
    }
    
    
    .carpal-sector{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .carpal-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .carpal-sector h2{
    
        color: rgb(171, 68, 68);
        padding-top: 3vw;
        padding-bottom: 1vw;
     
    }
    
    .carpal-img{
        width: 100%;
    }
    
    
    
    .frozen-sector{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .frozen-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .frozen-sector h2{
    
        color: rgb(171, 68, 68);
        padding-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .frozen-img{
        width: 100%;
    }
    
    
    .ligament-sector{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .ligament-sector a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .ligament-sector h2{
    
        color: rgb(171, 68, 68);
        padding-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .ligament-img{
        width: 100%;
    }
    
    
       /* ------------------------- SERVICES ------------------------------- */
    
    .services{
        padding: 5vw;
        border-bottom: 2px solid red;
        padding-top: 0vw;
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 2vw;
       
        
    }
    
   
    
    .services h1{
    
        text-align: center;
    }
    
    .manual-therapy{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .manual-therapy a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .manual-therapy h2{
    
        color: rgb(171, 68, 68);
        margin-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .manual-img{
        width: 100%;
        height: 50%;
    }
    
    
    
    .exercise-service{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .exercise-service a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .exercise-service h2{
    
        color: rgb(171, 68, 68);
        margin-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .exercise-img{
        width: 100%;
        height: 50%;
    }
    
    
    
    .sports-service{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .sports-service a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .sports-service h2{
    
        color: rgb(171, 68, 68);
        margin-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .sports-img{
        width: 100%;
        height: 50%;
    }
    
    
    .post-surgical-service{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .post-surgical-service a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .post-surgical-service h2{
    
        color: rgb(171, 68, 68);
        margin-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .post-img{
        width: 100%;
        height: 66%;
    }
    
    .chronic-pain-service{
    
        padding-top: 5vw;
        border: var(--border-2px-solid--black);
    }
    
    .chronic-pain-service a{
    
        text-decoration: none;
        color: black;
    
    }
    
    .chronic-pain-service h2{
    
        color: rgb(171, 68, 68);
        margin-top: 3vw;
        padding-bottom: 1vw;
    
    }
    
    .chronic-img{
        width: 100%;
        
    }
    
    .gallery-imgs{
    
        width: 100%;
        height: 25vw;
        background-color: rgb(255, 255, 255);
        margin-top: 8vw;
        display: flex;
        gap: 2vw;
        overflow: hidden;
    
    }
    
 
    .scroll-imgs{
        width: 60%;
        animation: rotate 15s linear infinite;
       
    }
    
    
    
    @keyframes rotate {
    
        0%{transform: translateX(0);    }
        
        100%{
            transform: translateX(calc(-31vw *9));
        }
    
    }
    
    
    
      /* ------------------------- FOOTER START  ------------------------------- */
    
    
    .footer{
        width: 90%;
        background-color:black;
        color: white;
        padding: 5vw;
        display: flex;
        flex-direction: column;
        row-gap: 5vw;
        margin-top: 20vh;
        
    }
    
    .book{
        width: 80%;
        text-align: center;
        margin-left: 8vw;
    }
    
    
    
    .book-btn{
        margin-top: 2vw;
        width: 10vw;
        height: 3vw;
        font-size: 1vw;
        color: rgb(215, 66, 66);
    }
    
    .footer-about{
        padding-top: 10vh;
    }
    
    .footer-about h1{
        padding-bottom: 1vw;
    }
    
    .footer-about p{
        padding-bottom: 0vw;
        width: 90%;
    }
    
    .footer-contact{
    
        width: 100%;
    
    }
    
    .footer-contact h1{
        padding-bottom: 1vw;
    }
    
    .footer-contact p{
        padding-bottom: 1vw;
        width: 90%;
    }
    
    .subs{
        display: flex;
        gap: 1%;
    }
    
    .your-email{
        height: 5vh;
    }
    
    .Subscribe-btn{
        width: 10vw;
        height: 6vh;
        background-color: rgb(225, 84, 84);
        color: white;
        font-size: 1vw;
        border-style: none;
       
       
        
    }
    .social-links{
    
        display: flex;
        justify-content: center;
        column-gap: 15vw;
        padding-top: 5vw;
    
    }









}