@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import './reset.css';
@import './swiper.css';
@import './header.css';
@import './plans.css';
@import './benefits.css';
@import './about-us.css';
@import './maps.css';
@import './footer.css';
@import './contact.css';
@import './cobertura.css';
@import './citys.css';
@import './thank-you.css';

* {
    box-sizing: border-box;
}


:root {
    --main-color-blue: #0477BF;
    --paragrafo: #0477BF;
    --bars: #0477BF;
    --links-header: #0477BF;
    --links-header-hover: #5dacdd;
    --maps-color: #ffffff;
    --links-footer: #ffffff;
    --links-footer-hover: #d4d4d4;
    --plans-title-color: #0477BF;
    --plans-card-color: #05C7F2;
    --cobertura-container: #0477BF;
    --cobertura-cidades: #F4FCFF;
    --form-brackground-color: #f9fafd;
    --benefits-card: #ffffff;
    --second-color-blue: #049DD9;
    --third-color-blue: #05C7F2;
    --fourth-color-blue: #cfeff7;
    --gradient-blue: linear-gradient(
        45deg,
        hsl(203deg 96% 38%) 0%,
        hsl(202deg 96% 39%) 18%,
        hsl(201deg 96% 40%) 26%,
        hsl(199deg 96% 41%) 33%,
        hsl(199deg 96% 42%) 39%,
        hsl(198deg 96% 43%) 44%,
        hsl(197deg 96% 43%) 50%,
        hsl(196deg 96% 44%) 56%,
        hsl(195deg 96% 45%) 61%,
        hsl(193deg 96% 46%) 67%,
        hsl(193deg 96% 47%) 74%,
        hsl(192deg 96% 48%) 82%,
        hsl(191deg 96% 48%) 100%
      );
    --second-gradient-blue: linear-gradient(
        0deg,
        hsl(203deg 96% 38%) 0%,
        hsl(200deg 100% 40%) 53%,
        hsl(197deg 96% 43%) 100%
      );
    --main-orange: #F25C05;
    --second-orange: #ce530c;
    --main-black: #0D0D0D;
    --main-white: #FFFFFF;
    --text-color: #FFFFFF;
    --second-white: #EBECEE;
    --third-white: #d8f1f8;
    --fourth-white: #F4FCFF;
    --fifth-white: #F4F4F4;
    --swiper-navigation-size: 44px;
    --swiper-navigation-top-offset: 50%;


}

.dark {
  --main-color-blue: #0477BF;
  --paragrafo: #ffffff;
  --bars: #ffffff;
  --links-header: #ffffff;
  --links-header-hover: #bbbaba;
  --plans-title-color: #ffffff;
  --plans-card-color: #022e49;
  --cobertura-container: #034269;
  --cobertura-cidades: #033250;
  --form-brackground-color: #033655;
  --benefits-card: #032235;
  --second-color-blue: #049DD9;
  --third-color-blue: #05C7F2;
  --fourth-color-blue: #cfeff7;
  --gradient-blue: linear-gradient(
    45deg,
    hsl(203deg 95% 15%) 0%,
    hsl(203deg 95% 16%) 29%,
    hsl(203deg 94% 16%) 43%,
    hsl(203deg 94% 17%) 57%,
    hsl(203deg 93% 18%) 71%,
    hsl(203deg 92% 19%) 100%
  );
  --second-gradient-blue: linear-gradient(
    180deg,
    hsl(203deg 95% 15%) 0%,
    hsl(203deg 95% 16%) 29%,
    hsl(203deg 94% 16%) 43%,
    hsl(203deg 94% 17%) 57%,
    hsl(203deg 93% 18%) 71%,
    hsl(203deg 92% 19%) 100%
  );
   
  --main-orange: #FFFFFF;
  --second-orange: #ce530c;
  --main-black: #0D0D0D;
  --main-white: #032235;;
  --second-white: #EBECEE;
  --third-white: #d8f1f8;
  --fourth-white: #074e7a;
  --fifth-white: #021d2e;
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
}

body {
    overflow-x: hidden;
    background-color: var(--fifth-white);
}

::-webkit-scrollbar {
    width: 5px; 
}

::-webkit-scrollbar-track {
    background-color: var(--second-white); 
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-color-blue); 
    border-radius: 6px; 
}

html {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    margin: 0 auto;
    height: 100vh;
}

.whatsapp-btn {
    position: fixed;
    bottom: 20px; 
    right: 10px; 
    z-index: 1000; 
    background-color: #25D366;
    padding: 8px 10px;
    border-radius: 20px;
    transition: 0.2s;
  }

  .whatsapp-btn:hover {
    background-color: #21ad54;
    transition: 0.2s;
  }
  
  .whatsapp-btn img {
    width: 40px; 
    height: auto;
  }


.floating-button {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 55%;
  right: 10px;
  background-color: var(--main-color-blue);
  color: #fff;
  padding: 10px 14px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 99999;
}

.floating-button:hover {
  background-color: var(--second-color-blue);
}

.change-location-title {
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 10px 0 0 0;
  margin-bottom: 40px;
}

.city-card {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 60%;
  right: 10px;
  height: 200px;
  background-color: var(--main-color-blue);
  border-radius: 20px;
  padding: 20px;
  z-index: 999999999;
}

.tema {
  top: 62%;
  border: none;
}

.dark-mode {
  display: none;
}

.display-none {
  display: none;
}

.display-block {
  display: block;
}

.success {
  text-transform: uppercase;
  height: 100vh;
  color: var(--links-header);
}

.error {
  text-transform: uppercase;
  height: 100vh;
  color: var(--links-header);
}