:root {
  --color-primary:       #006EC7;
  --color-primary-hover: #1666A7;
  --color-secondary:     #27A637;
  --color-third:         #E8F4FF;
  --color-black:         #45515A;
  --color-white:         #FFF;
  --color-required:      #F00;
  --font-primary:        "Roboto Flex", sans-serif;
}

body, html {margin: 0;padding: 0;width: 100%;color: var(--color-black);font-size: 15px;min-height: 100%;scroll-behavior: smooth;font-weight: 400;font-family: var(--font-primary);}
* {box-sizing: border-box;}

section {position: relative;margin: 0 auto;max-width: 1300px;width: 100%;}

header {position: sticky;top: 0;width: 100%;transition: .3s;z-index: 5;background-color: var(--color-white);box-shadow: 0 3px 6px rgba(0, 0, 0, .1);}
header section {display: flex;justify-content: space-between;padding: 10px;align-items: center;}

.links_head {display: flex;align-items: center;gap: 20px;}

nav {max-height: 0;transition: max-height 0.3s ease-in-out;position: fixed;top: 80px;overflow-y: auto;padding: 0 10px;background-color: var(--color-black);left: 10px;right: 10px;border-radius: 20px;box-shadow: 2px 2px 6px var(--color-black);overflow: hidden;}
nav .item {display: flex;align-items: center;gap: 10px;color: var(--color-white);font-size: 18px;text-decoration: none;padding: 10px 20px;position: relative;cursor: pointer;text-align: center;transition: .3s;border-radius: 30px;}
nav .item svg {width: 12px;fill: var(--color-white);transition: .3s;margin-bottom: -2px;}
nav .item.current {background-color: var(--color-white);color: var(--color-black);}

.btn_burger {overflow: hidden;text-indent: 100%;white-space: nowrap;transition: .3s;display: flex;align-items: center;justify-content: center;width: 25px;height: 20px;}
.btn_burger span {background-color: var(--color-primary);height: 4px;width: 25px;z-index: 10;border-radius: 2px;position: relative;}
.btn_burger span:before, 
.btn_burger span:after {background-color: var(--color-primary);content: "";height: 100%;position: absolute;right: 0;top: 0;width: 100%;transform: translateZ(0);backface-visibility: hidden;transition: .3s;border-radius: 2px;}
.btn_burger span:before {transform: translateY(-8px) rotate(0deg);}
.btn_burger span:after {transform: translateY(8px) rotate(0deg);}
.btn_burger.close_nav span {background-color: var(--color-white);}
.btn_burger.close_nav span:before {transform: translateY(0) rotate(45deg);}
.btn_burger.close_nav span:after {transform: translateY(0) rotate(-45deg);}

.banner_content {height: calc(100vw * (1062 / 1000));width: 100%;background: url(../images/home_slider_mobile.webp) no-repeat center;background-size: cover;display: flex;align-items: center;position: relative;justify-content: center;}
.banner_text {position: relative;padding: 0 20px;margin-top: -50px;color: var(--color-white);width: 100%;max-width: 1300px;}
.banner_text h1 {font-size: 30px;font-weight: 800;text-shadow: 2px 2px 10px rgba(0, 0, 0, .18);line-height: 1;margin: 0;width: 280px;}
.banner_text p {text-shadow: 2px 2px 6px rgba(0, 0, 0, .5);}
.banner_text .button {width: 150px;height: 40px;border-radius: 20px;background-color: var(--color-primary);color: var(--color-white);display: flex;align-items: center;justify-content: center;text-align: center;text-decoration: none;}

.about_content {position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: -70px;}
.about_text {position: relative;padding-left: 20px;}
.about_text p.blue {color: var(--color-primary);}

.about_content img {flex-shrink: 0;}

.services_content {background-color: var(--color-third);padding: 130px 10px 0;text-align: center;}
.services_content p {margin: 15px auto;max-width: 1100px;}
.services_list_content {position: relative;padding: 20px 0 100px;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.services_list {position: relative;padding: 20px;width: 100%;max-width: 400px;}
.services_list .line {display: flex;gap: 10px;align-items: center;color: var(--color-primary);font-size: 18px;padding: 7px 0;}
.services_list .line:before {content: url(../images/icon_services.svg);width: 30px;height: 30px;}
.services_list .separator {background-color: var(--color-primary);color: var(--color-white);padding: 10px 0;border-radius: 10px;text-align: center;text-transform: uppercase;font-size: 18px;margin: 15px 0;}

.selectus_content {position: relative;padding: 80px 10px 150px;border-top: 1px solid var(--color-primary);}

.video_thumbnail {position: relative;overflow: hidden;border-radius: 15px;cursor: pointer; display: block; margin: 20px auto -250px; transition: transform 0.3s ease;width: 315px;}
.video_thumbnail:before {content: url(../images/play_button.svg);width: 70px;height: 70px;position: absolute;top: 50%;margin-top: -35px;left: 50%;margin-left: -35px;}
.video_thumbnail:hover {transform: scale(1.02); }

.video_modal {display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center;transition: .3s;}
.video_modal.active {display: flex; }
.video_content {position: relative; width: 90%; max-width: 1000px;}
.video_content video {width: 100%; height: auto; display: block;border-radius: 15px;}
.close_btn {position: absolute; top: -45px; right: 0; color: white; font-size: 50px; cursor: pointer; z-index: 2; }

.certifications_content {position: relative;margin: 150px 0 0;padding: 20px 0;border-bottom: 1px solid var(--color-primary);text-align: center;}
.certifications_title {position: relative;width: 100%;border-top: 1px solid var(--color-primary);text-align: center;}
.certifications_title .text {display: inline-block;padding: 10px 20px;background-color: var(--color-primary);color: var(--color-white);font-size: 18px;border-radius: 30px;transform: translateY(-20px);}

.contact_content {position: relative;max-width: 800px;padding: 100px 10px;}
.contact_column {position: relative;}
.contact_column p {font-size: 20px;}
.contact_column .line {display: flex;gap: 10px;align-items: flex-start;color: var(--color-primary);font-size: 18px;padding: 5px 0;}
.contact_column .line svg {width: 17px;fill: var(--color-secondary);flex-shrink: 0;}

.title_form {padding: 20px 0 10px;font-size: 22px;font-weight: 600;}

.form__box {position: relative;padding: 12px 5px;}
.form__box label {position: relative;padding-bottom: 7px;display: block;width: 100%;text-align: left;}
.form__box label span {color: var(--color-required);}
.form__control {position: relative;border: 1px solid #eee;border-radius: 10px;padding: 12px 15px;background-color: var(--color-white);outline: none;transition: .3s;width: 100%;font-family: var(--font-primary);font-size: 15px;}
.form__control:focus {border-color: var(--color-primary);}

.form__control.req {border-color: var(--color-required);}

.form__req {position: absolute;bottom: -3px;font-size: 12px;left: 5px;width: 100%;display: none;color: var(--color-required);text-align: center;}

.form__button {position: relative;width: 100%;padding: 12px 20px;text-align: center;color: var(--color-white);background-color: var(--color-primary);border-radius: 10px;font-size: 17px;cursor: pointer;border: none;outline: none;text-transform: uppercase;transition: .3s;}
.form__button:hover {transform: scale(1.02);}

.alert__popup {position: fixed;border-radius: 10px;box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);top: 120px;right:20px;opacity: 0;z-index: 9;visibility: hidden;transition: .3s;transform: translateY(-10px);overflow: hidden;background-color: var(--color-white);pointer-events: none;}
.alert__popup.open {opacity: 1;visibility: visible;transform: translateY(0);}

.alert__popup .notification {padding: 20px;display: flex;gap: 15px;align-items: center;}
.alert__popup .notification.success {background-color: #d4edda;color: #155724;}
.alert__popup .notification.error {background-color: #f8d7da; color: #721c24;}

footer {background-color: var(--color-third);padding: 25px 10px;text-align: center;}
footer p {margin: 0;line-height: 1.5;}

.social_content {position: relative;display: flex;align-items: center;justify-content: center;gap: 10px;padding: 10px 0;}
.social_content a {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background-color: var(--color-primary);border-radius: 50%;text-decoration: none;transition: .3s;}
.social_content a svg {width: 20px;fill: var(--color-white);}

.subtitle {position: relative;color: var(--color-primary);font-weight: 800;font-size: 35px;padding-bottom: 10px;}
.text_green {color: var(--color-secondary);}

.whatsapp_content {position: fixed;bottom: 20%;right: 15px;transition: .3s;text-decoration: none;border-radius: 10px;background-color: var(--color-white);display: flex;}
.whatsapp_content .button {width: 60px;height: 60px;border-radius: 10px;box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);background-color: #27A637;display: flex;align-items: center;justify-content: center;}
.whatsapp_content .button svg {width: 30px;fill: var(--color-white);}
.whatsapp_content .text {position: relative;overflow: hidden;text-align: center;color: var(--color-primary);font-weight: 700;width: 0;display: flex;align-items: center;justify-content: center;border-radius: 0 10px 10px 0;transition: .3s;}


@media screen and (min-width: 768px) {

  .banner_content {height: calc(100vw * (1062 / 1920));background-image: url(../images/home_slider.webp);}

  .banner_text h1 {font-size: 35px;width: 350px;}
  .banner_text p {font-size: 16px;width: 500px;}

  .about_content {flex-direction: row;margin-bottom: -50px;}

  .services_list_content {flex-direction: row-reverse;}

  .video_thumbnail {width: 500px;}
  .video_thumbnail:before {width: 100px;height: 100px;margin-top: -50px;margin-left: -50px;}

  .contact_content {display: flex;gap: 30px;}
  .contact_column {flex-basis: 0;flex-grow: 1;}
  .title_form {display: none;}

  footer section {display: flex;align-items: center;justify-content: space-between;flex-direction: row-reverse;}

  .whatsapp_content {right: 25px;}
}

@media screen and (min-width: 1024px) {

  .btn_burger {display: none;}

  .bar_top {display: block;}

  nav {max-height: unset;display: flex;;align-items: center;justify-content: center;position: relative;top: unset;left: unset;right: unset;padding: 0;background: none;border-radius: 0;overflow: unset;box-shadow: none;gap: 5px;}
  nav .item {font-size: 16px;color: var(--color-black);padding: 6px 20px;}
  nav .item.current {background-color: var(--color-primary);color: var(--color-white);}
  nav .item.desp {padding: 6px 20px;}
  nav .item.desp span {display: block;}
  nav .item .submenu {position: absolute;top:100%;right: 0;width: 150px;background-color: var(--color-white);padding: 10px;border-radius: 10px;box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);opacity: 0;visibility: hidden;margin-top: -10px;transition: .2s;}
  nav .item .submenu a {border-radius: 10px;color: var(--color-black);text-shadow: none;text-decoration: none;display: block;padding: 8px 10px;transition: .3s;font-weight: 400;}
  nav .item .submenu a:hover {background-color: var(--color-gray);}

  .banner_text h1 {font-size: 50px;width: 450px;}
  .banner_text p {font-size: 16px;width: 530px;}
  .banner_text .button {font-size: 16px;}

  .about_content {gap: 20px;margin-bottom: -120px;}

  .services_content {padding-top: 180px;}
  .services_content p {font-size: 18px;}

  .services_list_content {gap: 30px;}

  .video_thumbnail {margin: 40px auto -400px; transition: transform 0.3s ease;width: 1000px;}

  .certifications_content {margin: 320px 0 0;}

  .subtitle {font-size: 40px;}

  .whatsapp_content:hover {box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);}
  .whatsapp_content:hover .text {width: 120px;}
}

@media screen and (min-width: 1300px) {

  .banner_text {margin-top: -100px;}
  .banner_text h1 {font-size: 70px;width: 650px;}
  .banner_text p {font-size: 20px;width: 700px;}
  .banner_text .button {font-size: 20px;height: 50px;width: 170px;border-radius: 50px;}

  .about_content {margin-bottom: -160px;}

  .services_content {padding-top: 250px;}

  .subtitle {font-size: 50px;}

}