@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Sans+Mono:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

:root {
  --white: #fff;
  --black: #060606;
  --accent-color: #c00113;
  --dark-section:  #505050; 
  --section-white:#fffef8;
  --background-anime: linear-gradient(-45deg,#00C9B1,#363995,#97000b,#cb0007);  

  --hover-tranzitipn: all .5s cubic-bezier(.3,1,.35,1) 0s;  
}

.section{
    padding: 73px 0;   
}
.section-color{
   background: var(--section-white); 
}
.section-right{
    position: relative;
    overflow: hidden;
}
.section-right::before{
    content: '';
    position: absolute;
    top: 0;
    right: -65%;
    z-index: 0;
    display: block;
    width: 70%;
    height: 100%;
    transform: skewX(+36deg);
    background: var(--background-anime);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    opacity: 0.9;
}
.title{
    font-weight: 500;
    text-transform: uppercase;
    font-size: 38px;
    line-height: 1.2;
    color: var(--black);
    text-align: center;
    margin-bottom: 65px;
     text-shadow: 
      -2px -2px 0 #fff,
      2px -2px 0 #fff,
      -2px 2px 0 #fff,
      2px 2px 0 #fff;
}

.animate-element {
    opacity: 0;
    transform: translateY(22px); 
    transition: opacity 4s ease, transform 4s ease;
}
  
.animate-element.visible {
    opacity: 1;
    transform: translateY(0);
    z-index: 1;
}


.privacy-box p{
  margin-bottom: 12px;
  text-indent: 3ch;
}
.privacy-box h1{
    font-weight: 700;
    text-align: center;
    margin-bottom:  29px;
}
.privacy-box h2{
    font-weight: 500;
    text-align: center;
    margin-bottom:20px ;
}
.privacy-box table,.privacy-box a{
    word-break: break-word;
    color: inherit;
}
.logo{
   color: var(--black);
    font-size: 18px;   
    display: flex;
    align-items: center;
    text-align: left;
    gap: 8px;
}

.header-logo{
    position: relative;
    padding: 5px 12px;
   
    transition: var(--hover-tranzitipn);
   
}
.header-logo::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--white);
    box-shadow: 0px 5px 26px 0px rgb(0 0 0 / 15%);
    border-radius: 12px;
    transform: skewX(+10deg);
    z-index: -1;
}
.logo:hover{
color: var(--accent-color);
}
.logo img{
    width: 70px;
    height: 70px;
    object-fit: contain;
}
body{
    direction: ltr;
    font-family: 'Ubuntu Sans Mono', sans-serif !important;
    font-size: 14px;
    margin: 0;
    padding: 0px;
    color: var(--black);
  
}
h1,
h2,
h3,
h4,
h5,
p{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: var(--hover-tranzitipn);
}
a:hover,a:focus{
    color: var(--accent-color);
}
img{
    display: block;
    max-width: 100%;
    max-height: 100%;
}

ul{
    margin: 0;
    padding: 0;
}
.navbar-custom{
    position: fixed;
    background-color: #111;   
    width: 100%;
    border-radius: 0px;
    padding-top: 13px;
    padding-bottom: 13px; 
    z-index: 999;  
    margin-bottom: 0px;
    font-weight: 500;
}
.nav-sticky { 
    position: fixed;
    top: 0px;
    right: 0;
    left: 0;  
           
    background-color: #fffef8;
    color: var(--dark-section); 
    box-shadow: 0px 4px 7 0px rgba(0, 0, 0, 0.06);  
   
    z-index: 4;
   padding-top: 13px;
   padding-bottom: 13px;  
    -webkit-transition: var(--hover-tranzitipn);
    -moz-transition: var(--hover-tranzitipn);
    -o-transition:var(--hover-tranzitipn);
    -ms-transition: var(--hover-tranzitipn);
    transition: var(--hover-tranzitipn);
}
.nav-link{
    color: var(--white);
    transition: var(--hover-tranzitipn);
    
}
.nav-sticky .nav-link,.nav-sticky .header-logo{
    color: var(--dark-section);
}
.dropdown-item a{
    white-space: break-spaces;
    transition: .2s;
    
}
.dropdown-item:focus, .dropdown-item:hover{
    color: var(--accent-color);
    background: inherit;
}
.navbar-nav{
    width: 100%;
    justify-content: end;
}
.nav-item:hover .nav-link,.nav-link:focus,.nav-link:hover,.nav-link.active,.navbar-nav .nav-link.show   {
    color: var(--accent-color);
}

.header-section{
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;

}
.header-section::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
   
    display: block;
    width: 56%;
    height: 100%;
    background: var(--background-anime);
    -webkit-transform: skewX(+25deg);
    transform: skewX(+25deg);
   
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    opacity: 0.9;
}
@keyframes Gradient {
    0%{
        background-position: 0% 50%;
    } 
    50%{
        background-position: 100% 50%;
    }  
    100%{
        background-position: 0% 50%;
    } 
}
.header-bg-img{   
    background-image: linear-gradient(to right, rgba(47,48,58,0.4), rgba(47,48,58,0.4)),url(image/illustrations_header_6978bc1fc2bca3.92615439.jpg); 
    background-size: cover;
    background-position: center;
}
.hero-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 40%;
    left:0;
    right: 0;
    bottom: 0;    
    color: #ffff;
  
}
.hero{
    display: flex;
    flex-direction: column;
    align-items:  flex-start;
    gap: 34px;
    padding-top: 22px;
    padding-bottom: 22px;
}
.hero-text{
    font-size: 38px;
    font-weight: 500;
     text-shadow: 
      -2px -2px 0 #000,
      2px -2px 0 #000,
      -2px 2px 0 #000,
      2px 2px 0 #000;
}
.hero-time{
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.hero-time div{
    font-size: 18px;
}
.footer-section{
    padding-top: 50px;
    background: var(--black);
   
   
}
.footer-section-left{
    position: relative;
    overflow: hidden;
}
.footer-section-left::before{
    content: '';
    position: absolute;
    top: 0;
    right: -22%;
    z-index: 0;
    display: block;
    width: 56%;
    height: 100%;
    transform: skewX(+36deg);
    background: var(--background-anime);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    opacity: 0.9;
}
.footer-container{
    flex-direction:  row;
}
.footer-button{
    background: var(--accent-color);
    padding: 26px 0;
    color: var(--white);
}
.footer-button-wrapper{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    font-size: 14px;
    text-align: center;
    flex-direction: column-reverse;
}
.footer-element{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;


}
.privacy:hover,.privacy:focus{
    color: var(--black);
}
.footer-top-wrapper{
    position: relative;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--white);
    text-align: left;
    height: 100%;
    justify-content: center;
}
.footer-top-wrapper .logo{
    color: var(--white);
}


.pad-t{
    padding-top: 90px;
}
.address_list{
    
    flex-direction: column;
    display: none;
    margin-top: 100px;
   
}
.address_item{
    padding: 5px 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;

    a{
        word-break: break-all;
    }
}
.address_item i{
font-size: 20px;
color: var(--accent-color);
font-weight: 700;
}
.footer-top-wrapper .address_list{
   display: flex;
    margin-top: 0;

}
.footer-top-wrapper .address_item i{
    color: var(--white);
}
.menu-footer{
    list-style: none;
    display: flex;
    flex-direction: column;    
}
.menu-footer>li{
 padding: 5px 0;
}
.dop-menu{
    list-style: none;
    margin-left: 8px;
}
.menu-footer>li>a{
    display: flex;
    align-items: center;
    gap: 8px;
}

.open-box{
    display: none;
    flex-direction: column;
    gap: 8px;
}
.text-box{
    font-size: 26px;
}
.sbi_images{
   display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.sbi_item{
    width: 30%;
}
.sbi__item{
    width: 100%;
    height: 100%;
}
.sbi__item img{
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
   
    transition: all 0.4s ease-in-out;
}
.sbi_item:hover .sbi__item img{
    opacity: 0.65;
}
.map-wrapper {
    height: 450px;	
    width: 100%;				
}
iframe{
    height: 100%;
    width: 100%;
    border: 0;
}
.section-contact{
   padding: 200px 0 100px;
}
.contact-area {
   position: relative;
    overflow: hidden;
    z-index: 1;
    background-image: url(image/pictures_header_6978bc1fc2bd64.98839480.jpg); 
    background-attachment: fixed;
    background-position: top;
    background-size: cover;
}
.contact-area-2{
   background-image: url(image/pictures_header_6978bc1fc2bd94.17003421.jpg); 
    background-attachment: fixed;
    background-position: top;
    background-size: cover;
}
.contact-area-3{
    background-image: url(image/figures_header_6978bc1fc2bdc1.83317727.jpg); 
    background-attachment: fixed;
    background-position: top;
    background-size: cover;
}
.background-overlay{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #514b4ba6;
    opacity: .75;
    transition: background .3s,border-radius .3s,opacity .3s;
   
}
.top-title-cont{
    position: relative;
    color: var(--white);
    display: inline;
    text-align: center;
   

}
.top-title-cont::before{
   position: absolute;
   content: "";
   width: 100%;
   height: 2px;
   background: var(--white);
   bottom: -5px;
}
.bg-light{   
    background: #fffef8;
    background-image: url( content/images/transparent_hcuc0.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


.section-left {
    position: relative;
    overflow: hidden;
}
.section-left::before{
    content: '';
    position: absolute;
    top: 0;
    left: -56%;
    z-index: 0;
    display: block;
    width: 56%;
    height: 100%;
        
    -webkit-transform: skewX(+35deg);
    transform: skewX(+36deg);
    background: var(--background-anime);
    background-size: 400% 400%;
    animation: Gradient 10s ease infinite;
    opacity: 0.9

}
.contact-infa-wrapper{
    position: relative;
    background:var(--white);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-radius: 8px;
    
}
.form-page,{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.form-input,.input-control--block-control,.textarea-control--block-control{
    width: 100%;
    padding: 12px 22px;
    border: 0;
    min-height: 55px;
    background-color: #f8f8f8;
    font-weight: 500;
    border-radius: 0.25rem;
    border: 2px solid #b6b6b7;
    outline: none;
}
.grup-form{
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 22px;
}
.contact-form-check{
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.contact-title{
    color: var(--black);
    margin-bottom:  26px;
    text-align: center;
}
.cont-page-box{
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    flex-direction: row;
}
.cont-page-item{
   display: flex;
   gap: 20px;
   align-items: center;
   text-align: center;
    flex-grow: 1;
    justify-content: center;
    flex-basis: 220px;
   flex-direction: row;
}
.cont-page-item i{
    color: #c00113;
    font-size: 42px;
   
}
.cont-page-text{
   
    display: inline-block;
}

.serv-list{
    display: flex;
    gap: 40px;
    flex-direction: column;
   
}
.serv-list>div{
    flex: 1;
    
}
.poz{
    position: relative;
}
.serv-item{
   
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    flex-direction: row ;
   
}
.serv-item-box{
    
    flex-grow: 1; 
    flex-basis: 300px;   
    width: 100%;
    
}
.card{
    width: 100%;
    height: 100%;
    background: var(--white);
    border-radius: 8px;
    padding: 26px;
    box-shadow: 0px 5px 26px 0px rgb(148 146 245 / 15%);
    

}
.card-display{
   display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    text-align: center;
}


.card-title,.card-title h3{
    font-size:20px;
    color: var(--accent-color);
    transition: var(--hover-tranzitipn);
}
.card-title:hover,.card-title:focus{
    color: var(--black);
}
.card-link{
    background: #c00113;
    color: #ffffff;
    font-size: 32px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    margin: 0 auto;
    margin-top: 22px;
    transition: var(--hover-tranzitipn);
}
.card-link i{
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    transition: var(--hover-tranzitipn);
}
.card-link:hover,.card-link:focus{
    background: var(--black);
    color:var(--white);
}
.bi{
    height: auto;
}
.serv-card-img{
    display: inline-block;
    transition: var(--hover-tranzitipn);
    border: 2px dashed #e4e4e4;
    border-radius:  0%;
    
}
.card-img_icon{
    display: inline-block;
    height: 94px;
    width: 94px;
    position: relative;
    vertical-align: top;
    background-size: 70px;
    transform-style: preserve-3d;
    transition: all 1s linear;
    background-repeat: no-repeat;
    background-color: transparent;
    border-radius:  0%;
    background-position: center;
    border: none;
   
}

.card:hover .card-img_icon{
    transform: rotateY(180deg);
    background-color: #f1f1f1;
    transition: all 1.0s linear;
}
.container-blog-inner{
    padding: 0 20px 0;
    display: flex;
    flex-direction: row;
    height: 100%;
}
.blog-content-outer{
    flex: 1;
}


.blog-list{
    display: flex;
    gap: 40px;
    flex-direction: column;
}
.blog-item{
    flex: 1;
    display: flex;
    gap: 40px;
    flex-direction: column-reverse;
}
.blog-box{
    flex: 1;
}
.blog-content-inner{
    position: relative;
    padding: 12px;
    background: #fff;
   
    border-radius: 3px;
    box-shadow: 0px 0px 12px 0px rgb(0 0 0 / 10%);
    height: 100%;
}
.blog-detail{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    padding: 12px 22px;
    border: 2px dashed #e4e4e4;
    border-radius: 3px;
    color: #aaaaaa;
    height: 100%;
    transition: var(--hover-tranzitipn);
}
.blog-title{
    padding: 5px 0 5px;
    font-size: 20px;
    border-bottom: 2px solid #e4e4e4;
}
.blog-author-inner{
  
    padding: 0 12px;
    
    text-transform: capitalize;
    letter-spacing: 2px;
}
.blog-link{
    font-size: 14px;
    text-transform: uppercase;
   
    color: var(--black);
}
.blog-image-oute{
    flex: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
    vertical-align: top;
  
}
.blog-image{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    vertical-align: top;
}


.blog-image img{
    width: 100%;
    object-fit: cover;
    border: 5px;
    height: 350px;
}
.blog-date-outer{
    position: absolute;
    top: 20px;
    left: 20px;
    color: var(--black);
    font-size: 14px;
    font-weight: 100;
    text-transform: uppercase;
    display: inline-block;
    background: #ffd730;
    padding: 4px 12px;
    border-radius: 5px;
}
.container-blog-inner:hover .blog-detail{
       border-color: var(--accent-color);
}
.section-block-bg{
    padding: 26px;
    background: rgb(192 1 19 / 80%);
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
    -webkit-box-shadow: 0px 5px 26px 0px rgb(148 146 245 / 15%);
    box-shadow: 0px 5px 26px 0px rgb(148 146 245 / 15%);
    overflow: hidden;
    color: var(--white);
}
.section-block-bg h2{
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
.text-bg-block{
    padding:0 0 14px 0;
    margin-bottom: 22px;
    font-size: 20px;
    border-bottom: 2px solid rgb(255 255 255 / 58%);
}
.feature-list{
    display: flex;
    align-items: start;
    gap: 20px;

}
.overlay-wiht{
    background-color: #ffffffa6;
}
.benefit-box{
    text-align: center;
}
.benefit-box p{
    color: var(--black);
    font-weight: 500;
    font-size: 14px;
    transition: var(--hover-tranzitipn);
}
.benefit-outer-block{
    padding: 8px;   
    position: relative;
    overflow: hidden;    
    vertical-align: top;
    display: inline-block;
    transition: var(--hover-tranzitipn);
    border: 2px dashed #ec8383;
    text-align: center;
    border-radius:  0%;
    margin-bottom: 22px;
    

}
.benefit-img{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: var(--hover-tranzitipn);
}
.benefit-img img{
    width: 120px;
    height: 120px;
    object-fit: cover;
    transition: var(--hover-tranzitipn);
}
.benefit-box:hover .benefit-img{
   
    animation-name: swing;
    animation-duration: 800ms;
}
.benefit-box:hover{
    border-color: var(--accent-color);
}
.benefit-box:hover .benefit-box p{
color: var(--accent-color);
}
@keyframes swing {
    20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
}
40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
}
60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
}
80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
}
100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
}
    
}

.about{
    width: 70%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
  }

 .popup video {
    width: 80%;
    max-width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .close {
    position: absolute;
    top: 22px;
    right: 22px;
    font-size: 50px;
    color: #fff;
    cursor: pointer;
  }
  .btn-box{
    display: flex;
    align-items: center;
    justify-content: center;
  }
   .btn-hero{ 
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--white);
    font-size: 100px;
  }
  .text-about{
    font-size: 20px;
  }
.page-content{

}
.priceBox{
    position: relative;
    display: inline-flex;
    height:70px;
    padding: 5px 12px;
    align-items: center;
    gap: 12px;
    z-index: 1;
    margin-top: 40px;
    font-weight: 500;
    font-size: 23px;
    color:  #f39189;
    
    
}
.priceBox::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    background: var(--white);
    box-shadow: 0px 5px 26px 0px rgb(0 0 0 / 15%);
    border-radius: 12px;
    transform: skewX(+10deg);
    z-index: -1;


}
.main-picture {
    border-radius: 10px;
    float: right;
    width: 40%;
    margin: 20px;
    margin-top: 0;
    margin-right: 0;
}
.main-content{  
   font-size: 16px;
    line-height: 1.6;   
}
.main-content p{
    margin-bottom: 12px;
    text-indent: 3ch;
}
.main-content ul,ol{
    list-style: inside;
}
.input-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-text{
    text-align: center;
    font-size: 18px;
    margin: 0 auto 40px auto;
    width: 80%;
}
.tarif-list{
    display: flex;
    flex-wrap: wrap;
}
.tarif-item{
    flex-grow: 1;
    flex-basis: 300px;
}
.tarif-box{
    padding: 20px;
    width: 100%;
    height: 100%;
}
.tarif-wrapper{
    background: var(--white);
    box-shadow: 0px 5px 26px 0px rgb(249 18 18 / 17%);
    text-align: center;
    border-radius: 8px;
    padding: 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tarif-naim{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.tarif-title{
    color: var(--accent-color);
    font-weight: 500;
    font-size: 28px;
   
}
.tarif-pris{
    background: var(--accent-color);
    color: var(--white);
    height: 62px;
    width: 100%;
    text-align: center;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.tarif-service{
    margin: 20px 0;
    text-align: center;
}
.tarif-service_item{
    padding: 12px 0;
    display: flex;
    gap: 12px;   
    font-size: 14px;
}
.tarif-button{
    position: relative;
    margin-top: auto;
    width: 100%;
}
.tarif-button a{
    width: 100%;
}
.bg-cart{
    background: #eac8af;
}
.foot-tex{
    display: none;
    text-align: center;
    font-size: 20px;
}
.comments-item{
        
    padding: 40px;  
    border-radius:8px;    
    flex: 1; 

        
    -webkit-box-shadow: 0px 5px 26px 0px rgb(0 0 0 / 15%);
    box-shadow: 0px 5px 26px 0px rgb(0 0 0 / 15%);
    text-align: left;
    background: rgb(255 255 255 / 80%);
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
}
.comments-item-iner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
    gap: 20px;
    text-align:  center;
}
.comment-img{
    display: flex;
    align-items: center;
    justify-content: center;
}
.comment-img img{
    width: 100%;
    object-fit: cover;
    border-radius:8px;  
    height:342px;
    transition: all 0.4s ease-in-out;
}
.comments-item:hover .comment-img img{
opacity: 0.85;
}
.comments-list{
    display: flex;
    gap: 20px;
    flex-direction: row;
   
} 
.slider__item_star {
  font-size: 28px;
  color:  #00C9B1;
}
.bg-partner{
    background: #060606b8;
   
}
.partner-block{
   min-width: 230px;
    padding: 22px;
    height: auto;
    border-radius: 12px ; 
    
}

.partner-block img{               
display: block;
max-width: 100%;

}
.slider-partners .slick-slide{
display: flex;
gap: 5px;
justify-content: center;
align-items: center;
}



@media (max-width: 575px){
    .buton{
        width: 100%;
    }
   .nav-cont-mob{    
    gap: 12px;  
   } 
   .hero-text{
    font-size: 20px;
   }
   .contact-infa-wrapper{
    padding: 20px;
   }
   .open-box div{
    font-size: 14px;
   }
   .cont-page-box{
    flex-direction: column-reverse;
   }
   .cont-page-item{
    flex-basis: 100px;
    justify-content: flex-start;
   }
   .blog-detail{
    padding: 12px;
   }
   .text-bg-block{
    font-size: 20px;
   }
   .feature-list{
    font-size: 14px;
   }
   .text-about {
    font-size: 14px;
}
 .title{
    font-size: 22px;
    margin-bottom: 27px;
   }
   .tarif-box{
    padding-left: 0;
    padding-right: 0;
   }
   .tarif-title{
    font-size: 22px;
   }
   .tarif-pris{
    font-size: 27;
   }
   .tarif-title{
    padding: 0 ;
   }
   .container-blog-inner{
    padding: 0;
   }
   .foot-tex{
    font-size: 14px;
   }
   .comments-item{
    padding: 22px;
   }
   .blog-title{
    font-size: 18px;
   }
   .section-block-bg{
    padding: 22px;
   }
    
}
    
@media (max-width: 768px){
.blog-image img{
    height: 300px;
}
.btn-hero{
    font-size: 50px;
}
.main-picture{
    float: none;
    width:100%;
    margin: 0 0 22px 0;  
    
}
.contact-infa_box .title{
    margin-bottom: 26px;
}
}
 
@media (min-width: 575px) and (max-width: 991.98px){
   .title{
    font-size: 28px;
   }
  
}
@media (min-width: 768px) and (max-width: 991.98px){
   .comment-img img{
    object-fit: contain;   
   
}
  
}


@media (min-width: 992px){
 .navbar-expand-lg .navbar-nav .dropdown-menu{
    left: -105%;
    top: 173%;
  }
   .dropdown-menu{
    width: 212px;
    border: 2px solid #00C9B1;
    background-color: var(--white);
    border-radius:  8px;
    
    margin: 0; 
  

}
  .poz-left {
    margin-right: 50%;
}


.dropdown-item:hover.dropdown-item a{
    color: var(--accent-color);
}
 
.dropdown-menu[data-bs-popper] {
    margin-top: 0;
}


    
}

@media (max-width: 991.98px){
  .navbar-custom{
    background-color: #fffef8;
  }
   .nav-link,.header-logo{
    color: var(--dark-section);
}
.offcanvas {
    background:  #fffef8;
   

}
.address_list{
    display: flex;
    
   
}
.dropdown-menu{
        background: transparent;
        border: none;
    }
   
    .dropdown-item a{
        font-size: 12px;
        color: var(--dark-text);
        line-height: 1.3em;
    }
.navbar-nav {
    text-align: start;
    
    border-top:  0px  dashed #ff000024;
    
    
}
.header-section::before{
    width: 100%;
    -webkit-transform: unset;
    transform: unset;
}
.pad-t{
   padding-top: 0;
}
.footer-container{
    text-align: center;
    flex-direction: column-reverse;
    
}
.section-right:before {
    left: 0;
}
.blog-item {
    flex-direction: column;
}
.container-blog-inner{
    flex-direction: column;
}
.about{
    width: 100%;
}
.form-text{
    width: 100%;
    font-size: 14px;
}
.comments-list{
    flex-direction:  column-reverse;
}

}

@media (min-width: 1200px){
 .footer-button-wrapper{
    flex-direction: row;
 }
 .serv-list{
    flex-direction: column-reverse;
 }
 .serv-item {
    flex-wrap: nowrap;
 }
}



.btn-1 {
    width: fit-content;
     display: inline-block;
     padding: 12px 24px;
     border: 2px solid #ff4444;
     border-radius: 5px;
     transition: all 0.2s ease-in;
     position: relative;
     text-align: center;
     background: #111;
     overflow: hidden;
     font-size: 14px;
     color: #fff;
     z-index: 1;
    }
    
    .btn-1:before {
     content: "";
     position: absolute;
     left: 50%;
     transform: translateX(-50%) scaleY(1) scaleX(1.25);
     top: 100%;
     width: 140%;
     height: 180%;
     background-color: rgba(0, 0, 0, 0.05);
     border-radius: 50%;
     display: block;
     transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
     z-index: -1;
    }
    
    .btn-1:after {
     content: "";
     position: absolute;
     text-align: center;
     left: 55%;
     transform: translateX(-50%) scaleY(1) scaleX(1.45);
     top: 180%;
     width: 160%;
     height: 190%;
     background-color: #ff4444;
     border-radius: 50%;
     display: block;
     transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
     z-index: -1;
    }
    
    .btn-1:hover {
     color: #ffffff;
     border: 2px solid #ff4444;
    }
    
    .btn-1:hover:before {
     top: -35%;
     background-color: #ff4444;
     transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
    }
    
    .btn-1:hover:after {
     top: -45%;
     background-color: #ff4444;
     transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
    }
    
    
    .btn-2 {
      padding: 12px 26px;
       display: block;
      width: fit-content;
      text-align: center;
      font-size: 14px;
       border: none;
      outline: none;
      color: #fff;
      background: #111;
      cursor: pointer;
      position: relative;
      z-index: 0;
      border-radius: 2px;
    }
    
    .btn-2:before {
      content: '';
      background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
      position: absolute;
      top: -2px;
      left: -2px;
      background-size: 400%;
      z-index: -1;
      filter: blur(5px);
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity .3s ease-in-out;
     border-radius: 2px;
    }
    
    .btn-2:active,.btn-2:hover,.btn-2:focus {
      color: #FFF
    }
    
    .btn-2:active:after {
      background: transparent;
    }
    
    .btn-2:hover:before {
      opacity: 1;
    }
    
    .btn-2:after {
      z-index: -1;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: #111;
      left: 0;
      top: 0;
      border-radius: 2px;
    }
    
    @keyframes glowing {
      0% {
        background-position: 0 0;
      }
    
      50% {
        background-position: 400% 0;
      }
    
      100% {
        background-position: 0 0;
      }
    }
    
    
    
      
    .btn-3 {
      background-color: #ffc999;
      color: #111;
      border: none;
      display: block;
      width: fit-content;
      text-align: center;
      border-radius: 2px;
      padding: 12px 22px;
      text-align: center;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      box-shadow: 2px 2px 12px #ffc999;
      transition: all 0.2s ease-in-out;
      
     
    }
    
    
    
    .btn-3:hover {
      background-color:#222F3D;
      color: #ffc999;
      box-shadow: 2px 2px 22px #222F3D;
      transform: translateY(-2px);
    }
    
    .btn-4 {
     width: fit-content;
      text-align: center;
      display: block;
      padding: 12px 26px;
      color: #fff;
      text-transform: capitalize;
      background-color: #111;
      border: 2px solid #efdede;
     -webkit-transition: all .5s cubic-bezier(.3,1,.35,1) 0s;
      transition:all .5s cubic-bezier(.3,1,.35,1) 0s;
      border-radius: 5px;
      font-weight: 500;
      
    }
    
    .btn-4:hover,
    .btn-4:focus {
      background-color: #c00113;
      border-color: #111;
       color: #fff;
    }
    
    
    .btn-5 {
      padding: 22px 40px;
      border: none;  
      display: block;
      font-style: italic;
      width: fit-content;
      background: #0e1721;
      text-align: center;
      border-radius: 2px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #fff;
      border: 2px solid #fff; 
      transition:all .5s cubic-bezier(.3,1,.35,1) 0s;
      font-size: 14px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      outline: 2px solid #fff;
    }
    
    .btn-5:hover {
      color: #fff;
      transform: scale(1.05);
      outline: 2px solid #fff;
      box-shadow: 2px 2px 12px -2px #fff;
    }
    
    .btn-5::before {
      content: "";
      position: absolute;
      left: -50px;
      top: 0;
      width: 0;
      height: 100%;
      background-color: #c00113;
      transform: skewX(45deg);
      z-index: -1;
      transition: width 500ms;
    }
    
    .btn-5:hover::before {
      width: 200%;
    }
    
    
    .cont-page-text a{
        display: block;
    }

    .copyright .copyright-span{
        padding-right: 12px;
    }

    .directltr{
        direction: ltr;
    }

    .privacy-box h3{
        text-align: center;
    }