@font-face {
    font-family: Montserrat-Regular;
    src: url(/assets/fonts/Montserrat/Montserrat-Regular.ttf);
}
@font-face {
    font-family: Montserrat-Bold;
    src: url(/assets/fonts/Montserrat/Montserrat-Bold.ttf);
}
@font-face {
    font-family: Montserrat-SemiBold;
    src: url(/assets/fonts/Montserrat/Montserrat-SemiBold.ttf);
}

@font-face {
    font-family: pt-bold;
    src: url(/assets/fonts/pt-serif/PTSerif-Bold.ttf);
}
@font-face {
    font-family: pt-regular;
    src: url(/assets/fonts/pt-serif/PTSerif-Regular.ttf);
}

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-sizing: border-box;
}
*:focus{outline: none;box-shadow: none;}

html, body {scroll-behavior: smooth}
.x{
    overflow: auto;
    }
.y{
     overflow: hidden;
    }
    #myBtn {
        display: none; /* Hidden by default */
        position: fixed; /* Fixed/sticky position */
        bottom: 40px; /* Place the button at the bottom of the page */
        right: 30px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        border: none; /* Remove borders */
        outline: none; /* Remove outline */
        background-color: #D1B7AE; /* Set a background color */
        color: white; /* Text color */
        cursor: pointer; /* Add a mouse pointer on hover */
        padding: 15px; /* Some padding */
        border-radius: 10px; /* Rounded corners */
        font-size: 18px; /* Increase font size */
      }
      
      #myBtn:hover {
        background-color: #d1b7ae98; /* Add a dark-grey background on hover */
      }
/* MENU */
.active{color: #D1B7AE !important; font-weight: bold;}
.menu ul {display: flex; list-style-type: none;margin: 0;padding: 0;}    
.menu ul li a {position: relative;}
.menu ul li a:hover:after   {content: ''; position: absolute;bottom: -15px;right: 45%;transition: .3s;  height: 10px;width: 10px;background-color: #ECB791;border-radius: 50%;display: inline-block;}
.menu ul li{padding: 0 40px;}
.menu ul{margin-left: 400px;}
.menu ul li a{ font-family: Montserrat-Regular; font-size: 14px; color: #444966;}
.header-desktop p{font-size: 20px;font-family: pt-bold; color: #444966;}



/* header */
.main-header{ background: url('/assets/imgs/homepage-banner.png') no-repeat center center;background-size: cover;}

.header-desktop{display: flex; margin: 20px auto; width: 1050px; align-items: center;}
.header{display: flex; margin: 20px auto;position: relative; margin-top: 30px;width: 1050px; padding: 150px 0;}
.header p{font-family: pt-bold; font-size: 60px;color: #444966; width: 500px;margin-bottom: 100px; }
.header .ownerimg{z-index: 99; margin-left: 50px;}
.graphic{position: absolute; right: 100px; top: -30px; z-index: 1;}


/* second container */
.js-info .title{margin-top: 50px; color: #F7F1EA;font-family: Montserrat-SemiBold; font-size: 20px; width: 400px; text-transform: uppercase;}
.js-info{padding: 20px 40px; margin: 20px auto;margin-top: -80px; position: relative;width: 1050px; background: #444966;}
.js-info .column-25{display: flex;position: relative;}
.js-info .column-25 img{display: flex;position: absolute; }
.js-info .date{font-family: pt-bold; font-size: 20px;color: #D1B7AE;}
.js-info .info{font-family: Montserrat-Regular; font-size: 15px; margin-top: 10px; color: #F7F1EA;}
.js-info .infos{margin-left: 20px; margin-top: -5px;}
.row-25{margin-top: 30px;}
.row-25::after{content: ""; clear: both; display: table;}
.column-25{position: relative; margin-right: 80px;     margin-top: 20px; float: left ; width: 25%;}
.column-25:nth-child(3n+1){ clear: both;}


/* derma-classes */
.derma-classes{height: 400px; background: #D1B7AE ;display: flex; margin: 20px auto;position: relative; margin-top: 100px;width: 1050px;}
.derma-classes .smallgraphic{position: absolute; top: -15px; left: -20px;}
.derma-classes .smallgraphic-right{position: absolute; top: -15px; right: -20px;}
.derma-classes .dermapic{width: 50%; }
.derma-classes .general-derma{width: 50%; padding: 30px; }
.derma-classes .title{font-family: pt-bold; font-size: 25px; color: #444966;}
.derma-classes .info{font-family: Montserrat-Regular; font-size: 15px;margin-top: 25px; color: #444966;}

/* contact us */
.contact-main{background: rgba(209, 183, 174, 0.2);}
.contactus-form-container{padding: 30px 0; margin: 0px auto;position: relative; margin-top: 100px;width: 1050px;}
.contactus-form-container h2{text-transform: uppercase; padding-bottom: 40px; color: #444966;font-family: Montserrat-SemiBold; font-size: 30px;}
.contFormInput input, .contFormInput textarea {background: #d1b7ae3d; border: 2px solid transparent; width: 47%; padding: 5px 10px; padding-bottom: 50px;margin-right: 20px; margin-bottom: 20px; vertical-align: top; max-width: 47%; min-width: 47%; height: 80px; max-height: 80px;}
/* .contFormInput textarea {border: 2px solid #4449667e; width: 47%; padding: 5px 10px; padding-bottom: 50px;margin-right: 20px; margin-bottom: 20px;} */
.contFormInput input:hover, .contFormInput textarea:hover {border: 2px solid rgba(115, 115, 116, 1) }
.contactus-form-container a{font-family: Montserrat-Regular; font-size: 15px;background: #0066E3; color: white;padding: 15px 40px;border-radius:50px; }
.contactus-form-container a:hover{background: white; color: black; border: 1px solid #0066E3 ; transition: 100ms ease-in  }
.moveme{margin-top: 40px; margin-bottom: 50px;}
.contactus-form-container .thankyou-form .thankyou{font-family: pt-bold; font-size: 60px; color: #0066E3;}
.contactus-form-container .thankyou-form span{font-family: Montserrat-SemiBold; font-size: 20px;color: #444966; text-transform: uppercase;}
.contactus-form-container .thankyou-form{ display: none; margin: 100px 0}


.btn-grad {background:#F7F1EA;}
.btn-grad {
    border: none;
   margin: 10px;
   padding: 15px 40px;
   text-align: center;
   font-family: Montserrat-Regular;
   font-size: 15px;
   transition: 0.5s;
   border-color: #F7F1EA;
   background-size: 200% auto;
   color: #444966;            
   box-shadow: 0 0 20px #eee;
   border-radius: 50px;
   display: block;
 }

 .btn-grad:hover {
     cursor: pointer;
   background-position: right center; /* change the direction of the change here */
   color: #444966; 
   text-decoration: none;
 }

/* footer */
.desktop-footer .menu ul {display: flex; list-style-type: none;margin: 0;padding: 0;}    
.desktop-footer .menu ul li a:hover:after   {content: ''; position: absolute;bottom: -15px;right: 45%;transition: .3s;  height: 10px;width: 10px;background-color: white;border-radius: 50%;display: inline-block;}
.desktop-footer{padding: 40px 0px 15px 0;;margin: 0 auto; align-items: center; background: #444966;}
.desktop-footer .menu ul li{padding: 0 40px;}
.desktop-footer .menu ul{margin-left: 400px;}
.desktop-footer .menu ul li a{position: relative;  font-family: Montserrat-Regular; font-size: 14px; color: white;}
.desktop-footer p{font-size: 20px;font-family: pt-bold; color: white;}
.desktop-footer .footer-details{display: flex;}
.desktop-footer .wrapper{width: 1050px;margin: auto;}
.desktop-footer .copyright{font-family: Montserrat-Regular; font-size: 10px; padding-top: 50px; color: rgba(255, 255, 255, 0.5);}




/* our services page */
.header-services{margin: 20px auto;position: relative; margin-top: 30px;width: 1050px; height: 600px;}
.list-services{padding: 40px 100px; margin: 20px auto;position: relative; margin-top: -100px;width: 1050px;background: #444966; }
.list-services .title{word-wrap: break-word; font-size: 30px;font-family: pt-bold; color: #F7F1EA; margin: 10px 0; }
.list-services .images{display: flex; justify-content: space-between; }
.main-header-services{ background: url('/assets/imgs/services-pic.jpg') no-repeat center center;background-size: cover;}
.services-header-container{display: flex; margin: 20px auto;position: relative; margin-top: 100px;width: 1050px;}
.services-header-container .ownerimg{z-index: 99;}
.services-header-container .graphic{right: 140px; position: absolute;}
.services-graphic-mobile{display: none;}
.services-header .row-50{margin-top: 30px;}
.services-header .row-50::after{content: ""; clear: both; display: table;}
.services-header .column-50{position: relative; margin-right: 80px;     margin-top: 20px; float: left ; width: 40%;}
.services-header .column-50:nth-child(6n+1){ clear: both;}
.services-header .js-info{background: none; margin: 0;}

.services-header .js-info .column-50{display: flex;position: relative; margin-top: 43px;}
.services-header .js-info .column-50 img{display: flex;position: absolute; }
.services-header .js-info .column-25{display: flex;position: relative;}
.services-header .js-info .column-25 img{display: flex;position: absolute; }
.services-header .js-info .date{word-wrap: break-word;font-family: pt-bold; font-size: 20px;color: #444966;}
.services-header .js-info .info{word-wrap: break-word; font-family: Montserrat-Regular; font-size: 15px; margin-top: 10px; color: #444966;}
.services-header .js-info .infos{margin-left: 20px; margin-top: -5px;}
.services-header{margin: 20px auto 50px auto;position: relative; width: 1050px;}


.services-header .services-graphic{position: absolute; right: 140px; top: -30px;z-index: 1;}
.services-header .services-pic{z-index: 99; }
.services-header .title{font-size: 60px;font-family: pt-bold; color: #F7F1EA; margin: 50px 0; }


/* display none */
.header-mobile{display: none;}
.mobile-heade-image{display: none;}
.mobile-heade-image-pic{display: none;}
.mobile-footer{display: none;}
.error{color: red;}
@media screen and (max-width: 911px) {

.error{color: red; padding-left: 40px;}
.header-mobile{display: inline-block;}   
.mobile-footer{display: block;} 
.ownerimg{display: none;}   
.services-header-container{display: none;}   
 #myBtn {padding: 12px; /* Some padding */border-radius: 10px; /* Rounded corners */font-size: 14px; /* Increase font size */}


/* menu mobile */
.menu ul li a{font-size: 20px;}
.header-desktop .menu ul{padding-top: 25px;display: inline;text-align: center;}
.header-desktop .menu ul li{padding: 25px 0;display: block;text-align: center;}

/* header mobile */
.btn-grad {
    border: none;
    margin: 30px 0 0 30px;
   padding: 15px 10px;
   text-align: center;
   font-family: Montserrat-Regular;
   font-size: 15px;
   transition: 0.5s;
   border-color: #F7F1EA;
   background-size: 200% auto;
   color: #444966;            
   box-shadow: 0 0 20px #eee;
   border-radius: 50px;
   display: block;
 }
.main-header{display: none;}
.main-header-mobile{height: 600px;width: 100%; background: url('/assets/imgs/mobile-header-home-notext.jpg') no-repeat center center;background-size: cover;}
.main-header-mobile .header-mobile p{font-family: pt-bold; font-size: 40px;   color: #444966;}
.header-desktop{width: 100% !important;}
.header-mobile p{font-family: pt-bold; font-size: 18px;  color: #444966; padding: 20px 30px;}
.header-mobile img{position: absolute; right: 40px; top: 30px; height: 15px;}
.header-mobile #closeme{cursor: pointer; display: none; position: absolute; right: 60px; top: 27px; height: 20px; font-size: 30px; color: #444966;}
.header{flex-direction: column; position: relative; width: 100% !important; display: unset; background: url('/assets/imgs/homepage-banner.png') no-repeat center center;background-size: cover;}



.header button , .contactus-form-container button{ margin-left: 40px;}
.moveme{margin-bottom: 50px;}



.mobile-heade-image-pic{display: none; width: 80%; margin: 0 40px; z-index: 1 !important;object-fit: cover; }  
.graphic{ display: none; top: -30px;right:30px; position: absolute; height: 150px; width: 150px; z-index: 2 !important;}  
.right-info p{display: none; top: 350px; left: 42px; position: absolute; font-size: 40px; width: 300px; z-index: 3;}
.header a{margin-left: 40px; font-size: 14px;}
.js-info .title{ width: 90%;}
.js-info{width: 100%; margin: 0; padding: 20px 30px 50px 30px;}
.js-info .column-25{flex-direction: column;}
.column-25{width: 100%; ; margin-top: 30px;}
.js-info .info{width: unset;}
.derma-classes{width: 80%; flex-direction: column; height: unset; margin-top: 40px; }
.derma-classes .first {order: 2;} 
.derma-classes .second {order: 1;} 
.derma-classes .general-derma{width: 100% !important;}
.derma-classes .dermapic{width: 100%;}
.derma-classes .title{font-size: 21px;}






/* contact us mobile */
.contactus-form-container{width: 100%; margin: 0;}
.contFormInput input, .contFormInput textarea {width: 80%; max-width: 80%; margin: 10px 0; padding-bottom: 25px; margin-left: 40px;}
.contFormInput .message{width: 80%;margin: 10px 0; padding-bottom: 150px; margin-left: 40px;}
.contactus-form-container h2{margin: 0 40px;}
.contactus-form-container a{margin-left: 40px;}
.contactus-form-container .thankyou-form .thankyou{font-family: pt-bold; font-size: 40px; color: #444966 }
.contactus-form-container .thankyou-form span{font-family: Montserrat-SemiBold; font-size: 18px;color: #D1B7AE; text-transform: uppercase;}
.contactus-form-container .thankyou-form{ display: none; margin: 50px 0;padding-left: 40px;}

/* footer */
.desktop-footer{display: none;}
.mobile-footer{padding: 30px 40px; background: #444966;}
.mobile-footer p{font-family: Montserrat-Regular; font-size: 10px;color: #FFFFFF;}




/* menu mobile */
.header-desktop{display: unset; padding: 0;margin: 0; width: 0;}
.header-desktop p{display: none !important;}
.header-desktop .menu{z-index: 99;position: absolute;width: 100%;height: calc(100vh - 50px);background: white;top: 60px;left: -500%;transition: 0.5s;}
.header-desktop .menu.activemenu {
    left: 0;
   
}



/* services */
.list-services{width: 100%; padding: 40px 30px;}
.service-header-mobile{height: 600px;width: 100%; background: url('/assets/imgs/services-mobile.png') no-repeat center center;background-size: cover;}
.list-services .images{flex-direction: column; justify-content: unset;}
.list-services .images img{width: 100%;padding-bottom: 30px;}
.services-header .js-info{padding: 0px 30px 50px 30px;}
.main-header-services{display: none;}
.services-header .js-info .column-50{margin-top: 50px;}
.services-graphic-mobile{display: inline-block;}
.services-header .title{font-size: 40px; padding-top: 30px; margin: 0 !important;width: 90%;line-break: anywhere; }
.services-header .row-50{margin: 0;}
.services-header{width: 100%; margin: unset;}
.services-header .column-50{width: 90%;}
.services-header .services-graphic-mobile{margin-left: 40px; width: 80%; margin-top: 70px;}
.services-header .js-info .column-50{ display: unset;}
.services-header .first {order: 1;} 
.services-header .second {order: 2;} 

.services-header .services-pic , .services-graphic{display: none;}










}