@media screen and (max-width:768px){
     body{
          overflow-x:hidden !important;
          position:relative;
    }
}




/* end of navigation section */



.bg-section{
     display: flex;
     justify-content: space-around;
     padding:0px 30px;
     gap:20px;
}

@media screen and (max-width: 768px){
    
.bg-section{
    padding:0px 10px;
     gap:0.4em;
     width: 100%;
     flex-direction: column;
}

}

.bg-text span{
    font-size: 13px;
}

.bg-section h1{
    font-size: 3rem;
    font-weight:bolder;
   
 } 


.bg-section h1, .bg-section p{
     width:70%;
}

@media screen and (max-width:768px){
    .bg-section h1, .bg-section p{
         width:100%;
    } 

    .bg-section h1{
      font-size: 2rem;
      font-weight:bolder;
      width: 80%;
   } 
   
   .bg-section p{
    font-size: 0.8rem;
 } 

}


.button-container{
      display: flex;
      gap:5px;
      position: relative;
      /* width:100%; */
}

@media screen  and (max-width:768px){
    
   .button-container{  
          margin-top:-10px;
          position: relative;
          width:100%;
          
    /* width:100%; */
}
}



.button-container a:nth-child(1){
      background-color:orange;
      color:white;
}

.button-container a:nth-child(2){
      background-color:white;
      color:black;
      box-shadow:0px 0px 2px rgba(0,0,0,0.2);
   
}


@media screen  and (max-width:768px){
    .button-container a:nth-child(1){
        background-color:orange;
        color:white;
        width: 100%;
        font-size:0.8rem;
  }
  
  .button-container a:nth-child(2){
        background-color:white;
        color:black;
        width: 100%;
        font-size:0.8rem;
     
  }

   .btn-read{
    transition: 3s linear ;
    text-decoration: none;
   }



  .btn-read:hover{
     background-color:orange;
     color: white;
     text-decoration: none !important;

  }


}

.bg-img img{
      max-width:400px;
      height:auto;
}

/* end of solutions */

.service-container{
    margin-top: 6%;
    padding-top:10%;
}

@media screen and (max-width: 768px){
    .service-container{
        margin-top: 17%;
       
    }
}


/* end of services */
.why-section{
     display: flex;
     justify-content: space-between;
     align-items: center;
     
}


@media screen and (max-width:768px){
   
    .why-section{
       
         flex-direction: column;
         gap:15px;
            
       }
      
}

.about-home{
    position: relative;
    margin-top:-35px;
}


.about-section{
      top: 2.2rem;
      position: absolute;
      margin: auto;
      left: 0;
      right:0;
      z-index:1;
      display:flex;
      justify-content: space-between;
   
    
}


@media screen  and (max-width: 768px){
    .about-section{
       
         flex-direction: column;
         gap:10px;
         position: relative;
         top:4%;
        
         
     }
    
}




.about-section div{

     flex-direction: column;
     align-items: center;
     gap:20px;
     padding:20px 80px;
     position: relative;

}

        

.services{
       display:flex;
      justify-content:space-around;
      align-items:start;
      gap:80px;
     flex-wrap:wrap;
     z-index: -9;
     margin-top: 30px;
    
    }
    
    
    
    @media screen and (max-width: 768px){
     
          .services{
                justify-content:space-evenly;
                align-items:start; 
                gap:8px;
              
                
                }
    
    }
    
    
    
    
    .services div{
    
          width: 100px;
          height:100px;
          display: flex;
          justify-content:center;
          align-items: center;
          flex-direction: column;
          gap:15px;
          /* border:1px solid rgb(44, 118, 171); */
          border-radius:15px;
    }
    
    
    @media screen and (max-width: 768px){
     
          .services div{
    
                width:8rem;
                height:8rem;
                gap:5px;
              
          }     
    
    }
    
    
    
    
    .services div img{
    width:50px;
    height:50px;
    object-fit: cover;
    }
       
    
    
    @media screen and (max-width: 768px){
     
          .services div img{
    
                width:50px;
                height:50px;
              
          }     
    
    }
    
    
    .services div span{
      font-size:16px;
      text-transform: capitalize;
          }
            

          @media screen and (max-width: 768px){
                
            .services div span{
                font-size:14px;
                text-transform: capitalize;
                    }

          }





  .appointments{
 gap:25px;
  }

.previous-button,.next-button{
    position: relative;
    cursor: pointer;
}



  .comment-section{
    gap:25px;
  }

  .comment-section img{
    width:50px;
    height:50px;
    object-fit: cover;
    border-radius:50%;
    margin:20px 0px;
 
  }

  .comments-content{
    margin-right:20px;
  }

  .g-3{
    gap:5px;
  }

  .g-5{
    gap: 10px;
  }

  .contact-container{
     display: flex;
     flex-direction: column;
     gap:25px; 
  }

  .jumbotron label, .jumbotron input{
     font-size:0.9rem;
  }

  .contact-container .contact-content{
     box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
     height:9rem;
     align-items:flex-start;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap:4px;
     
  }

  .contact-container .contact-content div{
     display: flex;
     flex-direction:column;
     gap: 4px;

  }

  input[type=date]::placeholder{
    opacity:0.5 !important;
  }

  input:focus,textarea:focus{
    border:none;
    outline: none;
  }