@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

body {font-family: "Poppins", sans-serif;background-color: #FFFFFF;padding-top: 110px;}

/* Container */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {padding-left: 1rem;padding-right: 1rem;}

@media(min-width: 1200px) and (max-width: 1399px) {
  .container {width: 100%; max-width: 98%;}
}

@media(min-width: 1400px) {
  .container {max-width: 1350px;}
}

/* Fontes */
.fw-4 {font-weight: 400;}
.fw-5 {font-weight: 500;}
.fw-6 {font-weight: 600;}
.fw-7 {font-weight: 700;}
.fw-8 {font-weight: 800;}
.fw-9 {font-weight: 900;}
.fs-4-paggus {font-size: 4rem;}
.fs-5-paggus {font-size: 4.8rem;}

/* Cores */
.text-light-green {color: #c2d100;}
.text-blue-paggus {color: #45AEA7;}
.text-light-green {color: #c2d100;}

.text-justify {text-align: justify;}

/* Bordas */
.border-blue-paggus {border-color: #45AEA7 !important;}
.border-green-paggus {border-color: #c2d100 !important;}

/* Fundos */
.bg-blue-paggus {background-color: #45AEA7 !important;}

/* Botões */
.btn-blue-paggus { background-color: #45AEA7 !important; box-shadow: 8px 8px 0px #c2d100; }
.btn-light-green { background-color: #c2d100 !important; border-color: #c2d100 !important; }    

.fa-circle-check {box-shadow: 0px 0px 0px 4px rgba(194,209,0,0.3);height: 24px;width: 24px;border-radius: 50%;}
.rounded-pill-textarea {border-radius: 1.5rem !important;}
.swal-footer {text-align: center !important;}
.swal-button {background-color: #c2d100 !important;}

/* Input Autocomplete Transparente */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s;}

/* Botão Padrão */
.btn {display: flex;align-items: center;justify-content: center;position: relative;width: 100%;}
.btn:focus {box-shadow: none;}

/* Navbar */
.navbar {height: 110px;background-color: transparent;transition: background-color .15s ease;}
.navbar.bg-navbar {background-color: #45aea7;}
.navbar .navbar-brand {position: absolute;left: 50%;transform: translateX(-50%);z-index: 1030;}
.navbar .navbar-nav .nav-link {position: relative;display: inline-block;text-transform: uppercase;font-size: 1.25rem;letter-spacing: 3px;line-height: 1;color: #ffffff;margin: 0.875rem 0;padding: 0;}
.navbar .navbar-nav .nav-link.active {font-weight: 800;}
.navbar .navbar-nav .nav-link::before {content: '';display: block;position: absolute;left: 0;right: 0;bottom: -4px;width: 0;height: 3px;margin: 0 auto;background: #c2d100;transition: width .3s;}
.navbar .navbar-nav .nav-link:not(.btn-login):hover::before,
.navbar .navbar-nav .nav-link:not(.btn-login).active::before {width: 100%;}
.navbar .navbar-nav .nav-link.btn-login {background-color: #ffffff;border-color: #ffffff;color: #3a3a3a;font-weight: 900;padding: 0.875rem 2.5rem;border-radius: 2rem;}
.navbar .navbar-nav .nav-link.btn-login:hover,
.navbar .navbar-nav .nav-link.btn-login:focus {color: #45aea7;}

@media(min-width: 576px) {
  .navbar .navbar-nav {max-width: 540px;margin: 0 auto;}
}

@media(min-width: 768px) {
  .navbar .navbar-nav {max-width: 720px;}
}

@media(min-width: 992px) {
  .navbar .navbar-nav {max-width: 960px;}
}

@media(min-width: 1200px) {
  .navbar {transition: margin-top .15s ease, background-color .15s ease;}
  .navbar.bg-navbar {margin-top: 0;}
  .navbar .navbar-brand {position: initial;left: auto;width: auto;transform: initial;}
  .navbar .navbar-nav {max-width: 100%;margin-right: 0;}
  .navbar .navbar-nav .nav-link {margin: 0 1.25rem;}
  .navbar .navbar-nav .nav-link.btn-login {margin-right: 0;}
}

@media(min-width: 1280px) {
  .navbar .navbar-nav .nav-link {font-size: 1.438rem;}
  .navbar .navbar-nav .nav-link.btn-login {padding: 0.875rem 3rem;}
}

@media(min-width: 1400px) {
  .navbar .navbar-nav .nav-link {font-size: 1.625rem;}
}

@media(min-width: 1600px) {
  .navbar {transition: margin-top .15s ease, background-color .15s ease;}
  .navbar.bg-navbar {margin-top: 0;}
}

@media(max-width: 1199px) {
  .navbar .navbar-collapse {position: fixed;z-index: 1020;top: 0;right: 0;bottom: 0;left: 100%;height: 100%;margin-top: auto;overflow-y: auto;padding-top: 6.25rem; background-color: rgb(69, 174, 167);transition: left .15s ease-in-out;}
  .navbar .navbar-collapse.show {left: 0;transition: left .15s ease-in-out;}
}

/* Navbar Menu Hamburger */
.navbar .navbar-toggler {position: relative;cursor: pointer;height: 21px;width: 28px;padding: 0;border: 0;box-shadow: none;background-color: transparent;z-index: 1030;}
.navbar .navbar-toggler span {display: block;position: absolute;width: 28px;height: 3px;border-radius: 5px;background-color: #ffffff;-webkit-transition: -webkit-transform 0.3s;-webkit-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.navbar .navbar-toggler span:nth-child(1) {top: 0px;}
.navbar .navbar-toggler span:nth-child(2) {top: 9px;}
.navbar .navbar-toggler span:nth-child(3) {top: 18px;}
.navbar .navbar-toggler.active span:nth-child(1) {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top: 9px;}
.navbar .navbar-toggler.active span:nth-child(2) {opacity: 0;}
.navbar .navbar-toggler.active span:nth-child(3) {-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);position: absolute;top: 9px;}

/* Banner */
.banner {position: relative;min-height: 102vh;background: #45aea7;}
.banner picture img {position: absolute;bottom: 0;right: 0;}
.banner .content .timer {display: flex;align-items: center;width: max-content;height: 74px;gap: 0.875rem;padding: 0.5rem 1rem 0.5rem 0.5rem;margin-bottom: 2rem;border-radius: 1.875rem;background-color: rgb(141, 234, 228);}
.banner .content .timer span {font-size: 1.5rem;color: #ffffff;}
.banner .content .title {font-size: 4rem;font-weight: 900;color: #ffffff;line-height: 1;margin-bottom: 0;text-transform: uppercase;}
.banner .content .title span {color: #edff00;}

@media(min-width: 360px) {
  .banner .content .timer {gap: 1rem;padding: 0.5rem 1.875rem 0.5rem 0.5rem;}
  .banner .content .title { font-size: 3.5rem; }
  
  /*
  .banner .content .title {
    font-size: 3rem;
    max-width: 328px;
  }
  */
}
@media(max-width: 540px) {
  .banner picture img {bottom: 50px;}
}

@media(min-width: 480px) and (max-width: 540px) {
  .banner .content .title {max-width: 100%;}  
}

@media(min-width: 992px) {
  .banner .content .timer {margin-bottom: 3.5rem;}

  /*
  .banner .content .timer span {
    font-size: 1.75rem;
  }
  .banner .content .title {
    font-size: 5rem;
    max-width: 540px;
  }
  */
}

@media(orientation: portrait) and (max-height: 720px) {
  .banner picture img {width: 80%;}
}

@media(orientation: landscape) and (max-width: 991px) {
  .banner {min-height: calc(100vh + 110px);}
  .banner picture img {width: 60%;}
  .banner .content .title {font-size: 2.5rem;max-width: 280px;}
  .banner .content .timer {height: 60px;gap: 0.5rem;}
  .banner .content .timer img {height: 46px;}
  .banner .content .timer span {font-size: 1.25rem;}
}

@media(orientation: landscape) and (max-width: 799px) {
  .banner .content .title {font-size: 2rem;max-width: 220px;}
  .banner .content .timer {height: 48px;padding: 0.5rem 1.25rem 0.5rem 0.5rem;}
  .banner .content .timer img {height: 34px;}
  .banner .content .timer span {font-size: 1rem;}
}

@media(orientation: landscape) and (max-width: 740px) and (min-height: 520px) {
  .banner {min-height: calc(100vh - 80px);}
}

@media(orientation: landscape) and (min-width: 992px) and (max-width: 1199px) {
  .banner picture img {width: 60%;}
  .banner .content .title {font-size: 3rem;max-width: 328px;}
  .banner .content .timer {height: 60px;gap: 0.5rem;}
  .banner .content .timer img {height: 46px;}
  .banner .content .timer span {font-size: 1.25rem;}
}

@media(orientation: landscape) and (min-width: 992px) and (min-height: 768px) {
  .banner .container {display: flex;align-items: center;height: calc(80vh - 110px);}
}

@media(min-width: 1200px) {
  .banner .container {display: flex;align-items: center;height: calc(55vh + 110px);}
  .banner picture img {width: 60%;}
}

@media(min-width: 1400px) {  
  .banner .container {display: flex;align-items: center;height: 80vh;}
}

@media(min-width: 1600px) {
  .banner {min-height: 90vh;}
  .banner picture img {width: 55%;}
}

/* Seja um Parceiro */
#partner {background-image: url(/img/bg-seja-um-parceiro.png);background-repeat: no-repeat;background-position: bottom center;}

/* Depoimentos */
#depositions {background-image: url(/img/bg-depoimentos.png);background-repeat: no-repeat;background-position: top center;}
#depositions .card {border-radius: 4rem !important;min-height: 600px;}
#depositions .card img {margin-top: -80px;}

/* Motivos para Crescer com a Paggus */
#reasons {background-image: url(/img/bg-motivos-para-crescer-com-a-paggus.png);background-repeat: no-repeat;background-position: bottom center;}

/* Missão, Visão e Valores Paggus */
#mission-vision-values .card {background-color: #7ed0cb !important;border-radius: 2rem;border-bottom-right-radius: 0px;}
#mission-vision-values .card h5 img {max-width: 42px;}
#mission-vision-values-bottom {height: 280px;margin-bottom: -165px;background-image: url(/img/bg-missao-visao-valores.png);background-repeat: no-repeat;background-position: bottom;}

/* Blog */
#blog .card {background-color: #7ed0cb !important;border-radius: 2rem;border-bottom-right-radius: 0px;transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);}
#blog .card:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);}
#blog .card img {height: 200px;object-fit: cover;border-radius: 2rem;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}

/* Rodapé */
.footer-padding-top { padding-top: 165px; }

footer {background-image: url(/img/bg-footer.png);background-repeat: no-repeat;background-position: center;background-size: cover;}
footer .socials i {width: 30px;height: 30px;padding: 7px 0px;}