@font-face {
    font-family: "Inter",sans-serif;
    font-style: "normal";
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/Inter-Regular.ttf) format("opentype");
  }
  @font-face {
    font-family: "Inter",sans-serif;
    font-style: "normal";
    font-weight: 600;
    font-display: swap;
    src: url(./assets/fonts/Inter-SemiBold.ttf) format("opentype");
  }
  @font-face {
    font-family: "Roboto",sans-serif;
    font-style: "italic";
    font-weight: 300;
    font-display: swap;
    src: url(./assets/fonts/Roboto-LightItalic.ttf) format("opentype");
  }
  @font-face {
    font-family: "Roboto",sans-serif;
    font-style: "normal";
    font-weight: 300;
    font-display: swap;
    src: url(./assets/fonts/Roboto-Thin.ttf) format("opentype");
  }
  @font-face {
    font-family: "Roboto",sans-serif;
    font-style: "normal";
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/Roboto-Regular.ttf) format("opentype");
  }
  @font-face {
    font-family: "Roboto",sans-serif;
    font-style: "normal";
    font-weight: 500;
    font-display: swap;
    src: url(./assets/fonts/Roboto-Medium.ttf) format("opentype");
  }
  @font-face {
    font-family: "Roboto",sans-serif;
    font-style: "normal";
    font-weight: 700;
    font-display: swap;
    src: url(./assets/fonts/Roboto-Bold.ttf) format("opentype");
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html{
    vertical-align: baseline;
    scroll-behavior: smooth;
    font-size: 62.5%;
    /* height: 100%; */
  }
  svg{
    width: 20px;
    height: 20px;
  }
  a{
    color:inherit;
    text-decoration: none;
  }
  body{
    max-width: 100%;
    /* min-height: 100%; */
    background-color: var(--white-color);
    margin: 0 auto;
  }
  .wrapper{
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
 main{
    flex-grow: 1;
 }
  h1{
    font-size: 6rem;
  }
  h2{
    font-size: 3rem;
  }
  h3{
    font-size: 2.5rem;
  }
  h4{
    font-size: 2rem;
  }
  h5{
    font-size: 1.6rem;
  }
 
  :root{
    --orange-color:#b17a50;
    --orange-sun-color:#d98545;
    --white-color:#f2efec;
    --grey-color:#64625985;
    --black-color:#1e1e1e;
    --bigger-font-calc: 6rem;
    --large-font-calc:calc(2.5rem + 1vw);
    --medium-font-calc:2.9rem;
    --small-font: 1.2rem;
  }
  .container{
    max-width: 120rem;
    padding: 0rem 2rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  .header{
    max-width: 100%;
    background: inherit;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, rgba(57, 55, 55, 1), rgba(14, 14, 14, 0.8)),url(../assets/img/office.jpg);
  }
  .info__wrap{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 133%;
    margin-top:10px;
  }
  .wrap{
    max-width: 120rem;
    /* padding: 0 3%; */
  }

   .info__container{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:center;
    max-width:80rem;
    gap:  0.5rem;
    font-family: "Roboto",sans-serif;
    font-weight: 400;
    color:var(--white-color);
    font-size: 1.2rem;
  }
  .phone-number{
    display: flex;
    position: relative;
    flex-direction: row;
    gap:0.5rem;
    align-items: center;
  }
  .phone-number::after{
    display: block;
    position: absolute;
    left: 50%;
    bottom:0;
    width: 0;
    height: 2px;
    bottom: -2px;
    background-color: var(--orange-color);
    content: '';
    transition: width 1s;
    transform: translateX(-50%);
  }
  .phone-number:hover::after{
    margin-bottom: 0px;
    width: 100%;
  }
  .phone-number a::before{
    content: '';
    position: absolute;
    left:0;
    width: 100%;
    height: 100%;
   }
 .phone-number_text{
  color:var( --orange-sun-color);
  padding-top: 2px;
  margin: 0px;
 }
 .email__container{
  display: flex;
  position: relative;
  flex-direction: row;
  gap:0.5rem;
  align-items: center;
 }
 
 .email__container::after{
  display: block;
  position: absolute;
  left: 50%;
  bottom:0;
  width: 0;
  height: 2px;
  bottom: -2px;
  background-color: var(--orange-color);
  content: '';
  transition: width 1s;
  transform: translateX(-50%);
  cursor: pointer;
 }
 .email__container:hover::after{
  margin-bottom: 0px;
  width: 100%;
 }
 .email__container a::before{
  content: '';
  position: absolute;
  left:0;
  width: 100%;
  height: 100%;
 }
 .email-text{
  margin: 0px;
 }
 .schedule{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap:0.5rem;
  align-items: center;
 }
 .schedule-time{
  white-space: nowrap;
  margin:0px;
  text-align: center;
 }
 .schedule-time span{
  color: #859597;
 }
 .review{
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  gap:0.5rem;
  align-items: center;
 }
 .review::after{
  display: block;
  position: absolute;
  left: 50%;
  bottom:0;
  width: 0;
  height: 2px;
  bottom: -2px;
  background-color: var(--orange-color);
  content: '';
  transition: width 1s;
  transform: translateX(-50%);
  cursor: pointer;
 }
 .review:hover::after{
  margin-bottom: 0px;
  width: 100%;
 }
 .review a::before{
  content: '';
  position: absolute;
  left:0;
  width: 100%;
  height: 100%;
 }
 .review-link{
  white-space: nowrap;
  margin: 0px;
 }
  header .wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }
 .header__view{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 1.2rem 0rem 0rem 0rem;
  box-shadow:0px 2px 1px  -1px  rgba(242, 239, 236,1);
 }
 .burger{
    display: none;
    position: relative;
    z-index: 10;
    align-items: center;
    justify-content: flex-end;
    width: 30px;
    height: 18px;
   }
   .burger span{
    height: 2px;
    width: 100%;
    transform: scale(1);
    background-color: var(--white-color);
    transition: transform .5s;
    
   }
   .burger::before, .burger::after{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: var(--white-color);
    transition:transform .5s;
   }
   .burger::before{
    top: 0;
   }
   .burger::after{
    bottom: 0;
   }
   
   
   
   
   .burger-wrapper.open .burger::after {
    bottom: 50%;
    transform: translate(0, 50%) rotate(45deg);
    transition: transform .5s;
  }
  
  .burger-wrapper.open .burger::before {
    top: 50%;
    transform: translate(0, -50%) rotate(-45deg);
    transition: transform .5s;
  }
  
  .burger-wrapper.open .burger span {
    opacity: 0;
    transition: transform .5s;
  
  }
  
  .burger-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  
   .logo-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    max-width:250px;
    height: 75px;
    margin-right: auto;
   }
   .header__logo{
    display: flex;
    justify-content: start;
    align-items: center;
   
   }
   .header__logo:active{
    transition: ease 0.5s;
   }
   .logo-img{
    display: flex;
    position: relative;
    width: 190px;
    height: 60px;
    
   }
   .logo-img:active{
    text-shadow: 3px 3px 3px var(--white-color),
                5px 7px 7px var(--black-color);
   }
   .logo-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    white-space: wrap;
    font-family: "Roboto",sans-serif;
    font-weight: 700;
    font-size: 13px;
    color:var(--white-color);
    height: 60px;
    text-transform: uppercase;
    line-height: 1;
    padding: 0px;
    text-shadow: 3px 3px 3px var(--black-color),
                5px 7px 7px var(--black-color);
   }
   .logo-text span{
    font-family: "Roboto",sans-serif;
    font-weight: 800;
    font-size: 5rem;
    color:var( --orange-sun-color) ;
    text-align:start;
    text-shadow: 3px 3px 3px var(--black-color),
                9px 5px 5px var(--black-color);
    text-transform: uppercase;
    line-height: 0.8;
   }
  
   
   .header__nav{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 65rem;
    padding: 0px;
    margin-right: 1rem;
   }
   .navigation{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    max-width: 65rem;
    padding: 0px;
   }
   
   
   
   .nav_subitems {
    position: absolute;
    left: 0;
    top: 15px;
    width: 180px;
    background: rgba(0, 0, 0, 0);
    text-decoration: none;
    list-style: none;
    padding: 32px 0px 10px;
    display: none;
  }
  
  .nav_subitems.open {
    display: block;
  }
  
  .nav__items.active {
    color: var(--orange-sun-color);
    transition: 0.3s ease-in;
  }
  
  .nav__items ul li {
    font-size: 1.6rem;
    color: var(--black-color);
    white-space: wrap;
    width: 100%;
    padding: 5px;
    border: 1px solid rgb(0, 0, 0, 0.2);
    background: var(--orange-sun-color);
  }
  
  .nav__items ul li a {
    display: block;
    width: 100%;
    cursor: pointer;
    transition: 0.2s;
  }
  
  .nav__items ul li a:hover {
    color: var(--white-color);
    transition: 0.3s;
  }
  
  .hidden {
    display: none;
  }
  
   .nav__items ul li ul{
    left:180px;
    top: 0;
   }
   .nav__items ul li:hover > ul{
    display: inline;
   }
   .nav__list{
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    list-style-type:none;
    padding: 0px;
    height: 70px;
    width: calc(90vw/2 - 27px);
    margin: 0px;
   }
   .nav__items{
    position: relative;
    font-family: "Roboto",sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color:var(--white-color);
    margin: 2rem;
   }
   
   .header__social{
    display: flex;
    flex-direction: row;
    gap:0.4rem;
    height: 50px;
   }
   
   .nav__links {
    cursor: pointer;
  }
  /* .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20rem;
}

.pagination a {
    margin: 0 5px;
    text-decoration: none;
    color: #333;
}

.pagination a:hover {
  text-decoration: underline;
} */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

 .pagination a {
  color: black;
  padding: 15px;
  text-decoration: none;
  transition: background-color 0.3s;
  border-radius: 10px;
  font-size: 18px;
  margin-right: 1rem;
  background-color: #ffffff9d;
  box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
              -7px -7px 20px rgba(255, 255, 255, 0.3),
              inset 0px 0px 4px rgba(255, 255, 255, 0),
              inset 7px 7px 15px rgba(55, 84, 170, .15),
              inset -7px -7px 20px rgba(255, 255, 255, 0.3),
              0px 0px 4px rgba(255, 255, 255, .2);
  transition: box-shadow .25s ease;

}

.pagination a:hover:active {
  background-color: var(--grey-color);
  color: white;
}

.pagination a:hover {
  background-color: rgb(179, 88, 35);
  box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
                  -7px -7px 20px rgba(100, 98, 89, 0.1),
                  inset 0px 0px 4px rgba(255, 255, 255, .2),
                  inset 7px 7px 15px rgba(55, 84, 170, 0),
                  inset -7px -7px 20px rgba(255, 255, 255, 0),
                  0px 0px 4px rgba(255, 255, 255, 0)
}



   .facebook{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    padding:5px ;
    background:var( --grey-color);
   }
   .facebook a{
    width: 50px;
    height: 50px;
   }
   .facebook svg{
    padding: 10px;
    width: 50px;
    height: 50px;
   }
   .facebook:hover{
    background:var(--orange-color);
    transition: 1s;
   }
   .facebook:hover svg path{
    fill:var(--white-color);
    transition: 1s;
   }
   .instagram{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    padding:5px ;
    background:var( --grey-color);
   }
   .instagram:hover{
    fill:var(--white-color);
    background:var(--orange-color);
    transition: 1s ease-out;
   }
   .instagram:hover svg path{
    stroke:var(--white-color);
    transition: 1s ease-out;
   }
   .instagram a{
    width: 60px;
    height: 50px;
   }
   .instagram svg{
    padding: 10px;
    width: 50px;
    height: 50px;
   }
   
   .google{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    border-radius: 100px;
    background:var( --grey-color);
   }
   .google a{
    width: 50px;
    height: 50px;
   }
   .google svg{
    padding: 5px;
    width: 50px;
    height: 50px;
   }
   .google:hover{
    background:var(--orange-color);
    transition: 1s;
   }
   .google:hover svg path{
    stroke: var(--white-color);
    transition: 1s;
   }
   
   
   
   .header_phone-num{
    display: flex;
    position: relative;
    align-items: center;
    max-width: 16rem;
    padding: 2rem 4rem;
    height: 40px;
    border-radius: 20px;
    background-color:var(--orange-sun-color);
   }
   .header_phone-num a::before{
    display: flex;
    content: '';
    position: absolute;
    justify-content: center;
    align-items: center;
    left:0;
    top:0;
    bottom: 0;
    width: 100%;
    height: 100%;
   }
   .header__title-phone{
    white-space: nowrap;
    font-family: "Roboto",sans-serif;
    font-style: "normal";
    font-weight: 500;
    font-size: 1.5rem;
    color:var(--black-color) ;
    margin: 0px auto;
    padding: 0px;
    text-align: center;
   }
   .header_phone-num:hover{
    background-color:var(--white-color);
    transition: 1s ease;
   }
   
  .wrap.under{
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .header__under{
    display:flex;
    max-width:100vw;
    justify-content: center;
    align-items: center;
    margin: 10rem 0rem;
  
   }
   .header-title__box{
    display: flex;
    flex-direction: column;
    max-width: 125rem;
    align-items: center;
    justify-content: center;
   }
   .header-title__holder{
    max-width: 100vw;
   }
   .header__title{
    font-family: "Roboto",sans-serif;
    font-weight: 700;
    color:var(--white-color);
    max-width:100vw;
    text-align:center;
   }
    /*header end*/
    .blog__section{
      padding: 5rem 0rem;
      background-color: var(--grey-color);
    }
    h2{
      text-align: center;
      font-family: "Roboto",sans-serif;
      font-weight: 700;
      font-size: 4.2rem;
      margin:0rem 0rem 5rem;
    }
    .post__inform h3 {
      font-family: "Roboto", sans-serif;
      font-weight: 600;
      font-size: 2rem;
      line-height: 37px;
      margin: 0rem;
      color: #1e1e1e;
      text-transform: capitalize;
      letter-spacing: 0;
      text-align: start;
    }
    .blog__items{
      max-width: 120rem;
      background-color: var(--white-color);
    }
    
    
    
    
    .post-container{
      display: flex;
      flex-direction: row;
      margin-bottom: 3.2rem;
      box-shadow: 9px 19px 74px 25px rgba(57, 55, 55, 1);

    }
    .blog__items{
      border-radius: 25px 25px 0px 0px ;
    }
    
    .post__picture{
      flex: 1;
      max-width:100%;
    }
    .post__picture img{
      max-width: 40rem;
      max-height: 20rem;
      margin:1rem 0rem 0rem 1rem;
      filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    }
    .post__inform{
      font-family: "Roboto",sans-serif;
      flex: 2;
      padding: 0rem 2.3rem 2.3rem 2.3rem;
    }

    .post__inform h2{
      font-family: "Roboto",sans-serif;
      font-weight: 600;
      font-size: 2rem;
      line-height: 37px;
      margin: 0rem;
      color: #1e1e1e;
      text-transform: capitalize;
      letter-spacing: 0;
      text-align: start;
    }
    .post__inform p{
      margin-top: 0rem;
    }
    .posted-info{
      display: flex;
      flex-direction: row;
      font-family: "Roboto",sans-serif;
      font-weight: 500;
      font-size: 1.6rem;
    }
    
    .posted{
      color:firebrick;
      margin: 0rem 1rem 1.8rem 0rem;
    }
    time{
      color:darkgreen;
    }
    .post__inform p{
      font-family: "Roboto",sans-serif;
      font-size: 16px;
      line-height: 26px;
      font-style: normal;
      font-weight: 300;
    }
  
    .item-link{
      display: flex;
      position: relative;
      content: '';
      border-radius:45px;
      color: var(--orange-sun-color);
      border: none;
      line-height: 40px;
      width: fit-content;
      height: 40px;
      background: var(--orange-sun-color);
      white-space: nowrap;
      transform: scale(1);
      box-shadow: 9px 19px 21px  var(--grey-color);

    }
    
    .link-text{
      color:var(--white-color);
      font-size: 12px;
      text-shadow:1px 1px 0px #1e1e1e ;
      text-transform: capitalize;
      width: 100%;
      padding-left: 30px;
      padding-right: 30px;
    }
    
    .link-text a::before{
      display: flex;
      content: '';
      position: absolute;
      justify-content: center;
      align-items: center;
      left:0;
      top:0;
      bottom: 0;
      width: 100%;
      height: 100%;
     }
    
     .item-link:hover{
      box-shadow: 9px 19px 21px rgba(14, 14, 14, 0.8);
      transform: scale(1.1);

    }
    .link-text:hover{
      transform: scale(1.1);

    }
    .button-container{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 5rem;
    }
     button#btn-left,button#btn-right{
      font-size: 30px;
      width: 30px;
      height: 40px;
      margin: 0rem 2rem;
      border-radius: 10px;
      border: none;
      cursor: pointer;
    }
     button#btn-left:active,button#btn-right:active{
      color: var(--orange-sun-color);
      box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
              -7px -7px 20px rgba(255, 255, 255, 0.3),
              inset 0px 0px 4px rgba(255, 255, 255, 0),
              inset 7px 7px 15px rgba(55, 84, 170, .15),
              inset -7px -7px 20px rgba(255, 255, 255, 0.3),
              0px 0px 4px rgba(255, 255, 255, .2) !important;
    }
    
    .btn:focus {
      outline:none !important;
    }
    .btn-pagination{
      font-family: "Roboto",sans-serif;
      font-size: 20px;
      border: none;
      padding: 10px 30px;
      border-radius: 40px;
      color:#6D7587;
      background-color: #EBECF0;
      margin: 0rem 0.5rem;
      /*box-shadow: 3px 4px 6px 1px rgba(0, 0, 0, 0.3), 
                  -2px -2px 4px 2px rgba(255, 255, 255, 1), 
                  inset -14px -14px 20px -10px rgba(0, 0, 0, 0.1),
                  inset 14px 14px 20px -10px rgba(255, 255, 255, 0.5) !important;  */
      box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
                  -7px -7px 20px rgba(100, 98, 89, 0.1),
                  inset 0px 0px 4px rgba(255, 255, 255, .2),
                  inset 7px 7px 15px rgba(55, 84, 170, 0),
                  inset -7px -7px 20px rgba(255, 255, 255, 0),
                  0px 0px 4px rgba(255, 255, 255, 0) !important;
      transition: box-shadow .25s ease !important;
      cursor: pointer;
    }
    .btn-pagination:active{
      color: var(--orange-sun-color);
      box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
              -7px -7px 20px rgba(255, 255, 255, 0.3),
              inset 0px 0px 4px rgba(255, 255, 255, 0),
              inset 7px 7px 15px rgba(55, 84, 170, .15),
              inset -7px -7px 20px rgba(255, 255, 255, 0.3),
              0px 0px 4px rgba(255, 255, 255, .2) !important;
    }
    
    
    
    
    /*start footer*/
.footer {
    background: linear-gradient(to right, rgba(57, 55, 55, 1), rgba(14, 14, 14, 0.8));
  }
  
  .upper-footer {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 2rem;
    justify-content: space-between;
  }
  
  .down-logo {
    margin-right: 1rem;
  }
  
  .inform-footer {
    display: flex;
    flex-direction: row;
    justify-content: end;
    width: 70%;
    gap: 10rem;
    padding-right: 2rem;
  }
  
  .contact-footer {
    display: flex;
    flex-direction: column;
    justify-content: start;  
  }
  
  .contact-footer__details {
    display: inline;
  }
  
  .contact__details-text {
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    color: var(--orange-sun-color);
    margin: 2rem 0rem 1rem;
  }
  
  .footer-info {
  
    font-family: "Roboto", sans-serif;
    color: var(--white-color);
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
    padding: 0px;
  }
  
  .footer-info p {
    font-family: "Roboto", sans-serif;
    color: var(--white-color);
  }
  
  .contact-address.footer-address {
    display: flex;
    position: relative;
    flex-direction: row;
    white-space: nowrap;
    gap: 0.5rem;
    align-items: center;
    max-width: fit-content;
    justify-content: center;
    font-family: "Roboto", sans-serif;
    color: var(--white-color);
    font-size: 1.6rem;}
  
    
  .contact-address.footer-address::after{
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    bottom: 10px;
    background-color: var(--orange-color);
    content: '';
    transition: width 1s;
    transform: translateX(-50%);
  }
  
  .contact-address.footer-address:hover::after{
    margin-bottom: 0px;
    width: 100%;
  }
  
  .contact-address.footer-address a::before{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;  
  }
  
  .address-text {
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
  }
  
  .phone-number.footer-info{
    max-width: fit-content;
  }
  .email__container.footer-info{
    max-width: fit-content;
  }
  .phone-number.footer-info::after,
  .email__container.footer-info::after {
    bottom: -4px;
  }
  
  .social-footer__text {
    font-family: "Roboto", sans-serif;
    color: var(--orange-sun-color);
    font-size: 2rem;
    margin: 2rem 0rem 1rem;
    padding: 0px;
  }
  
  .social-footer__container {
    display: flex;
    gap: 1rem
  }
  
  .social-footer .facebook,
  .social-footer .instagram,
  .social-footer .google {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
  }
  
  .down-footer {
    padding-bottom: 1rem;
  }
  
  .down-footer hr {
    box-sizing: border-box;
    width: 100%;
    margin-right: 0px;
  }
  
  .rights-img {
    font-family: "Roboto", sans-serif;
    color: var(--white-color);
    font-size: var(--small-font);
    margin-bottom: 0px;
  }
  
  /*end footer*/
  
  
   /*media */
   @media screen and (max-width:2200px ){
    .services_items{
      max-width: 35rem;
    }
    .instagram{
      margin-right: 2rem;
    }
  }
  @media screen and (max-width:960px ){
    h1{
      font-size: 5rem;
    }
    h2{
      font-size: 3.6rem;
    }
    .blog-title{
      font-size: 3.6rem;
    }
    .info__container{
      font-size: 1rem;
    }
    .inform-footer {
      flex-direction: column;
      gap: 1rem;
    }
    .burger {
      display: flex;
      cursor: pointer;
      margin-right: 1rem;
    }
  
    .navigation {
      position: absolute;
      left: -250px;
      top: 40px;
      width: 250px;
      background-color: rgba(44, 43, 42, 0.995);
      transition: transform .5s;
      height: 100vh;
      overflow-y: auto;
      z-index: 1;
    }
  
    .nav__list {
      flex-direction: column;
      width: max-content;
      height: max-content;
      padding: 70px 20px 20px 20px;
      top: 0px;
      position: absolute;
    }
  
    .nav__items {
      flex-direction: column;
      max-width: 50rem;
      font-size: 2.2rem;
      margin: 0px;
      padding: 20px 20px 20px 30px;
      border-bottom: 1px solid rgba(242, 239, 236, 0.365);
      transition: 0.3s ease-in;
    }
    .nav__items.open ul {
      display: flex;
      flex-direction: column;
      width: 25rem;
      height: 25rem;
    }
  
    .nav__items ul {
      position: absolute;
      overflow: hidden;
      left: 0;
      top: 33px;
      width: 175px;
      background: rgba(0, 0, 0, 0);
      text-decoration: none;
      list-style: none;
      z-index: 0;
    }
  
    .nav__items ul li {
      font-size: 1.7rem;
      color: var(--black-color);
      width: 100%;
      padding: 5px;
      border: 1px solid rgb(0, 0, 0, 0.2);
      background: var(--orange-sun-color);
      white-space: pre-line;
    }
  
    .nav__items ul li a {
      flex-wrap: wrap;
      min-height: 30px;
      width: 100%;
      cursor: pointer;
      transition: 0.2s;
      align-items: center;
    }
    
    .nav__items a {
      flex-wrap: wrap;
    }
    
    .nav__items.open {
      display: flex;
      justify-content: space-between;
    }
  
  
  
    .nav__items ul li ul {
      left: 180px;
      top: 0;
    }
  
    .burger-wrapper.open .navigation {
      transform: translateX(100%);
    }
  
    .contact-text,
    .title__service_title {
      font-size: 3.8rem;
    }
  
    body.noscroll {
      overflow: hidden;
      background: linear-gradient( rgba(255, 255, 255, 1), rgba(0, 0, 0, 1)); 
     }
  
    .nav__items.active {
      color: var(--orange-sun-color);
      margin-bottom: 18rem;
      border-bottom: 1px solid var(--white-color);
      transition: 0.3s ease-in;
      align-items: center;
    }
  
    .nav__items.active:nth-child(2) {
      margin-bottom: 16rem;
      border-bottom: 1px solid var(--white-color);
    }
  
    .nav__items.active:nth-child(3),
    .nav__items.active:nth-child(4) {
      margin-bottom: 0rem;
      border-bottom: 1px solid var(--white-color);
  
    }
  
    .nav__items:last-child {
      margin-bottom: 10rem;
    }
    
    
    .pagination a{
      margin-right: 0.7rem;
    }
    
    .post-container{
      flex-direction: column;
    }
    .post__inform{
      margin-top: 2rem;
    }
    
    .post__picture img{
      max-width: calc(100% - 20px);
      max-height: 342px;
    }
  }
  
  @media screen and (max-width:767px) {
    :root {
      --medium-font-calc: 2.2rem;
    }
  
    h1 {
      font-size: 4.2rem;
    }
    
    h2 {
      font-size: 2.5rem;
    }
    
    .blog-title {
      font-size: 3rem;
    }
    .info__container .phone-number {
      display: none;
    }
  
    .review {
      display: none;
    }
  
    .email__container {
      white-space: nowrap;
    }
  
    .email-text {
      max-width: inherit;
    }
  
    .schedule-time {
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      max-width: min-content;
      align-items: center;
    }
  
    .instagram {
      margin-right: 0px;
    }
  
    .header__social {
      display: none;
    }
    
    .inform-footer {
      margin: 0 auto;
    }
    
    .header__nav {
      margin-right: 0px;
    }
    .pagination a{
      margin-right: 0.5rem;
    }
    .logo-container.down-logo {
      justify-content: center;
      margin-left: 0rem;
    }
  
    .logo-img {
      width: 170px;
      height: 50px;
    }
    
    .header__under {
      margin: 8rem 0rem;
    }
        
    .upper-footer {
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin: 0 auto;
      padding: 0px;
    }
  
    .down-logo {
      margin-top: 2rem;
      margin-right: 0px;
    }
      
    .inform-footer {
      width: 100%;
      padding: 0px;
    }
    .contact-footer {
      justify-content: center;
      align-items: center;
    }
    .contact__details-text {
      text-align: center;
    }
  
    .contact-address {
      justify-content: center;
      flex-wrap: wrap;
    }
  
    .contact-address p {
      text-align: center;
      font-size: 1.4rem;
      white-space: wrap;
    }
  
    .footer-info {
      justify-content: center;
    }
    .phone-number_text{
      font-size: 1.4rem;
    }
    .email__container.footer-info {
      justify-content: center;
      font-size: 1.4rem;
    }
  
    .social-footer__caption {
      text-align: center;
  
    }
    .social-footer__text {
      margin: 1rem 0rem 1rem;
    }
    .social-footer__container {
      justify-content: center;
    }   
    .rights-img{
      text-align: center;
    }
    
    .post__picture img{
      max-width: calc(100% - 20px);
      max-height: 30rem;
    }
    
  }
  
  @media screen and (max-width:464px) {
    .schedule-time {
      flex-wrap: wrap;
    }
    .header__view{
      margin: 1.2rem 0rem 1rem 0rem;
    }
    .header__under{
      margin: 6rem 0rem;
    }
    .nav__items.active {
      margin-bottom: 17rem;
    }
    .logo-container.down-logo {
      height: auto;
    }
    .post__picture img{
      max-width: calc(100% - 20px);
      max-height: 20rem;
    }
    
    
  }
  
  
  @media screen and (max-width:382px) {
    :root {
      --medium-font-calc: 2.2rem;
    }
  
    h1 {
      font-size: 3.6rem;
    }
  
    h2 {
      font-size: 1.8rem;
    }
    .blog-title {
      font-size: 2.8rem;
    }
    .contact-address p{
      font-size: 1.4rem;
      margin-top: 0.5rem;
    }
    .phone-number_text{
      font-size: 1.4rem;
  
    }
    .email-text {
      white-space: wrap;
      text-align: center;
    }
  
    .schedule {
      max-width: min-content;
    }
  
    .header__view {
      margin-top: 0.2rem;
    }
    .header-title__holder {
        max-width: 100%;
    }
    .info__container {
      font-size: 0.8rem;
    }
  
    .logo-container {
      max-width: 15rem;
    }
    .header__logo {
      max-width: 13rem;
    }
  
    .logo-img {
      width: 125px;
      height: 40px;
    }
  
    .header_phone-num {
      padding: 2rem;
    }
    .email__container.footer-info p{
      white-space: wrap;
      text-align: center;
      font-size: 1.4rem;
    }
    .btn-pagination {
      font-size: 12px;
      padding: 1rem 2.5rem;
      margin-right: 0rem 0.5rem 0rem 0.5rem;
    }
    
    button#btn-left, button#btn-right {
      margin: 0rem;
      padding: 0rem;
    }
  }
  
  
  @media screen and (max-width:349px) {
    :root {
      --medium-font-calc: 1.9rem;
    }
  
    .info__wrap {
      width: 100%;
    }
  
    .email__container {
      flex-wrap: nowrap;
      max-width: min-content;
    }
  
    .email__container.footer-info {
      flex-wrap: wrap;
      max-width: min-content;
    }
  
    .email__container.footer-info {
      justify-content: center;
      max-width: none;
      margin: 0 auto;
    }
    .header__under{
        margin: 5rem 0rem;
    }
    .post__picture img{
      max-width: calc(100% - 2rem);
      max-height: 20rem;
    }
  }
  
  @media screen and (max-width: 320px) {
    h1 {
      font-size: 3.5rem;
    }
    .blog-title {
      font-size: 2.6rem;
    }
    .logo-container {
      margin-right: 0rem;
    }
    .btn-pagination {
      padding: 1rem 1.5rem;
    }
  }
  
  @media screen and (max-width:298px) {
    .header_phone-num {
      padding: 1.5rem;
    }
  }
    
  @media screen and (max-width:280px) {
    :root {
      --medium-font-calc: 1.8rem;
    }
  
    .info__container {
      flex-wrap: wrap;
    }
  
    .header__view {
      flex-wrap: wrap;
    }
  
    .header_phone-num {
      padding: 1rem;
    }
  }