* {
    scroll-padding-top: 3rem;
    scroll-behavior: smooth;
}

:root {
    --main-color: #957221;
    --bg-color: #f0e5d6;
    --text-p-color: #000000;
    --text-h2-color: #412f26;
    --big-font: 4.2rem;
    --h2-font: 2.4rem;
    --h3-font: 1.8rem;
    --p-font: 16px;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.home {
    background: url(../img/home/bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1rem;
    justify-content: center;
   
}
.home-img{
    padding-right: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
 
}

.home-img .slideshow {

  
   position: relative;
   width: 100%;
   height: 100%;
 

 
    
}
.slider{
    display: flex;
    aspect-ratio: 12/8;
    overflow: hidden; /* Hide scrollbar */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
    border-radius: 0.5rem;
    position: relative;
}

.slide {
    flex: 1 0 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    border: 1px solid white;
    
}

.overlay {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 2px 10px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    color:rgb(255, 254, 250);
    font-size: 2rem;
    font-weight: bold;
    font-family: serif;
    opacity: 0;
    animation: fadeIn 2s forwards;
    animation-delay: 1s; /* Delay for title */
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.slider-nav{
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.slider-nav a{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgb(177, 133, 13);
    opacity: 0.3;
    transition: opacity ease 250ms;
}

.slider-nav a:hover{
   opacity: 1; 
}
.slideshow  img{
/*   
 width:620px;
 height:400px; */
 width: 100%;
 height: auto;
 border-radius: 30px;
 border: 1px solid white;
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
}

.home-text {
    padding-left: 10%;
}

.home-text img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    padding-right: 5px;
    
}

.home-text h3 {
    font-size: var(--big-font);
    font-weight: 700;
    line-height: 1.3;
    color: transparent;
    margin-bottom: 3rem;
    margin-top: 1rem;
    -webkit-text-stroke: 1px #30180a;
    background: url(../img/home/txt-bg.png);
    -webkit-background-clip: text;
    background-position: 0 0;
    animation: back 20s linear infinite;
 
}

.home-text h1 {
  
   
    font-size: var(--h3-font);
    font-family: serif;
    color: rgb(0, 0, 0);
}

@keyframes back {
    100% {
        background-position: 2000px 0;
    }
}

.btn {
    display: inline-block;
    padding: 15px 35px;
    background: linear-gradient(45deg, #a67019, #fdddaa, #dab766, #b69121);
    background: linear-gradient(#edcc84, #c79833);
    color: white;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: .5rem;
    transition: all .50s ease;
    margin-right: 1rem;
}

.btn:hover {
    background: #ffffff;
    color: #bf932a;
    font-weight: 700;
    box-shadow: #ffffff 0px 1px 25px;
}

.btn2 {
    display: inline-block;
    font-size: var(--p-font);
    font-weight: 500;
    letter-spacing: 1px;
    border-bottom: 3px solid #010101;
    color: #0a0a0a;
    transition: all .50s ease;
}

.btn2:hover {
    transform: scale(1.1) translateX(12px);
    font-weight: 700;
}




/* btn */

.btn-view-more{
    background: #ffffff;
    color: #000000;

    box-shadow: #b28558 0px 1px 15px; 
    background: linear-gradient(to top left, #ffffcc 0%, #b28558 100%);
    background: linear-gradient(to top left, #c2a070 0%, #e2b35c 100%);
    background: transparent linear-gradient(180deg, #FDFBF6 0%, #EEE0C4 100%) 0% 0% no-repeat;

    display: inline-block;
    padding: 15px 35px;
   text-align: center;
    font-size: var(--p-font);
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: .5rem;
    transition: all .50s ease; 
    margin-bottom: 30px;
 

}

/* why */

.container-why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    gap: 1.5rem;
    text-align: center;
   padding: 10%;
   background: linear-gradient(60deg, #f5cb86, #7e5936);   


}

.container-box {
    padding: 30px;
    background: var(--bg-color);
    border-radius: 1rem;
    box-shadow: rgba(255, 255, 255, 0.2) 1px 1px 15px;
    position: relative;
    overflow: hidden;
}

.container-box img {
    border-radius: 50px;
    width: 100%;
    max-width: 100px;
    height: auto;
    padding: 5px;
    border: #fffdfd 3px solid;
    transition: opacity 0.3s ease;
}

.container-box h4 {
    font-size: 1.1rem;
    line-height: 1.3;
    transition: opacity 0.3s ease;
}

.container-box p {
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    color: var(--text-p-color);
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.container-box:hover img,
.container-box:hover h4 {
    opacity: 0;
}

.container-box:hover p {
    opacity: 1;
}



/* banner */

.banner-out{
    padding: 3% 10%;
    background-image: url(../img/home/bg.jpg);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;}
.banner{

    display: grid;
   
    grid-template-columns: repeat(2,1fr);
    /* background: rgba(255, 255, 255, 0.2); */
    padding:  20px;
    justify-content: space-between;
    align-items: center;

    /* border: 2px solid; 
    border-image-slice: 1; 
    border-image-source: linear-gradient(45deg,#8e6015, #fdddaa, #dab766, #b69121);  */
}

.banner-img{
    display: flex;
    flex-direction: column;
   justify-content: center;
   align-items: center;
   vertical-align: middle;
   width: 90%;
   height: 500px;
   background: var(--bg-color);
   box-shadow: rgba(0, 0, 0, 0.2);
   padding: 2px;
   border-radius: 10px;
   background-image: url(../img/home/home.png);
   background-size: cover;
   border: 2px solid; 
   border-image-slice: 1; 
   border-image-source: linear-gradient(45deg,#8e6015, #fdddaa, #dab766, #b69121); 
   animation: slide 15s infinite;
}
@keyframes slide{
    50%{
        background-image:url(../img/home/banner.png) ;
        
    }
   
  

}

.banner img{
   
   
} 

/* .banner-txt{
       background: rgba(255, 255, 255, 0.2);
       height: 100%;
       width: 100%;
} */
.banner h2{
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: serif;
    line-height: 1.3;
    color: transparent;
    -webkit-text-stroke:1px #30180a;
    background: url(../img/home/txt-bg.png);
      -webkit-background-clip: text;
     background-position: 0 0;
    animation:  back 20s linear infinite;
}

@keyframes back{
    100%{
        background-position: 2000px 0;
    }
}

.banner h2 span{
    color: white;
}

.about-us{
  
    padding: 10%;
    background: transparent radial-gradient(closest-side at 50% 50%, #F9F5EB 0%, #EEE0C4 100%) 0% 0% no-repeat padding-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 10% 0; */




}
.about-txt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-us h3{
    font-size: 24px;
    font-family: serif;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 10px;
    
}

.about-us h2{
    font-size:var(--h2-font);
   
    text-align: center;
    
    
}

.about-us h4{
    font-size: var(--h3-font);
    font-family: serif;
    text-align: center;
    letter-spacing: 2px;
    color: #957221;
    margin-bottom: 40px;
    
}

.about-us p{
    font-size: var(--p-font);
text-align: justify;
    color: var(--text-p-color);
    margin-top: 10px ;
    margin-bottom: 15px;
}


.doctors{

    padding: 10%;
    background: #f0daae;
       display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 10% 0; */
    
 
}
.doctors h3{
    font-size: 2rem;
    font-family: serif;
    letter-spacing: 1px;
    text-align: center;
}
.doctors .doc-wrapper {
    margin-top: 5%;
    margin-bottom: 5%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr); /* Default to 4 columns */
}

.doctors .doc-wrapper img {
    height: auto;
    width: 100%; /* Ensure the image fills the grid cell */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light grey shadow */
    transition: box-shadow 0.3s ease-in-out;
    border: 2px solid; /* Set the width of the border */
    border-image-slice: 1; /* This is required for the border-image to work */
    border-image-source: linear-gradient(45deg,#8e6015, #fdddaa, #dab766, #b69121); /* Set the linear gradient */
}

.doctors .doc-wrapper img:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}





















.service{

    padding: 10%;

    background: url(../img/derma/bg5.jpg);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 10% 0; */
   
  
}

.service-txt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.service h3{
    font-size: 24px;
    font-family: serif;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 10px;
    
}

.service h2{
    font-size:var(--h2-font);
   
    text-align: center;
    
    
}

.service h4{
    font-size: var(--h3-font);
    font-family: serif;
    text-align: center;
    letter-spacing: 2px;
    color: #b69121;
    margin-bottom: 40px;
    
}

.service p{
    font-size: var(--p-font);
  text-align: justify;
    color: var(--text-p-color);
    margin: 10px 0;
}


 .card-list{

    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
  
    overflow: hidden;
    height: auto;
    width: 100%;
    /* background: linear-gradient(to top left, #ffffcc 0%, #fda349 100%); */
    border-radius: 12px;
    /* padding-right: 40px; */
    
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    margin-top: 80px;


}
 .card-list .card-item {

    width:250px;
    height:300px;
    border-radius: 12px;
    display: flex;
    background-color: rgba(226, 226, 226, 0.4);
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
   

}
 .card-list .card-item h6{
    font-size: 12px;
    margin: 10px 0;
}
 .card-list .card-item img{
    width:250px;
    height: 250px;
    border-radius: 12px;
    border: 3px solid white;


}

::-webkit-scrollbar{
   
    height: 4px;
}

::-webkit-scrollbar-track{
    background: #f7f0e3;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(45deg,#a67019, #fdddaa, #dab766, #b69121);;
    border-radius: 10px;
    
}



.cta-out{
    padding: 5% 10%;
    background: linear-gradient(60deg, #f5cb86, #7e5936);   
}
.cta{
  
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2,1fr);
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid; /* Set the width of the border */
    border-image-slice: 1; /* This is required for the border-image to work */
    border-image-source: linear-gradient(45deg,#8e6015, #fdddaa, #dab766, #b69121); /* Set the linear gradient */
    padding: 40px;
   justify-content: center;
   align-items: center;
    
}

.cta h4{
    font-size: 24px;
    font-family: serif;
   
    letter-spacing: 2px;
    margin-bottom: 10px;
    
}

.cta h2{
    font-size:var(--h2-font);
    line-height: 1.2;
   
    
    
}

.cta h3{
    font-size: var(--h3-font);
    font-family: serif;
   
    letter-spacing: 2px;
    color: white;
    margin-bottom: 20px;
    
}

.cta p{
    font-size: var(--p-font);
    
    color: var(--text-p-color);
    margin-top: 10px ;
}
/* .cta-left{
    display: flex;
}
.cta-right{
    display: flex;
    justify-content: right;
} */

.cta-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
   }

   .cta-right img{
    width: 80%;
    border-radius: 30px;
  
   }
   .cta-btn{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
   
}
.cta-btn a{
  
    padding: 15px 35px;
   text-align: center;
    font-size: var(--p-font);
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: .5rem;
    transition: all .50s ease; 
    margin-top: 10px ;
    box-shadow: #b28558 0px 1px 15px; 
    background: transparent linear-gradient(180deg, #FDFBF6 0%, #EEE0C4 100%) 0% 0% no-repeat;

}
.cta-btn a span{
    color: #957221;
}
.cta-btn a i{
    color: #957221;
    font-size: 16px;
    padding-right: 10px;
    animation: zoomInOut 2s infinite;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

.appoinmet-section {
    padding: 10%;
    background: transparent linear-gradient(180deg, #8f6f56 0%, #6e4829 100%) 0% 0% no-repeat;
    height: auto;
    display: flex;
    flex-direction: column;

    /* background: transparent radial-gradient(closest-side at 50% 50%, #F9F5EB 0%, #EEE0C4 100%) 0% 0% no-repeat padding-box; */

    /* background-color: #fcf3df; */
    justify-content: center;
    align-items: center;
}

.appoinmet-section h3 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    color: white;
    font-family: serif;
    margin: 10px 0;
    text-align: center;
}

.contact__form {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.form__names {
  
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}



.input-field {
    width:350px;
    background-color: rgba(255, 252, 252, 0.9);
  
    border: 1px solid hsla(0, 9%, 91%, 0.8);
    border-radius: 8px;
    padding: 20px 10px;
    margin: 10px 0;
    font-size: 12px;
}

.input-field:hover {
    box-shadow: 0 0 5px hsla(31, 88%, 63%, 0.8);
}

.btn-primary {
    margin-top: 20px;
    width: 200px;
    height: 40px;
    border: none;
    padding: 2% 1%;
    background: linear-gradient(#edcc84, #c79833);
    color: rgb(7, 7, 7);
    cursor: pointer;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
}

.btn-primary i{
    color: #fcfcfc;
    font-size: 16px;
    font-weight: 500;
    padding-left: 10px;
    animation: zoomInOut 2s infinite;
}
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}






/* responsive */
@media(max-width:1300px){
    :root{
     
        
        --big-font:3.2rem;
        --h2-font:2.2rem;
        --h3-font:1.8rem;
        --p-font:16px;
        
        }

        .cta-btn a{
  
            padding: 15px 25px;
            font-size: 12px;
           
        }
       
        .cta-btn a i{
            
            font-size: 14px;
          
        }
        .cta h3{
            line-height: 1.3;
        }

}

@media(max-width:1200px){

    
    .about-us,.banner-out,.cta-out,.appoinmet-section,.service,.doctors{
        padding: 10% 8%;
    }

    .container-box img{
        max-width: 80px;
    }

  
    .banner h2{
        font-size: 2.4rem;
    }
    /* .banner img{
        width: 300px;
    } */
    :root{
     
        
        --big-font:3.8rem;
        --h2-font:2.2rem;
        --h3-font:1.8rem;
        --p-font:16px;
        
        }

        .card-list .card-item img{
            width:200px;
            height: 200px;
            
        
        
        } .card-list .card-item {

            width:200px;
            height:250px;
           
           
        
        }
        .appoinmet-section h3{
            font-size: 24px;
        }
       
        .home{
            background: url(../img/home/bg-mob.png);
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            grid-template-columns: 1fr;
            height: auto;
            gap: 0;
            grid-auto-flow: dense;
        
        
           }  .home-text h1{
            text-align: center;
           
           }
           .home-text h3{
            text-align: center;
            margin-bottom: 10px;
           }
           .home-text{
            padding: 0% 8% 15% 8%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            order: 2;
           }
           .home-img{
           order: 1;
           
            padding: 10% 8% 10% 8%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        
        
           
        }
        
        .home-img img{
           
            width: 100%;
           height: auto;
            /* background: rgba(255, 255, 255, 0.6); */
           
        
        
        } 
}

@media(max-width:1050px){
    :root{
     
        
        --big-font:3.2rem;
        --h2-font:2rem;
        --h3-font:1.5rem;
       
        
        }
      
        .cta{
            grid-template-columns: 1fr;
            gap: 4rem;
           }
           .cta-left{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top: 30px;
            }
              
           .cta-right{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
           }
        
           .cta-right img{
            width: 80%;
            border-radius: 30px;
          
           }
           .cta-btn a{
  
          
            font-size: var(--p-font);
           
        }
       
        .cta-btn a i{
            
            font-size: 16px;
          
        }
      

    
}

@media(max-width:985px){
 
      

    .cta h3{
        font-size: 20px;
        margin-bottom: 20px;
    }
    .cta h2{
        font-size: 24px;
    }
    .cta h4{
        letter-spacing: 0;
    }
    .cta{
        padding: 15px;
        gap: 1rem;
    }
      

    
}
@media (min-width: 801px) and (max-width: 1060px) {
   .container-why{
    grid-template-columns: repeat(2,1fr);
   }
  
}
@media(max-width:800px){

    .card-list{
        margin-top: 40px;
    }

    .banner{
        grid-template-columns: 1fr;
        gap: 3rem;
       }
       .banner-img{
        
            width: 100%;
            height: 550px;}
          
       /* .banner-img img{
        width: 80%;
        padding: 5px;
       } */
       .banner h2{
        text-align: center;
        line-height: 1.5;
       }
  
   .btns{
    display: flex;
    gap: 5px;
     align-items:baseline;
    justify-content: flex-start;
   }
 

.container-why{
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));

   }

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

 
  
   .cta-left h2{
    text-align: center;
    font-size: 30px;
   }
   .cta h4{
    text-align: center;
    font-size: 20px;
   }
 
    /* :root{
     
        
        --big-font:2rem;
        --h2-font:1.5rem;
        --h3-font:1rem;
       
        
        }
    section{
        padding: 5%;
    } */
}

@media(max-width:600px){
    .about-us,.banner-out,.cta-out,.appoinmet-section,.service,.doctors,.container-why {
        padding: 15% 5%;
    }
    .home-text img{
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }
    .home-img .slideshow {

  
        position: relative;
       width: 100%;
     
    
     
        
    }.overlay {
      
        font-size: 1rem;
       
    }
    .input-field {
        width:300px;}
   
    :root{
     
        
        --big-font:2.2rem;
        --h2-font:1.5rem;
        --h3-font:1.1rem;
       
        
        }
    section{
        padding: 5%;
    }

    .btn{
        padding: 15px 20px;
    }
    .home-text{
        padding: 0% 8% 25% 8%;
       
       }
       .home-img{
      
       
        padding: 20% 8% 10% 8%;
        
       
    }
    .home-img img{
        width: 100%;
    }
    
    .banner h2{
        font-size: 1.7rem;
    }
    .cta h4{
        text-align: center;
        font-size: 16px;
       }
       .cta h3{
        letter-spacing: 0;
        text-align: center;
        margin-top: 5px;
       }
      .cta{
        padding: 10px;
        gap: 1.5rem;
      }
     
      
       .cta-right img{
        width: 100%;
       }
       .cta-btn{
        flex-direction: column;
    }
}

@media(max-width:500px){

    .doctors .doc-wrapper {
        grid-template-columns:1fr;
       }
       .banner-img {
        width: 100%;
        height: 300px;
       }
       :root{
     
        
        --big-font:2.4rem;
        --h2-font:1.5rem;
        --h3-font:1.1rem;
       
        
        }
}

@media(max-width:370px){

    .btns{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
    }
    .banner{
        padding: 20px;
        gap: 1rem;
    }
}