*{margin: 0px; padding: 0px; box-sizing: border-box;}
img{max-width: 100%;}
a, a:hover, a:focus, a:visited, a:active{text-decoration: none;}
ul, li, p{margin: 0px; padding: 0px;}

body{font-family: 'Lora', serif;}
.sosical {
    width: 40px;
    position: fixed;
    top: 40%;
    right: 5px;
    z-index: 102;
}
.sosical a .instagram{margin: 2px 0px;}
.sosical a img{width: 30px; height: 30px;}

.book-appointment-btn {
    position: fixed;
    left: -59px;
    top: 43%;
    transform: rotate(-90deg);
    background: #221f1e;
    padding: 11px;
    border-radius: 0px 0px 10px 10px;
    z-index: 9;
}
.book-appointment-btn a {
    color:#fff;
}

/* header */

header{background-color: #fff;}
header .navbar-brand{ padding: 0px; margin: 0px; width: 15%;}
header .nav-item .nav-link{font-size: 16px; font-weight: 500; color: #000; transition: .5s;}
header .nav-item .nav-link:hover{color: #221f1e;}
header .icon li a, header .icon li .btn{ transition: .5s; display: inline-block; color: #fff; font-size: 16px; background-color: #221f1e; padding: 8px 30px; border-radius: 100px;}
header .icon li a:hover{color: #fff;}
header .navbar-toggler{font-size: 22px; color: #fff; border-color: #fff; padding: 8px 10px;}
header .navbar-toggler:focus{box-shadow: none;}
header .searching{display: none !important;}

header .soical-icon{display: none !important;}
header .soical-icon li a{font-size: 40px;}
header .soical-icon .facebook a{color: #1877f2;}
header .soical-icon .instagram a{
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
header .soical-icon .youtube a{color: red;}
 
/*  */
header .down{position: relative;}
header .down .drop{display: flex; flex-direction: column; position: absolute;  top: 40px; z-index: 999; background-color: #ffffff; list-style: none; width: 250px; padding: 15px; transition: .5s; transform: scale(0);
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.3);
    border-radius: 20px;}
    header .down .drop li a{color: #000; font-size: 15px; padding: 8px 10px; border-radius: 5px; transition: .5s; display: block;}
    header .down .drop li a:hover{background-color: #221f1e; color:#fff;}
header .down a i{font-size: 14px; transition: 0.3s;}
header .down:hover a i{transform: rotate(180deg);}
header .down:hover .drop{ transform: scale(1);}
header .down .drop .view a{background-color: #221f1e; color:#fff;}



/* slider */
#slider .owl-theme .owl-dots{display: none;}


/* about */
#about{padding: 175px 0px; background-image: url(../img/vector.png); background-repeat: no-repeat; background-position: bottom left;}
#about .content .p1{color: #221f1e; font-size: 20px; font-weight: 600; margin-bottom: 20px; position: relative;}
#about .content .p1:after{position: absolute; bottom: -5px; left: 0; width: 80px; background-color: #221f1e; height: 3px; content: '';}
#about .content h2{font-size: 45px; font-weight: 400; color: #000}
#about .content .p2{font-size: 16px; color: gray; margin: 15px 0px 30px; text-align: justify;}
#about .content ul{columns: 2; background-color: #ffffffd0; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.189); padding: 30px 20px; border-top: 3px solid #221f1e;}
#about .content ul li:first-child, #about .content ul li:nth-child(3){border-bottom: 1px solid rgb(192, 192, 192); padding-bottom: 20px; margin-bottom: 20px;}
#about .content ul li i{color: #221f1e; font-size: 22px;}
#about .img{overflow: hidden;}
#about .img img{transition: .5s;}
#about .img img:hover{transform: scale(1.2);}


/* about-us */

#about-a{padding: 70px 0px;}
#about-a .imgs{padding: 30px; border: 2px solid rgba(194, 74, 85, 0.2); border-radius: 500px;}
#about-a .imgs img{border-radius: 500px;}
#about-a h2{text-align: center; color: #292F33; font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 400;
letter-spacing: 0.1px; margin-bottom: 20px;}
#about-a .text{text-align: center; color: #5E6366; font-family: 'Playfair Display', serif; font-size: 17px; text-transform: uppercase;
letter-spacing: -0.1px; margin-bottom: 50px;}
#about-a .content h5{color: #000000; font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 15px;}
#about-a .content .text-a {font-family: math; margin-bottom: 15px; width: 579px;
text-align: justify;}
#about-a .content .text-a .first-letter-bold {
color: #000;
float: left;
font-size: 8.4em;
line-height: 0.68;
font-weight: 100;
text-transform: uppercase;}
#about-a .content .btn{padding: 10px 20px; display: inline-block; background-color: transparent; border: 1px solid #303030; border-radius: 30px; color: #303030; font-family: 'Playfair Display', serif; font-size: 16px;}


/* director */
/*#director{padding: 80px 0px; background-image: url(../img/vector.png); background-repeat: no-repeat; background-position: bottom right;}*/
#director{background: #dfdfdf;
    padding: 50px;}
#director .row{row-gap: 20px;}
#director .content{background-color: #ffffffc1; padding: 20px;}
#director .content .p1{color: #000000; font-size: 35px; font-weight: 600; margin-bottom: 30px; position: relative;}
#director .content .p1:after{position: absolute; bottom: -5px; left: 0; width: 80px; background-color: #221f1e; height: 3px; content: '';}
#director .content .p2{font-size: 16px; color: gray; margin: 15px 0px 30px; text-align: justify;}
#director .content .p2 b{font-size: 22px; color: #6e6e6e;}
#director .img img{border-radius: 20px;}



/* gallery *//* gallery */

#gallery {padding: 40px 0px 80px; }
#gallery .p1{color: #221f1e; font-size: 18px; font-weight: 500; margin-bottom: 20px; position: relative; text-align: center;}
#gallery .p1:after{position: absolute; bottom: -5px; left: 45%; width: 60px; background-color: #221f1e; height: 2px; content: '';}
  #gallery h2{color: #000; font-size: 40px; margin-bottom: 30px; text-align: center;}
  
  #gallery h3 a{color: #fff; font-size: 18px; width:100%; display: inline-block; margin-top: 0px; transition: .5s; padding:10px 10px; background-color:#000; border-radius:0px;} 
  /*#gallery h3 a:hover{color: #221f1e;}*/

  .img-wrapper {
    position: relative;
    margin-top: 15px;   
  }
  .img-wrapper img {
    width: 100%;
  }
  
  .img-overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
  }
  .img-overlay i {
    color: #221f1e;
    font-size: 3em;
  }
  
  #overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  #overlay img {
    margin: 0;
    width: 45%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    padding: 5%;
  }
  
  
  #nextButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
  }
  #nextButton:hover {
    opacity: 0.7;
  }
  
  #prevButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
  }
  #prevButton:hover {
    opacity: 0.7;
  }
  
  #exitButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
    position: absolute;
    top: 15px;
    right: 15px;
  }
  #exitButton:hover {
    opacity: 0.7;
  }

  

/* choose */
#choose{padding: 10px 0px 50px;}
#choose .choose h1{font-size: 35px; color: black; font-weight: 200;}
#choose .choose h1 span{font-weight: 700;}
#choose .choose .border{width: 350px; height: 2px; background-color: black; margin-bottom: 30px;}
#choose .choose p{font-size: 16px; margin-bottom: 30px;}
#choose .choose ul{columns: 2; padding-left: 20px;}
#choose .img img{width: 100%;}



/* service */
#service{padding: 80px 0px;    
    background-attachment: fixed;
    background-image: url(../img/banner-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;}
#service .serviceinr{margin: auto; padding: 20px; text-align: center; background-color: #0000008f; border-radius: 20px;}
#service .serviceinr img{width: 50%; margin: auto;}
 #service .serviceinr h4{color: #ffffff; font-size: 22px; margin-top: 15px; position: relative; padding-top: 30px;}
 #service .serviceinr h4:after{position: absolute; top: 0px; left: 38%; width: 80px; background-color: #221f1e; height: 3px; content: '';}




 /* seller */
#seller {padding: 80px 0px 20px; }
#seller .p1{color: #221f1e; font-size: 18px; font-weight: 500; margin-bottom: 20px; position: relative; text-align: center;}
#seller .p1:after{position: absolute; bottom: -5px; left: 45%; width: 60px; background-color: #221f1e; height: 2px; content: '';}
 #seller h2{color: #000; font-size: 40px; margin-bottom: 30px; text-align: center;}
#seller .p1{color: #000; font-size: 16px; text-align: center;}
#seller .row{row-gap: 30px; margin-top: 30px;}
#seller .sellerinr{text-align: center; position: relative;}
#seller .sellerinr .img{overflow: hidden;}
#seller .sellerinr .img img{transition: .5s;}
#seller .sellerinr:hover .img img{filter: brightness(.7); transform: scale(1.1);}

#seller .sellerinr .icon{position: absolute; top: 35%; left: 55px; transform: scale(0); transition: .5s;}
#seller .sellerinr:hover .icon{transform: scale(1);}
#seller .sellerinr .icon li a{display: inline-block; padding: 8px 50px; border-radius: 100px; background-color: #221f1e; color: #fff;  font-size: 16px; font-weight: 600; transition: .5s;}
#seller .sellerinr .icon li a:hover{background-color: #000;}

#seller .sellerinr .heading{color: #fff; font-size: 18px; font-weight: 500; display: inline-block; transition: .5s; margin-top: 0px; padding:8px 10px; background-color:#000; border-radius:0px; width:100%;}
/*#seller .sellerinr .heading:hover{color: #221f1e;}*/


/* happy */
#happy{padding: 40px 0px 20px;}
#happy h2{font-size: 40px; text-align: center; margin-bottom: 20px;}
#happy .owl-dots{display: none;}


/* desing */
#desing{padding: 80px 0px; background-image: url(../img/vector.png); background-repeat: no-repeat; background-position: bottom left;}
#desing .desinginr1{text-align: center; padding: 80px 30px; background-image: url(../img/provided-2.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover;}
#desing .desinginr2{text-align: center; padding: 80px 30px; background-image: url(../img/provided-1.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover;}
#desing .desinginr1 h2, #desing .desinginr2 h2{font-size: 40px; color: #fff;}
#desing .desinginr1 p, #desing .desinginr2 p{font-size: 16px; color: #fff;}


/* testimonial */
#testimonial{padding: 40px 0px 60px;}
#testimonial h2{font-size: 40px; text-align: center; margin-bottom: 20px;}
#testimonial .owl-dots{display: none;}


/* frem */
#frem h2{font-size: 40px;}
#frem{overflow: hidden ;}
#frem .row{row-gap: 20px;}



/* contact */
#contact-text{ padding: 80px 0px;}
#contact-text h3{
      font-size: 35px; color: #000; margin-bottom: 30px;
    }
    #contact-text ul li{margin-bottom: 20px;}
#contact-text ul li i {
    color: #fff;
    font-size: 20px;
    background: #221f1e;
    line-height: 40px;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    text-align: center;
  }
#contact-text ul li a{
    color: #000;
  }



/* footer */
footer{background-image: url(../img/footerbg.jpg);  background-repeat: no-repeat; background-size: cover; background-position: center; padding: 70px 0px 20px; background-attachment: fixed;}
footer .footerinr .logo img{width: 40%;}
footer .footerinr .logo:hover{padding: 0;}
footer .footerinr ul li{color: #fff; margin-bottom: 10px;}
footer .footerinr ul li p{font-size: 16px; color: #fff;}
footer .footerinr ul li i{font-size: 22px; color: #fff;}
footer .footerinr ul li a{display: inline-block; color: #fff; font-size: 16px;  transition: .5s;}
footer .footerinr ul li a:hover{padding-left: 5px;}
footer .footerinr .category li{margin-bottom: 8px;}

footer .img{text-align: center; border-top: #fff 1px solid; padding: 15px 0px; margin-top: 30px;}
footer .img a img{width: 25%;}




/* ===========================================
                 inr-page 
   =========================================*/


#about-heading{
  background-image: url(../img/headingbg.jpg);  background-repeat: no-repeat; background-size: cover; background-position: center; padding: 200px 0px 150px; background-attachment: fixed;
}
#about-heading h2{font-size: 60px; color: #fff;}
#about-heading p{color: white; font-size: 18px; font-weight: 700;}
#about-heading p a{display: inline-block; margin-right: 80px; color: #fff; position: relative; transition: .5s;}
#about-heading p a::after{position: absolute; bottom: 10px; left: 70px; width: 50px; background-color: #221f1e; height: 3px; content: '';}
#about-heading p a:hover{color: #000;}


/* career-heading */

#career-heading{
  background-image: url(../img/careerbg.jpg);  background-repeat: no-repeat; background-size: cover; background-position: center; padding: 200px 0px 150px; background-attachment: fixed;
}
#career-heading h2{font-size: 60px; color: #fff;}
#career-heading p{color: white; font-size: 18px; font-weight: 700;}
#career-heading p a{display: inline-block; margin-right: 80px; color: #fff; position: relative; transition: .5s;}
#career-heading p a::after{position: absolute; bottom: 10px; left: 70px; width: 50px; background-color: #221f1e; height: 3px; content: '';}
#career-heading p a:hover{color: #000;}



/* store-heading */

#store-heading{
  background-image: url(../img/headingbg.jpg);  background-repeat: no-repeat; background-size: cover; background-position: center; padding: 200px 0px 150px; background-attachment: fixed;
}
#store-heading h2{font-size: 60px; color: #fff;}
#store-heading p{color: white; font-size: 18px; font-weight: 700;}
#store-heading p a{display: inline-block; margin-right: 80px; color: #fff; position: relative; transition: .5s;}
#store-heading p a::after{position: absolute; bottom: 10px; left: 70px; width: 50px; background-color: #221f1e; height: 3px; content: '';}
#store-heading p a:hover{color: #000;}


/* countdown */
#countdown { margin: 50px 0px 80px;
  background-repeat: no-repeat;
  background-image: url(../img/counterbg.jpg);
  background-size: cover; 
  background-position: center center;
  background-attachment: fixed;
  color: white;
}


#countdown i {
  font-size: 40px;
  color: #221f1e;
}

#countdown h2 {
  font-size: 45px;
  color: white;
  margin: 15px 0px;
}

#countdown h2 p {
  font-size: 18px;
}

#countdown .count {
  border-right: white 1px solid;
  padding: 80px 0px;
}

#countdown .countnone {
  border-right: none;
}



/* contact-page */
#contact-page{ padding: 80px 0px; background-color: #ffffff;}
#contact-page ul li i {
    color: #fff;
    font-size: 20px;
    background: #221f1e;
    line-height: 40px;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    text-align: center;
  }
  #contact-page ul li{margin-bottom: 20px;}
  #contact-page ul li p{color: #000; font-size: 16px;}
#contact-page ul li a{
    color: #000;
    font-size: 16px;
  }
  #contact-page .contactadd {
    margin-bottom: 30px;
  }
#contact-page .form-control{border-radius: 0px; box-shadow: none;}
#contact-page .form-control:focus{border-color: #000;}

#contact-page .btn-theme {border-radius: 0px; background: #221f1e; color: #fff;}
#contact-page .btn-theme:hover{background-color: #000; color: white;} 




/* category */
#category{padding: 80px 0px;}
#category .menu{background-color: #221f1e; color: #fff; padding: 8px 20px;}
#category .categoryinr{position: sticky; top: 20px;}
#category .categoryinr .btn{display: block; background-color: #221f1e; color: #fff; width: 100%; margin-bottom: 5px; border-top: 1px solid #000; border-radius: 0px; transition: .5s;} 
#category .categoryinr .btn:hover, #category .categoryinr .active{background-color: #000;}
#category .row{row-gap: 20px;}
#category .categoryinr h3{ background-color: #221f1e; color: #fff; padding: 10px; text-align: center;}
#category .inr{text-align: center;}
#category .inr a{font-size: 20px; font-weight: 500; color: #000; text-transform: capitalize; display: inline-block; transition: .5s;}
#category .inr a:hover{color: #221f1e;}
#category .inr .img{overflow: hidden;}
#category .inr .img img{transition: .5s;}
#category .inr .img:hover img{transform: scale(1.1); filter: brightness(.7);}



/* product */
#product{padding: 7px 0 50px;}
#product h1{text-align: center; font-size: 36px; color: #000; margin-bottom: 10px;}
#product .row{row-gap: 30px;}
#product .inr{text-align: center;}
#product .inr a{font-size: 20px; font-weight: 500; color: #000; text-transform: capitalize; display: inline-block; transition: .5s;}
#product .inr a:hover{color: #221f1e;}
#product .inr .img{overflow: hidden; margin-bottom: 20px;}
#product .inr .img img{transition: .5s;}
#product .inr .img:hover img{transform: scale(1.1); filter: brightness(.7);}
#product ul li{margin-bottom: 10px;}


  /* product-details */
  #product-details{padding: 80px 0px;}
  #product-details .row{row-gap: 30px;}
  #product-details h3{color: #221f1e; margin-bottom: 30px;}
  #product-details table tbody tr td{width: 50%;}
  #product-details .inquiry a{background-color: #221f1e; padding: 8px 40px; font-size: 18px; color: #fff; display: inline-block; margin-top: 30px;  transition: .5s; border-radius: 100px; font-weight: 500;}
  #product-details .inquiry a:hover{background-color: #000;}



   /* relateds */
   #relateds{padding: 20px 0px 80px; text-align: center;}
   #relateds h2{color: #000; text-align: center;}
   #relateds a p{font-size: 20px; color: #000; text-transform: capitalize;}
   #relateds .owl-theme .owl-dots{display: none;}


   /* career */
#career{padding: 70px 0px 10px;}
#career .content h2{font-size: 35px;}
#career .content p{font-size: 16px; color: #6e6e6e; font-weight: 500; margin: 15px 0px; text-align: justify;}
#career .content ul li{font-size: 16px; color: #6e6e6e; margin-bottom: 8px;}
#career .btn-theme {border-radius: 0px;
  background: #221f1e;
    color: #fff;}

#career .form-control{border-radius: 0px; box-shadow: none;}
#career .form-control:focus{border-color: #000;}
#career .btn-theme:hover{background-color: #000; color: white;} 


/* contact */
#contact-career{ padding: 80px 0px;}  



/* search */

  
#search-menu {
    text-align: center;
    position: fixed;
    width: 100%;
    height: 20em;
    top: -20em;
    left: 0;
    right: 0;
    white-space: nowrap;
    z-index: 9999;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.01) 100%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 500ms ease all;
    -moz-transition: 500ms ease all;
    transition: 500ms ease all;
  }
  #search-menu.toggled {
    top: 0;
    opacity: 1;
    visibility: visible;
  }
  #search-menu .wrapper {
    position: relative;
    margin: 3em auto 0 auto;
    padding: 0 1em;
  }
  #search-menu .wrapper input {
    width: 60%;
    padding: 0px 10px;
    background: transparent;
    border: none;
    margin: auto;
    border-bottom: 1px solid #ffffff;
    font-size: 18px;
    color: #ffffff;
  }
  #search-menu .wrapper input::placeholder{color: rgb(198, 198, 198);}

  #search-menu .wrapper input:focus {
    outline: none;
  }
  #search-menu .wrapper button:focus {
    outline: none;
  }
  #search-menu button{background-color: transparent; color: #fff; font-size: 30px; border: none;}
  

  /* modal */
.modal .btn-theme {border-radius: 0px; background: #221f1e; color: #fff;}
.modal .btn-theme:hover{background-color: #000; color: white;} 
.modal .form-control{border-radius: 0px; box-shadow: none;}
.modal .form-control:focus{border-color: #000;}
