/*
Theme Name: Help Retail
Author: Power Media
Author URI: p-media.com.ua
Description: ---EN: This site was created according to the Figma design provided by the client. Budget was limited, template was poor. Because of designer mistakes we had to make some unusual decisions to finish it. Hope you will enjoy the site. ---UA: Сайт був створений з Figma-макету, який надав клієнт. Бюджет був обмежений, шаблон був поганої якості. Через помилки в дизайн-макеті нам довелося місцями застосовувати оригінальний підхід для завершення проєкту. Віримо, що сайт буде працювати без нарікань, та макет вам прослужить вірою і правдою. (Creation Date: 2024-08)
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/


  @font-face {
    font-family: 'Coiny';
    src: url('Coiny.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

HTML, body {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Coiny';
 }



 
 img {
  -webkit-user-drag: none;
  user-select: none; 
}


.first_section_main {
  background: center bottom / 100% auto no-repeat url('img/webp/basket_w_cloud_full.webp');
  width: 100%;
}

header {
  color: white;
  max-width: 100vw;
}

.about_section_main {
  background-color: white;
}

.navbar {
  font-size: calc(0.005rem + 1.5vw);
  align-items: flex-start;
}

/* .navbar ul {
  width: 60% !important;
  justify-content: center;
} */
.navbar ul {
  width: fit-content !important;
  justify-content: center;
}

.nav-link {
  color: white;
  text-shadow: 2px 2px 2.5px #00000080;
  text-transform: uppercase;
  transition: 0.5s;
}

.nav-link:hover {
  color: #FFEA29;

}

.lang_rect{
  display: none !important;
  position: relative;
  width: 44.6px;
  height: 34.6px;
  border-radius: 14px;
  border: 4px solid #FFFFFF;
  opacity: 0px;

}

.lang_rect span {
  position: absolute;
  top: 1%;
  color: var(--dark-green);
  font-size: calc(0.005rem + 1.5vw);
  
}

.phone {
  color: var(--dark-green);
  font-size: calc(0.005rem + 1.5vw);

}


.soc_net svg{
  width: 80%;
  height: 80%;
  filter: drop-shadow(2px 2px 3.2px rgba(0, 0, 0, 0.4)) drop-shadow(-3px -3px 4px rgba(253, 255, 165, 0.64));
  transition: 0.5s;
}

.insta:hover svg, .facebook:hover svg, .telegram:hover svg{
  filter: drop-shadow(2px 2px 3.2px rgba(253, 255, 165, 0.64)) drop-shadow(-3px -3px 4px rgba(0, 0, 0, 0.4));
}

.social_item svg .fill-primary {
  fill: #FFEA29;
}

.social_item svg .fill-secondary {
  fill: #79B827;
}

.social_item.active svg .fill-primary {
  fill: #FFD100;
}

.social_item.active svg .fill-secondary {
  fill: #79B827;
}


.main_info {
  position: relative;
  aspect-ratio: 4/2.2;
}

.logo_pic {
  width: 10%;
  height: auto;
}

/* Mobile menu start*/
.scrollbar {
  height: 300px;
  width: 50%;
  overflow: auto;
  padding: 0 10px;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--light-green) var(--dark-green); /* Firefox */
}


#scrollbar::-webkit-scrollbar {
  width: 12px;
}

#scrollbar::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: var(--dark-green);
}

#scrollbar::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--light-green) ;
  box-shadow: inset 0 0 6px #0f690070;
}

.help_retail{
  padding-bottom: 10px;
  padding-left: 10px;
  width: 60%;
}

.offcanvas-menu {
  width: 250px;
  background: #79B827;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  transition: 0.5s;
}

.offcanvas-body .nav-link {
  font-size: 1.25rem;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  padding: 10px 0;
}

.offcanvas-body .nav-link:hover {
  color: #FFEA29;
}


.offcanvas-footer {
}

.contact-info {
  text-align: center;
  color: #FFFFFF;
}

.contact-info p {
  margin: 10px 0;
}

.social-icons img {
  width: 30px;
  margin: 0 5px;
}



/* Mobile menu end*/



.main_block_text {
  position: relative;
  text-transform: uppercase;
  color: var(--dark-green);
  text-align: center !important;
  font-size: calc(1.3rem + 1.5vw);
  z-index: 10;
}

.basket {
  position: relative;
  transform: translate(15%, -40%);
  width: 75%;
  height: auto;
  max-height: 60vh;
}

.basket_pic {
  width: 100%;
  height: auto;
}
/* .rocket {
  position: absolute;
  width: 30%;
  z-index: 11;
  left: 50%;
  bottom: -4vw;
  transition-duration: 3s;
} */
.rocket_mob {
  display: none !important;
}

.rocket {
  bottom: 15vh;
  position: absolute;
  width: 30vw;
  transform: translate(calc(50vw - 100%), 0);
  z-index: 11;
  height: 215px;
}

.rocket_pic {
  width: 100%;
  height: auto;
}

.rocket_pichov, .rocket_picckl {
  width: 150%;
  height: auto;
}

.rocket_pichov, .rocket_picckl {
  display: none;
}

.rocket:hover  .rocket_pichov{
  display: block;
}

.rocket:hover  .rocket_pic{
  display: none;
}

.rocket.active  .rocket_picckl{
  display: block;
}

.rocket.active .rocket_pic, .rocket.active .rocket_pichov {
  display: none;
}

.main_foot, .main_foot img  {
  max-width: 100vw;
  padding: 0;
  margin: 0;
}

.about_us_blocks {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  padding: 3% 15%;
}

.about_item {
  position: relative;
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    padding: 2%;
    color: var(--dark-green);
    text-transform: uppercase;
}

.about_item span{
  padding-top: 5%;
}

.about_item svg{
  width: 115px;
  height: 110px;

}

.about_item hr.vertical-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  height: 190px;
  background-color: rgba(47, 47, 47, 0.7);
  border: none;
}

.about_us_cloud {
  width: 100%;
  height: auto;
  padding: 1% 15%;
}

.about_us_cloud_mob {
  display: none;
}

.about_sec_part {
  max-width: 100wv;
}

.about_sec_bg, .about_sec_bg_hov, .about_sec_bg_mob{
  width: 100%;
  padding: 5% 20%;
  height: auto;
  display: block;
}

.about_sec_bg_hov, .about_sec_bg_mob {
  display: none;
}
.about_sec_part:hover .about_sec_bg {
  display: none;
}
.about_sec_part:hover .about_sec_bg_hov {
  display: block;
}


.buy_button {
  width: 20%;
  height: auto;
  display: block;
  position: relative;
}
.buy_button_nohov, .buy_button_hov {
  width: 100%;
  height: auto;
  display: block;
}
.buy_button_hov {
  display: none;
}
.buy_button:hover .buy_button_nohov {
  display: none;
}
.buy_button:hover .buy_button_hov {
  display: block;
}




.modal {
  display: none; 
  position: fixed;
  z-index: 555;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); 
}

.modal-content {
  position: relative;
  background-color: #f0ffff00;
  margin: 3% auto;
  padding: 20px;
  border: none;
  width: 80%;
  max-width: 500px; 
  border-radius: 10px;
}

/* Стилі для кнопки закриття */
.close-button {
  position: absolute;
  top: 14px;
  right: 18%;
  color: #343a40;
  font-size: 28px;
  cursor: pointer;
  z-index: 666;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal .submit_btn {
  position: absolute;
  z-index: 11;
  width: 18%;
  top: 90%;
  left: 35%;
  transition: transform 0.001s;
}


.services {
  background-image: url("img/webp/services_bg.webp");
  max-width: 100vw;
  min-height: 800px;
  background-size: cover; /* Щоб фонова картинка покривала весь елемент */
  background-position: center; 
} 

.services_block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  padding: 20% 15% 15%;
}

.service_item {
  position: relative;
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 28px;
  padding-left: 2%;
  margin-bottom: 4%;
  transition: 0.1s ease;
  width: 28.57vw; /* 400px / 1400px * 100vw = 28.57vw */
  height: 8.21vw;
}

.service_item svg {
  width: 20%;
  height: 80%;
}

.service_item:hover {
  box-shadow: -5px 3px 10px rgba(0, 0, 0, 0.1);
}

.service_txt{
  padding: 3%;
}

.service_item h1 {
  font-size: calc(0.2rem + 1vw);
  color: var(--light-green);
  margin: 0;
  text-transform: uppercase;
}
.service_item span {
  
      font-family: sans-serif;
      font-size: calc(0.001rem + 1vw);
      color: var(--light-gray);
}

.arrow {
  width: 18%;
  position: absolute;
  left: 96%;
}

.arrow {
  display: none;
}

.arrow img{
  width:100%;
  height:auto;
}

.arrow_dark{
  display: none;
}

.service_item.active {
  box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.1);
}


.service_item.active svg path, .service_item.active h1{
  fill:var(--dark-green);
  color:var(--dark-green);
}

.service_item.active .arrow_dark{
  display: block;
}

.service_item.active .arrow_light{
  display: none;
}


.client_rocket {
  padding: 5% 1%;
  width: 40%;
  height: auto;
  cursor: pointer;
  transition: transform 0.001s;
}

.client_rocket:hover .client_rocket_pic {
  transform: scale(1.03);
}


.client_block img {
  width: 100%;
  height: auto;
}

.client_rocket_pic {
  width: 100%;
  height: auto;
}

.clients_pichov{
  display: none;
}

.client_block:hover .clients_pichov{
  display: block;
}

.client_block:hover .clients_pic{
  display: none;
}


.clients_mob{
  display: none !important;
}

.client_mob_pic {
  width: 100%;
  height: auto;
}

.process {
  background-color: #F2F2F2;
}

.process_block {
  max-width: 100wv;

}

.process_pic {
  width: 70%;
}

.process_mob {
  display: none;
}

.mob_details {
  cursor: pointer;
  width: 100%;
  transition: transform 0.001s;
}

.mob_details_pic {
  width: 60%;
}

.mob_details:hover  .mob_details_pic {
  transform: scale(1.03);
}

.process_mob_pic{
  width: 100vw;
  height: auto;
}

.process_text {
  color:var(--light-green);
}


.supermarket_clients{
  background-color: #FFFFFF;
  max-width: 100wv;
  padding: 0;
  margin: 0;
}

.client_mob {
  display: none !important;
  max-width: 100wv;
}

.client-item {
  width: 80vw;
  
}


.client_mop_pic {
  width: 100%;
}

.supermarkets_mob {
  background-color: #FFFFFF;
  display: none;
}

.super-item {
  padding: 10%;
  display: flex;
    flex: row;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    border-radius: 30px;

}

.super_mob_pic {
  width: 100px;
}

.mob_blog_pic{
  width: 65vw;
  padding: 5%;
}

.blog_mob {
  display: none !important;
}

.blog{
  background-color: #F2F2F2;

}

.blog h1{
  color: var(--dark-green);
  font-size: 40px;

}


.blog_top {
  background-color: #FFFFFF;
}

.blog_top_block {
  position: relative;
}

.carousel-control-prev{
  opacity: 100% !important;
  left: 7%;
  top: 20%;
}

.carousel-control-next {
  opacity: 100% !important;
  right: 7%;
  top: 20%;
}

#vlogCarousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
  max-width: 1000px;
}

.swiper {
  max-width: 100%;
 }

.swiper-block {
  max-width: 100%;
  padding: 0 30px;
  position: relative;
}



.swiper-button {
  width: 50px !important;
  height: 50px !important;
  border-radius: 100%;
  background-color: #fff;
}
.swiper-button svg {
    width: 50px !important;
    height: 50px !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}

.vlog-carousel .carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vlog-item {
  position: relative;
  /* width: 300px;
  margin: 0 10px; */
  border-radius: 20px;
  overflow: hidden;
}
.vlog-item img {
  width: 100%;
  height: auto;
  mix-blend-mode: luminosity;



}
.vlog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(223, 255, 155, 0.5) 0%, rgba(166, 221, 50, 0) 100%);
  background-color: #A6DD32;
  opacity: 82%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vlog-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: white;
  text-shadow: 1px 2px 4px #2f2f2f;
  font-size: 150%;
  text-align: start;
  z-index: 2;
  opacity: 100%;
}

.maskot_stars {
  position: absolute;
  top:-30%;
  left: 55%;
  width: 12%;
  height: auto;
}

.maskot {
  width: 100%;
  height: auto;
}

.cloud_FAQ_pic {
  width:40%;
  height: auto;
}


.faq-item {
  margin: 10px 0;
  cursor: pointer;
}
.faq-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: -4px 7px 5px rgba(0, 0, 0, 0.1);
}
.faq-item-header h3 {
  margin: 0;
  color: var(--light-green);
}
.faq-item-header img {
  width: 24px;
  height: 24px;
}

.down_arrow{
  display: none;
}

.faq-item-content {
  display: none;
  padding-top: 10px;
  padding-left: 10PX;
  color: #555;
  font-family: sans-serif;
}
.faq-item.open .faq-item-header h3 {
  color: var(--dark-green, #006400);
}
.faq-item.open .faq-item-content {
  display: block;
}

.faq-item.open .right_arrow{
  display: none;
}
.faq-item.open .down_arrow {
  display: block;
}

.contact_cl_block{
  width: 120%;
  height: auto;
}

.contacts {
  padding: 4% 2%;
}

.contact_info h2{
  color: var(--dark-green);
  font-size: 30px;
}

.contact_info span{
  color: var(--light-green);
  font-size: calc(0.5rem + 1vw);
  padding-left: 5%;
}

.contact_cloud {
  width: 100%;
  height: auto;
}

.adress {
  width: 140%;
}

.contact_form_block{
  padding-left: 5%;
}

.contact-form {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 400px;
  text-align: center;
  z-index: 10;
}

.contact-form h2 {
  color: var(--light-green);
  font-size: 24px;
  margin-bottom: 10px;
}

.contact-form p {
  color: var(--dark-green);
  font-size: 18px;
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  text-align: left;
  margin-bottom: 5px;
  color: var(--dark-green);
  font-family: sans-serif;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #F2F2F2;
  border: none;
  border-radius: 5px;
}

.contact-form button {
  background: none;
  color: none;
  border: none;
}

.submit_btn {
  position: absolute;
  z-index: 11;
  width: 18%;
  top: 94%;
  left: 45%;
  transition: transform 0.001s;
}

#sub_btn:hover .submit_btn {
  transform: scale(1.03);
}

#sub_btn:active .submit_btn {
  transform: scale(0.97);
}

.contact_form_block {
  position: relative;
}

.corn-image {
  position: absolute;
  width: 30%;
    top: 60%;
    left: 8%;
    z-index: -1;

}

footer {
  background-image: url("img/webp/footer_bg.webp");
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center;
}

.foot_content {
  align-items: flex-end;
  justify-content: center;
}

footer .navbar {
  padding-top: 10%;
  padding-left: 10%;
  font-size: calc(0.005rem + 1.5vw);
}


.foot_logo {
  width: 60%;
  height: auto;
}

.foot_contacts {
  padding: 3% 1%;
  align-items: center;
}

.foot_contacts span {
  color:var(--dark-green);
  font-size: calc(0.005rem + 1.5vw);
  padding-left: 3%;
}

.foot_contacts svg {
  width: 5%;
  height: 5%;
}

footer .contact_block svg {
  width: 100%;
  height: 100%;

}

footer .soc_net {
  padding-right: 20%;
}



/*================== MEDIA STYLES ================================

================================

================================
*/

@media only screen and (max-width: 1200px) {
  .rocket {
    bottom: 5vh;
    left: 20em;
  }

}
}

@media only screen and (max-width: 1260px) {



  .service_item{

    width: 350px;

   height: 100px;

  }

  .corn-image {

    left: 5%;

}



}



@media only screen and (max-width: 1120px) {



  .services_block {

    padding: 25% 15% 15%;

  }



  .service_item{

    width: 300px;

   height: 100px;

  }



  .service_item svg{

    width: 30%;

  }



  .corn-image {

    left: 1%;

}



}





@media only screen and (max-width: 991px) {

  .first_section_main {

    min-height: 1600px;

    background: center bottom / 100% auto no-repeat url('img/webp/mob_main_bg.webp');

    width: 100%;

  }

  

  .dec_nav {

      display: none;

    }

    .mob_menu {

        display: block;

    }

      /* Додаткові стилі для мобільного меню */

  .navbar-toggler {

    display: block;

    background-color: #FFD100;

    border: none;

    margin: 10px;

  }



  .navbar-toggler-icon {

    width: 30px;

    height: 30px;

    background-color: #79B827;

  }

  .phone{

    font-size:calc(1rem + 1.5vw);

  }



  .offcanvas-footer .social_item svg{

    width: 100%;

    height: 100%;

  }

  .offcanvas-footer .contact-info a{

    padding: 3%;

  }



  .logo_pic {

    width: 50%;

  }



  .rocket_dec {

    display:none;

  }



  .main_block_text {

    padding: 10%;

  }



  .rocket_mob {

    display: block !important;

    width: 50vw;

  }



  .rocket_pic_mob {

    width: 100%;

  }



  hr{

    display: none;

  }



  .about_us_cloud_dec{

    display: none;

  }



  .about_us_cloud_mob {

    display: block;

  }



  .about_us_cloud {

    width: 100%;

    height: auto;

    padding: 1% 1%;

  }



  .about_item{

    padding: 2% 2%;

  }



  .about_item span{

    font-size: calc(0.03rem + 1.5vw);

  }

  

  .about_item svg{

    width: calc(3rem + 1.5vw);

    height: auto;

  

  }



  .arrow {

    display: none;

  }



  .buy_button {

    width: 40%;

  }



  .service_item{

    width: 280px;

   height: 100px;

  }



  .service_item svg{

    width: calc(10rem + 1.5vw);

    height: calc(4rem + 1vw);

  

  }



  .client_rocket {

    width: 80%;

  }



  .contacts svg{

    width: 10%;

    height: 40%;

  }



  #vlogCarousel {

    display: flex;

    transition: transform 0.5s ease-in-out;

    max-width: 800px;

  }



  .submit_btn {

    left: 45%;

}



  .corn-image{

    display: none;

  }

  .contact_part_block {

    display: none;

  }





  .contact_info {

    max-width: 100wv;

  }



  .contact_cl_block {

    display: flex;

    flex-direction: row;

    justify-content: center;

    width: 100%;

    height: auto;

  }



  .contact_cloud {

    width: 70%;

    height: auto;

}







}



@media only screen and (max-width: 860px) {

    .first_section_main {

      min-height: 1400px;

    }



    .services .container-fluid {

      background-image:url("img/services_mob.png");

      max-width: 100vw;

      min-height: 800px;

      background-size: contain; 

      background-position: center; 

      background-repeat: no-repeat; 

    } 



    .services_block {

      display: flex;

      flex-direction: column;

      flex-wrap: wrap;

      justify-content: center;

      align-items: flex-start;

      align-content: flex-start;

      padding-top: 35%;

      padding-bottom: 30%;

    }



    .service_item {

      width: 80%;

      height: 100px;

  }

    .service_item span{

      display: none;

    }



    .service_item svg {

      width: calc(4rem + 1vw);

      height: calc(4rem + 1vw);

  }



  .service_item h1 {

    font-size: calc(0.4rem + 1vw);

  }



  .about_sec_bg_hov, .about_sec_bg {

    display: none;

  }



  .about_sec_bg_mob{

    display: block;

  }



  .about_sec_part:hover .about_sec_bg {

    display: none;

  }

  .about_sec_part:hover .about_sec_bg_hov {

    display: none;

  }



  .client_rocket {

    width: 80%;

  }



  .contacts {

    display: none !important;

  }





  .client_dec{

    display: none !important;

  }



  #vlogCarousel {

    display: flex;

    transition: transform 0.5s ease-in-out;

    max-width: 500px;

  }



  .client_mob{

    display: flex !important;

  }



  .supermarkets_dec{

    display: none;

  }



  .supermarkets_mob {

    display: block;

  }



  .swiper-slide {

    width: 100%;

  }



  .process_dec {

    display: none;

  }





  .process_mob {

    display: block;

  }



  .maskot_stars{

    display: none;

  }



  .blog_mob {

    display: flex !important;

  }



  .blog_dec {

    display: none !important;

  }









}



@media only screen and (max-width: 730px) {

  .first_section_main {

    min-height: 1200px;

  }



  .vlog-overlay {

    border-radius: 65px

  }



  .clients_dec {

    display: none !important;

  }



  .clients_mob {

    display: flex !important;

  }

}



@media only screen and (max-width: 600px) {

  .first_section_main {

    min-height: 1000px;

  }



  .about_us_blocks {

    padding: 3% 3%;

  }



  .about_item{

    padding: 2% 2%;

    max-width: calc(40vw);

  }



  .about_item span{

    font-size: calc(0.01rem + 1.5vw);

  }

  

  .about_item svg{

    width: calc(2rem + 1.5vw);

    height: auto;



  }



  .vlog-overlay {

    border-radius: 65px

  }



  footer .soc_net {

    padding-right: 0;

  }



  footer .navbar {

    padding-top: 30%;

    font-size: calc(0.15rem + 1.5vw);

  }



  .foot_contacts svg {

    width: 10%;

    height: 10%;

  }



  .foot_contacts span {

    font-size: calc(0.2rem + 1.5vw);

  }



  .foot_maskot {

    display: none !important;

  }



  .modal .contact-form {

    background: white;

    border-radius: 10px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    padding: 20px;

    width: 350px;

    text-align: center;

    z-index: 10;

}



}



@media only screen and (max-width: 500px) {



      .first_section_main {

        min-height: 950px;

    }

    .soc_net {

      gap: 1.8rem !important;

    }



  footer .navbar {

    padding-top: 40%;

    font-size: calc(0.15rem + 1.5vw);

  }



  .modal .contact-form {

    background: white;

    border-radius: 10px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    padding: 20px;

    width: 300px;

    text-align: center;

    z-index: 10;

}



  .close-button {

    top: 14px;

    right: 12%;

  }



  

  .modal .submit_btn {

    top: 90%;

    left: 35%;

    width: 30%;

  }



}



@media only screen and (max-width: 440px) {



  .first_section_main {

    min-height: 850px;

  }



  .close-button {

    top: 14px;

    right: 15px;

  }



}



@media only screen and (max-width: 401px) {



  .first_section_main {

    min-height: 760px;

  }



  .foot_contacts svg {

    display: none;

  }



  .foot_contacts span {

    font-size: calc(0.3rem + 1.5vw);

  }



  .faq-item-header h3{

    font-size: calc(1rem + .6vw) !important ;

  }



  .modal .contact-form {

    background: white;

    border-radius: 10px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    padding: 10px;

    width: 250px;

    text-align: center;

    z-index: 10;

  }

  .close-button {

    display: none;

  }



  

  }



  @media only screen and (max-width: 352px) {



    .first_section_main {

      min-height: 700px;

    }



  }



  @media only screen and (max-width: 324px) {



    .first_section_main {

      min-height: 650px;

    }

  }




/*=============ROCKET=ON=XL=SCREEN==========*/
@media only screen and (max-width: 4000px) {
  .rocket {
    bottom: 50vh;
  }

}

@media only screen and (max-width: 3000px) {
  .rocket {
    bottom: 40vh;
  }

}

@media only screen and (max-width: 3000px) {
  .rocket {
    bottom: 35vh;
  }

}

@media only screen and (max-width: 2500px) {
  .rocket {
    bottom: 30vh;
  }

}

@media only screen and (max-width: 2500px) {
  .rocket {
    bottom: 25vh;
  }

}

@media only screen and (max-width: 1900px) {
  .rocket {
    bottom: 20vh;
  }

}


@media only screen and (max-width: 1800px) {
  .rocket {
    bottom: 15vh;
  }

}


@media only screen and (max-width: 1500px) {
  .rocket {
    bottom: 10vh;
  }

}