@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

:root {
  --white: #ffffff;
  --purple: rgb(31, 20, 82);
  --blue: rgba(4, 217, 255, 0.846);
}

body{
    direction: ltr;
    font-family: 'Pridi', sans-serif !important;
    font-size: 20px;
    margin: 0;
    padding: 0px;
}

ul {
  padding-left: 0;
  padding-right: 0;
}
a {
    text-decoration: none;
    color:  black;
}
a:hover {
  color: rgba(15, 15, 15, 0.646);
}
h2 {
  color: var(--purple);
  text-transform: uppercase;
}
h3 {
  color: grey;
  font-size: 18px;
}

.container {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}
.padding-style {
    padding: 73px 0;
}

.section-container-head {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(rgba(31, 20, 82, 0.84) 0%, rgb(31 20 85 / 83%) 100%),   url('photo/thumbnails_header_69f110de899d08.17692358.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  
.navbar-container{
    display: flex; 
    align-items: center;
    padding: 0;
   }
.header-logo{
  flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 25px;
  }
.header-logo img{
    height: 50px;
} 
.headline {
  background-image: linear-gradient(to right, #007bff, #00bcd4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; 
  font-size: 36px;
}
.head-title-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.head-title {
display: flex;
flex: 1;
}
.head-title p{
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 5px;
  margin: 20px;
  
}
.head-phone-btn {
display: flex;
flex: 1;
justify-content: center;
padding: 25px;
margin: 20px;
}
                      
.hero-button {
  white-space: normal;
  width: 100%;
  margin: 0 12px;
}

.nav-link{
  color: white;
}
.nav-link:hover{
    color: rgb(4, 217, 255);
    transform: scale(1.1); 
    transition: transform 0.3s ease; 
    }
    .navbar-wrap {
      display: flex; 
      flex-direction: column;
      align-items: center;
      justify-content: space-between;    
      flex-wrap: wrap; 
      padding: 20px;
     }

     .navbar-wrap .nav-link {
      text-decoration: none;
      padding: 5px;
      margin: 0 12px; 
      display: flex; 
      align-items: center;
      color: var(--white);
      transition: text-decoration 0.6s ease-out;
  }
  .navbar-wrap .nav-link:hover{
      color: var(--blue);
      transform: scale(1.1); 
      transition: transform 0.3s ease; 
      }
  .nav-list {
      display: flex;
      align-items: center;
      padding: 0;
      margin: 0;
      list-style: none;
  }
  .dropdown-menu{
    width: 270px;
  }
  .dropdown-menu.show{
    left: -90px;
  }
  .drop-link {
    display: block;
    width: 100%;
  }
  .drop-link:hover{
    color: var(--blue);
  }
  .dropdown-item{
    color-scheme: var(--white);
    white-space: normal;
  }
  
  .dropdown-item:hover {
  
    background-color: var(--purple);
  }

.section-service {
  background-color:  rgba(31, 20, 82, 0.317);
}
    
.service-section-container,
.articles-section-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 25px;
  }
  .service-title-span,
  .articles-title-span {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
  
    .service-box{
      display: flex;
      flex-direction: column;
      gap: 25px;
    }
    .service-title {
      display: flex;
      align-items: center; 
      margin: 25px 7px;
      position: relative;
      flex: 1;
      justify-content: center;
      text-align: center;
      color: var(--blue);
      font-size: 20px;
      text-transform: uppercase;
    }
    .service-title:hover {
      background-image: linear-gradient(to right, #007bff, #00bcd4);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .service-text {
      margin: 20px;
      padding: 12px;
      text-align: left;
    }
    .service-items,
    .articles-items {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .service-items .service-item{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content:  space-between;
      color: white;
      margin: 20px;
      transition: transform 0.5s ease;
      flex: 1;
      gap: 22px;
       }
   
    .articles-items .articles-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:  space-between;
    color: white;
    margin: 22px;
    transition: transform 0.5s ease; 
    flex: 1;
    gap: 22px;
    }
    
    .service-item-rev {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 40px;
      background-color: rgba(31, 20, 82, 0.553);
      box-shadow: rgba(0, 0, 0, 0.19) 0px 12px 22px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }
    .service-item svg {
    margin: 0 0 0 25px;
    }
    .service-img {
    width: 250px;
    height: 250px;
    border-radius: 120px;
    border: 1px solid white;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 5px 0px inset;
    object-fit: cover;
    margin: 12px;
    }
   
    .service-title-item {
      width: 100%;
      border-bottom: 1px solid white;
    }
    .articles-title-pop {
      margin-bottom: 22px;
    }
    .articles-items .articles-item {
      background-color: #9ca6a62b;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
    }
    .articles-box {
      display: flex;
      flex-direction: row;
      gap: 22px;
    }
    .articles-item {
      padding-bottom: 22px;
    }
    .articles-item h3{
      border: 1px solid #8080806e;
      margin: 12px;
      width: 100%;
      background-image: linear-gradient(to right, #007bff, #00bcd4);
    }
    
    .articles-img{
      width: 250px;
      height: 250px;
      margin: 20px;
      object-fit: cover;
      box-shadow: rgba(9, 30, 66, 0.25) 0px 5px 8px -1px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    }
    .articles-title {
      display: flex;
      align-items: center; 
      margin: 22px 12px;
      position: relative;
      flex: 1;
      justify-content: center;
      text-align: center;
      color: var(--purple);
      font-size:  22px;
      text-transform: uppercase;
    }
    .articles-title:hover {
      color: rgba(255, 255, 255, 0.792);
    }
   
   
    .articles-text {
      padding: 12px;
      text-align: center;
      color: grey;
    width: 100%;
    }
  
    .service-items .service-item:hover{
      transform: scale(1.1);
    }
    .button-service {
      margin: 20px;
      display: flex;
    align-items: center;
    }
    .button-service svg {
      color: var(--white);
    }
    
    .gallery-title span {
      display: flex;
      width: 80px;
      height: 1px;
      background-color: var(--white);
       }
       .gallery-container {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
         overflow: hidden;
       }
       .gallery-title{
         display: flex;
         flex-direction: column;
         align-items: center;
       }
     .gallery-text {
         display: flex;
         align-items: center;
         margin: 25px;
         justify-content: center;
         align-content: center;
         color: var(--purple);
     }
       .gallery-items {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
         margin-top: 25px;
       }
       .gallery-items a {
         width: 250px;
         height: 200px;
         overflow: hidden;
       }
       .gallery-items a img {
      width: 100%;
      height: 100%;
      object-fit: cover;
     }
     .gallery-items a img:hover{
      filter: blur(5px);
     }
     
     .lg-outer .lg-img-wrap{
      background-color: #38188470;
     }
     .main-contaier{
      overflow: hidden;
     }
     .main-flex {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;

     }
     .main-content {
      padding: 40px;
      text-align: left;
     }
     .main-img {
      width: 100%;
      height: 481px;
      object-fit: contain;
     }
    .main-imag {
      display: flex;
      align-items: center;
      justify-content: center;
    }
     .container-price{
      display: flex;
     }
     .price {
      background-color: #8080803d;
      width: 100%;
      padding: 22px;
      color: var(--purple);
  }
     .our-worker {
      background: linear-gradient(rgb(31 20 82 / 84%) 0%, rgb(31 20 85 / 83%) 100%),  url('photo/photos_header_69f110de899e63.40022547.jpg');
      background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
     }
     .our-worker-title-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 22px;
    }
    .our-worker-title {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      text-align: center;
      color: white;
    }
    .our-worker-items {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      flex-direction: row;
      overflow: hidden;
    }
   
    .our-worker-item{
      margin: 12px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .worker-avatar {
      width: 250px;
      height: 250px;
      transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .shadow:hover {
      box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
                  0 0  0 1px rgb(190, 190, 190),
                  0.3em 0.3em 1em rgba(0,0,0,0.3);
     }
    .our-worker-item img {
   width: 250px;
   height: 250px;
   object-fit: cover;
    }

    .our-worker-item img:hover {
      filter: none;
    }
    .worker-title {
      width: 250px;
      text-align: center;
      padding: 12px;
      background-color: inherit;
      border: 0.5px solid rgba(255, 255, 255, 0.817);
    }
    .worker-title:hover{
      box-shadow: rgba(183, 180, 176, 0.807) 0px 2px 8px;}
 
  .worker-title p{
    margin: 12px;
    color: rgba(255, 255, 255, 0.817);
    text-transform: uppercase;
  }
  .worker-title-name{
    font-size: 18px;
    color:  white;
    text-transform: uppercase;
  }
  .worker-title-job{
    font-size: 13px;
    color: rgba(128, 128, 128, 0.832);
  }
  .container-reviews {
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .reviews {
    display: flex;
    align-items: center; 
    min-width: 0;
    background: linear-gradient(rgb(31 20 82 / 84%) 0%, rgb(31 20 85 / 83%) 100%), url(photo/visuals_header_69f110de899ec8.39583953.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
   }

  .content {
    margin: auto;
    padding: 25px;
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;

    display: flex;
    visibility: visible;
    animation-name: zoomIn;
    flex-direction: row;
    align-content: center;
    align-items: center;
  }
.slider {
  direction: initial;
}
  .slick-prev:before, .slick-next:before  {
    color: inherit;
  }
  .slick-dots li.slick-active button:before{
    color: inherit;
  }
  .slick-track {
    display: flex;
    align-items: center;

    transform: translate3d(0px, 0px, 0px);

  }
  .single-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;

  }

  .prev-slide-btn {
    border: none;
    background-color: inherit;
    color: white;
    direction: initial;
  }
  .next-slide-btn {
    border: none;
    background-color: inherit;
    color: white;
    direction: initial;
  }
  .prev-slide-btn:hover ,
  .next-slide-btn:hover{
   
    color: rgba(74, 116, 193, 0.891); 
  }
  .card {
    display: flex;
    flex-direction: column;
    align-items: center; 
    position: relative;
    background-color: inherit;
    padding: 25px;
    margin: 35px 0px;
    max-width: 700px;
    border: 1px solid rgba(167, 164, 164, 0.639);
    transition: transform 0.8s ease-in-out;
    opacity: 1;
     border: none;
    direction: initial;  
  }

  .card.active {
    display: flex;
    }
   .card.hidden {
    transform: translateX(-100%);
    opacity: 0;
   }
   .hidden {
    position: absolute;
   }
 
  
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
   
    grid-gap: 1rem;
    gap: 1rem;
  }
 
  .reviews-img {
    border-radius: 99px;
    width: 150px;
    height: 150px;
  }
  
  .stars {
    display: flex;
    justify-content: center;
    grid-gap: 0.125rem;
    gap: 0.125rem;
    color: var(--blue);
  }
  
  .stars svg {
    height: 1rem;
    width: 1rem;
  }
  .card-svg svg {
    color: var(--white);
  }
  .name {
    margin: 20px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: var(--white);
    text-align: center;
    text-transform: uppercase;
  }
  .message {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-top: 1rem;
    color: var(--white);
    text-align: center;
    font-size: 20px;
  }

.form-container{
  display: flex;
  flex-direction: column;
  align-items: center; 
  min-width: 0;
}
.container-form {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 22px;
}
  
.form-write-us {
  color: var(--purple);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  display: block;
  font-weight: 900;
  font-size: 23px;
}
.form-write-us:hover{
  color: var(--blue);
}


.contacts-maps {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 25px 0;
  padding: 12px;
  width: 100%;
}


.contact-form {
  background-color: #f2f2f2;
  padding: 22px;
  margin: 12px;
  border-radius: 12px;
}

.contact-form label {
  color: black;
}

.contact-form .heading {
  font-size: 23px;
  color: black;
  margin-bottom: 11px;
  font-weight: 900;
  display: block;
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  margin-bottom: 12px;
}

textarea {
  resize: none;
  height: 80px;
}

.contact-form input, .contact-form textarea {
  padding: 12px;
  margin: 5px 22px;
  border: none;
  margin-bottom: 22px;
}

.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  box-shadow: 0 0 5px var(--blue);
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

.footer-contact{
  list-style: none;
}


.footer-contacts-items{
  list-style: none;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
}
.footer-contacts-items svg {
margin: 12px;
padding-left: 0;
text-align: center;
color: var(--white);
}
.footer-contacts-items svg:hover {
  color: var(--blue);
}
.footer-contacts-items a{
  color: white !important;
}
.footer-contacts {
  padding: 50px 0;
}
.footer-contact a{
  color: var(--purple);
  font-size: 21px;
}

.footer-contacts,
.footer-contact,
.footer-maps {
  flex: 1;
 width: 100%;
 text-align: center;
}
.footer-contact-section {
  display: flex;
  flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 100px 22px;
    background: linear-gradient(rgb(31 20 82 / 84%) 0%, rgb(31 20 85 / 83%) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.nav-list-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: none;
}

.nav-link-menu {
  font-size: 18px;
  color: white;
}
.footer-logo{
  display: flex;
    align-items: center;
    flex-direction: column;
}
.footer-logo-title{
  padding: 25px 0;
}


.footer-logo-item,
.footer-menu-item {
  display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.footer-size {
  font-size: 21px;
}
.section-privacy {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 22px 0;
}
.footer-rights{
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 2;
}
.footer-privacy {
  color: white;
}
.footer-privacy:hover {
  color: var(--blue);
}
.footer-privacy-rev {
  display: flex;
  flex-direction: column;
}
.navbar-wrap .nav-link-footer {
  text-decoration: none;
  text-align: center;
  padding: 5px;
  margin: 0 12px;
  text-transform: uppercase;
  display: flex;
  color: white;
  transition: text-decoration 0.6s ease-out;
}
.navbar-wrap .nav-link-footer:hover{
  color: var(--blue);
  transform: scale(1.1); 
  transition: transform 0.3s ease; 
  }
.nav-link-menu:hover {
  color: var(--blue);
}



@media screen and (min-width: 480px) {
    .container {
      max-width: 480px;
    }
  }
  @media screen and (min-width: 768px) {
    .container {
      max-width: 768px;
    }
  }
  @media screen and (min-width: 1200px) {
    .container {
      max-width: 1200px;
    }
  }


  @media (max-width: 1199px) {
    .navbar> .container {
      display: flex;
      flex-wrap: inherit;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .navbar-container {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }
    .header-logo {
      display: flex;
      align-items: center;
      margin: 12px;
      padding: 20px;
      text-align: center;
    }
    .head-title-phone {
      flex-direction: column!important;
    }
      .head-title {
        flex-direction: column !important;
        margin-bottom: 22px;
      }
      .service-section-container {
        flex-direction: column !important;
      }
      .service-items{
        justify-content: center !important;
      }
      .service-box,
      .articles-box {
        flex-direction: column !important;
      }
       .gallery-items a {
        width: 300px;
        height: 250px;
      }
       .container-reviews {
        flex-direction: column !important;
       }
       .footer-contact-section {
        flex-direction: column !important;
      }
      .footer-contacts-items {
        align-items: center !important;
      }
    }
    
  @media (max-width: 768px) {
   
     .contacts-maps {
      flex-direction: column !important;
     }
     .nav-list {
      display: flex;
      flex-direction: column;
      margin-bottom: auto;
      align-items: center;
      }
      .service-items .service-item {
        flex-direction: column !important;
      }
    }

  @media (max-width: 567px) {
.next-slide-btn svg,
.prev-slide-btn svg {
  display: none;
}
.content-block h1 {
  font-size: 20px;
}
  }

  @media (max-width: 420px) {
.navbar>.container{
   justify-content: center; 
}
.nav-list {
    flex-direction: column;
}
  }

  .button-1 {
    color: rgb(233, 184, 233);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgb(240, 175, 240);
    padding: 12px 22px;
    font-size: 18px;
    font-weight: 900;
    background: transparent;
    position: relative;
    transition: all 1s;
    overflow: hidden;
  }
  
  .button-1:hover {
    color: white;
  }
  
  .button-1::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    top: 0;
    left: -40px;
    transform: skewX(45deg);
    background-color: rgb(208, 147, 208);
    z-index: -1;
    transition: all 1s;
  }
  
  .button-1:hover::before {
    width: 160%;
  }
  
  .button-2 {
    --😀: #644dff;
    --😀😀: #4836bb;
    --😀😀😀: #654dff63;
    cursor: pointer;
    width: fit-content;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size:  18px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #fff;
    background: var(--😀);
    border: 1px solid var(--😀😀);
    border-radius: .75rem;
    box-shadow: 0 8px 0 var(--😀😀);
    transform: skew(-10deg);
    transition: all .1s ease;
    filter: drop-shadow(0 15px 22px var(--😀😀😀));
  }
  
  .button-2:active {
    letter-spacing: 0px;
    transform: skew(-10deg) translateY(8px);
    box-shadow: 0 0 0 var(--😀😀😀);
  }
  
  .button-3 {
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsla(194 100% 69% / 1);
    --btn-bg-2: hsla(217 100% 56% / 1);
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;
    padding: 22px 25px;
    min-width: 120px;
    min-height: 44px;
    font-size: var(--size, 1rem);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow: 0px 0px 22px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 5px 5px 8px rgba(175, 230, 255, 0.5), inset -5px -5px 8px rgba(19, 95, 216, 0.35);
  }
  
  .button-3:hover {
    background-position: right top;
  }
  
  .button-3:is(:focus, :focus-visible, :active) {
    outline: none;
    box-shadow: 0 0 0 2px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .button-3 {
      transition: linear;
    }
  }
  
  .button-4 {
    color: #090909;
    padding: 20px 38px;
    font-size: 18px;
    border-radius: 0px;
    background: #e8e8e8;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.3s;
    box-shadow: 6px 6px 11px #c5c5c5, -6px -6px 11px #ffffff;
  }
  
  .button-4:hover {
    border: 1px solid white;
  }
  
  .button-4:active {
    box-shadow: 5px 5px 11px #c5c5c5, -5px -5px 11px #ffffff;
  }
  
  
  .button-5 {
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    font-weight: 900;
    padding: 20px 38px;
    border: 2px solid #FF0072;
    border-radius: 1px;
    position: relative;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.1);
    color: #FF0072;
    text-decoration: none;
    transition: 0.3s ease all;
    z-index: 1;
  }
  
  .button-5:before {
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: '';
    background-color: #FF0072;
    z-index: -1;
  }
  
  .button-5:hover, .button-5:focus {
    color: white;
  }
  
  .button-5:hover:before, .button-5:focus:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
  }
  
  .button-5:active {
    transform: scale(0.9);
  }

  .content-block {
    padding: 22px;
    overflow: hidden;
  }

  .dop-page-flexdir{
    flex-direction: column;
  }

  .formW100{
    width: 100%;
  }

  iframe{
    border:0;
  }


  @media (max-width: 420px){

    .main-img{
      height: auto;
    }
  
  }