@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    scrollbar-width: thin;
    scrollbar-color: var(--placeholder) var(--gray-first);
  }
  
  /* Chrome, Edge and Safari */
  *::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }
  *::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-track:hover {
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-track:active {
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--placeholder);
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--placeholder);
  }
  
  *::-webkit-scrollbar-thumb:active {
    background-color: var(--placeholder);
  }
:root {

    /* Colors */
    
   

    --black: #000000;
    --white: #ffffff;
    --gray-first:#2E2E2E;
    --gray-second:#ABABAB;
    --gray-third:#EAEAEA;
    --gray-four:#DADADA;


    /* Border Rounded */  
    --border-r-6: 6px;
    --border-r-8: 8px;
   
    
    /* Typography */   
    --base-fonts: "Mona Sans", sans-serif;
    --base: 16px;       
    --text-14: 14px;
    --text-21: 21px;
    --text-20: 20px;
    --text-25: 25px;
    --text-30: 30px;
    --text-35: 35px;
   
}

/*--------------General CSS---------*/




body {
    margin: 0;
    padding: 0;
    color: var(--black);
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke: 1px transparent;
    font-size: var(--base);
    font-family:var(--base-fonts);
    font-weight: 400;
    width: 100%;
}



img {
    border: 0 none;
    max-width: 100%;
}

a {
    outline: none;
    cursor: pointer;
    color: var(--primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--primary-dark);
    text-decoration: none;
}

a,
button,
.btn {
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}



/*-----------------------main styles starts here-----------------------------------------------*/

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
h1, h2, h3, h4, h5 {font-family: var(--secondry-fonts); font-weight: 600;}
main {margin-top: 122px;}





.navbar-brand {
    height: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    position: relative;
    z-index: 5;
}
.navbar-brand img {max-width: 219px;}
.menu.btn12 {display: none;}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 100;
    padding: 0;
    background-color: var(--white);
    padding: 30px 0;
}
header .container-fluid {padding-left: 60px; padding-right: 60px;}
header .navbar-nav {gap: 60px;flex-direction: revert;}
header .navbar-nav .nav-link {
    padding-left: 0;
    padding-right: 0;
    font-weight: 400;
    font-size: var(--text-20);
    color: var(--black);
    text-transform: uppercase;
    margin: 0;
}
header .navbar-nav .nav-item:last-child .nav-link {padding-right: 0;}
header .navbar-nav .nav-link.active {font-weight: 700;}
.navbar-right {
  display: flex;
  align-items: center;
}



header .dropdown-menu .dropdown-toggle {color: var(--black);
  font-size: var(--base);}


.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: var(--secondry);}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .active .nav-link {
    color: var(--secondry);
}

.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--secondry);
    margin: 5px 0;
}
.navbar-toggler {
    height: 36px;
  }


.nav-item {
    position: relative;
}


.common-section {padding: 90px 0;}
.about-section {padding: 80px 0 60px;}
.specialize-section {padding: 0 0 60px;}
.banner-img img {width: 100%;}

.container {max-width: 1194px;}




.title {font-size: var(--text-35); font-weight: 600; margin: 0 0 30px; text-transform: uppercase;}
.sub-title {font-size: var(--text-30); font-weight: 500;  margin: 0 0 30px;text-transform: uppercase;}
.about-section p {font-size: var(--text-21); margin-bottom: 30px;}
.about-section p:last-child {margin-bottom: 0;}
.specialize-section p { margin-bottom: 30px;font-size: var(--text-21);}
.specialize-section p:last-child {margin-bottom: 0;}
.specialize-section ul {padding-left: 25px; margin: 0 0 50px;}
.specialize-section ul li { margin-bottom: 20px; list-style-type: disc;font-size: var(--text-21);}



.white-bg {background-color: var(--white);}

/* Footer Start  */
.contact-btn, .contact-btn:hover, .contact-btn:focus {
  border-radius: 3px;
  background-color: var(--primary);
  position: fixed;
  right: -50px;
  top: 40%;
  font-size: 16px;
  padding: 15px 25px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  transform: rotate(-90deg);
  z-index: 100;
}




.gallery-item {padding: 0 25px;}
.gallery-section {padding: 0 160px 60px;}
.gallery-section .slick-lightbox-slick-img {max-width: 100%;}
.gallery-section .slick-arrow{width: 59px; height: 59px; border: 1px solid var(--gray-second); border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--white);}
.gallery-section .slick-arrow:hover, .gallery-section .slick-next:focus {background-color: #f5f5f5;}
.gallery-section .slick-next::before {content: ""; width: 24px; height: 24px; background-image: url(../images/arrow_right.svg); background-repeat: no-repeat; background-position: center center;}
.gallery-section .slick-prev::before {content: ""; width: 24px; height: 24px; background-image: url(../images/arrow_right.svg); background-repeat: no-repeat; background-position: center center; transform: rotate(-180deg);}
.gallery-section .slick-next {right: -85px;}
.gallery-section .slick-prev {left: -85px;}
.gallery-section .slick-lightbox-slick-item-inner, .slick-lightbox-slick-img {max-width: 100% !important;}

.slick-lightbox .slick-arrow {width: 59px; height: 59px; border: 1px solid var(--gray-second); border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: transparent;}
.gallery-section .slick-lightbox .slick-next {right: -85px;}
.gallery-section .slick-lightbox .slick-prev {left: -85px;}

.slick-lightbox .slick-next::before {content: ""; width: 24px; height: 24px; background-image: url(../images/arrow_right.svg); background-repeat: no-repeat; background-position: center center;}
.slick-lightbox .slick-prev::before {content: ""; width: 24px; height: 24px; background-image: url(../images/arrow_right.svg); background-repeat: no-repeat; background-position: center center; transform: rotate(-180deg);}

.slick-lightbox-close::before {content: "X"; font-family: var(--base-fonts); font-size: var(--text-25);}
footer {border-top: 1px solid var(--gray-third); padding: 30px 0; color: var(--gray-first);}
.footer-container {max-width: 1000px; width: 630px; margin: 0 auto;} 
.footer-top {display: flex; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid var(--gray-four); padding: 0 0 20px; margin-bottom: 25px;}
.info-block {display: flex; align-items: center; gap: 8px;}
.info-block span {display: block;}
.insta-link {text-decoration: underline;}
.copyright {margin: 0; font-size: var(--text-14);}
.process-block {margin-bottom: 50px;}
.process-block .sub-title{margin-bottom: 20px; display: flex; gap: 16px; align-items: center;}
.sample-img-block {padding-top: 20px; }
.sample-img {margin: 5px 0;}
.quality-block .sample-img {margin: 0;}
.process-video video {width: 100%; max-height: 94vh; display: none;}
.modal-open .process-video video { display: block;}
.video-modal .btn-close {position: fixed; right: 20px; top: 20px; background: none;}
.video-modal .btn-close::before {content: "X"; opacity: 0.85;
  font-family: var(--base-fonts);
  font-size: var(--text-25); z-index: 999999; color: var(--white);}
  .video-block {margin-top: 30px; cursor: pointer;}
  .process-page {padding-bottom: 20px;}
  .video-modal .modal-xl{max-width: 474px;}
  .video-modal .modal-content {background-color: var(--black);}