/* Framework */
:root {
    --blue: #232a43;
    --gray: #e0e0e0;
    --secondary: #81A1B1;
    --font-family: "Montserrat", sans-serif;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    word-wrap: break-word;
}

body {
    background-color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

textarea,
input[type] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 18px;
    /* Positioning for the arrow */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><polygon points="0,0 10,0 5,5" fill="black"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/* To ensure the select element works on smaller screens or if custom arrows are not desired in some cases */
select::-ms-expand {
    display: none;
}

::-moz-selection {
    color: var(--gray);
    background: var(--blue);
}

::-webkit-selection {
    color: var(--gray);
    background: var(--blue);
}

::selection {
    color: var(--gray);
    background: var(--blue);
}

/* Footer */

footer .footer-link {
    transition: .3s ease-in;
    text-align: center;
}

footer .address a, footer .footer-link, footer .social-media a {
    color: #d3d3d3;
    text-decoration: none
}

footer {
    background: #111633;
    background: linear-gradient(90deg,#111633 0,#111633 10%,#4a4a4a 40%,#4a4a4a 100%);
    min-height: 130px
}

footer .address {
    color: #d3d3d3;
    font-size: .8rem
}

footer .address h3 {
    margin-bottom: .5rem;
    font-size: .9rem
}

footer .container-grid {
    display: grid;
    align-items: center;
    height: 100%;
    grid-template-columns: 1fr 50% 1fr;
    margin: 0 auto;
    max-width: 1080px
}

footer .social-media a {
    margin: 10px
}

footer .social-media a svg {
    height: 2rem;
    width: 2rem;
    transition: .3s ease-in
}

footer .social-media a .facebook:hover {
    fill: #1877F2
}

footer .social-media a .instagram:hover {
    fill: #E4405F
}

footer .social-media a .twitter:hover {
    fill: #000000
}

footer .social-media a .youtube {
    fill: #fff;
}

footer .social-media a .youtube:hover {
    fill: #FF0000
}

footer .social-media a .tiktok:hover {
    fill: #000000
}

footer .footer-logo {
    width: 100px
}

footer .footer-link:hover {
    color: #62cbe5
}

footer .phone {
    border: 1px solid #8bd3e1;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
    padding: 0.25rem;
    margin: 0.5rem 0;
}

footer .phone svg {
    margin-right: 0.5rem;
    height: 1.2rem;
    width: 1.2rem;
}

h1, h2, h3 {
    margin: 1rem 0;
}

.autor a, .btn-form {
    display: flex;
    align-items: center
}

.border {
    border: 1px solid #b0b0b0;
}

.bg-white {
    background-color: #fff;
}

.bg-gray {
    background-color: #627a8b;
}

.bg-gray-200 {
    background-color: rgb(229 231 235);
}

.block {
    display: block;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.grid {
    display: grid
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.gap-2 {
    gap: 0.5rem; /* 8px */
}

.gap-4 {
    gap: 1rem; /* 16px */
}

.h-screen {
    height: 100vh;
}

.h-full {
    height: 100%;
}

.h-5 {
    height: 1.25rem; /* 20px */
}

.h-6 {
    height: 1.5rem; /* 24px */
}

.h-28 {
    height: 7rem; /* 112px */
}

.h-36 {
    height: 9rem; /* 144px */
}

.hidden {
    display: none;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.max-w-screen-md {
    max-width: 768px;
}

.max-w-screen-xl {
    max-width: 1280px;
}

.max-w-screen-2xl {
    max-width: 1536px;
}

.max-w-full {
    max-width: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

.mx-auto {
    margin: 0 auto;
}

.mb-1 {
    margin-bottom: 0.25rem; /* 4px */
}

.mb-2 {
    margin-bottom: 0.5rem; /* 8px */
}

.mb-4 {
    margin-bottom: 1rem; /* 16px */
}

.mb-6 {
    margin-bottom: 1.5rem; /* 24px */
}

.mb-10 {
    margin-bottom: 2.5rem; /* 40px */
}

.ml-2 {
    margin-left: 0.5rem; /* 8px */
}

.mr-2 {
    margin-right: 0.5rem; /* 8px */
}

.mr-4 {
    margin-right: 1rem; /* 16px */
}

.mt-2 {
    margin-top: 0.5rem; /* 16px */
}

.mt-4 {
    margin-top: 1rem; /* 16px */
}

.my-2 {
    margin-top: 0.5rem; /* 8px */
    margin-bottom: 0.5rem; /* 8px */
}

.p-1 {
    padding: 0.25rem; /* 4px */
}

.p-2 {
    padding: 0.5rem; /* 8px */
}

.p-3 {
    padding: 0.75rem; /* 12px */
}

.p-4 {
    padding: 1rem; /* 16px */
}

.p-6 {
    padding: 1.5rem; /* 24px */
}

.p-8 {
    padding: 2rem; /* 32px */
}

.px-2 {
    padding-left: 0.5rem; /* 8px */
    padding-right: 0.5rem; /* 8px */
}

.py-4 {
    padding-top: 1rem; /* 16px */
    padding-bottom: 1rem; /* 16px */
}

.py-6 {
    padding-top: 1.5rem; /* 24px */
    padding-bottom: 1.5rem; /* 24px */
}

.py-8 {
    padding-top: 2rem; /* 32px */
    padding-bottom: 2rem; /* 32px */
}

.rounded {
    border-radius: 0.25rem; /* 4px */
}

.rounded-md {
    border-radius: 0.375rem; /* 6px */
}

.rounded-lg {
    border-radius: 0.75rem; /* 12px */
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.subtitle {
    border-bottom: 1px solid #597383;
    color: #597383;
    font-size: 1.3rem;
    margin: 1rem 0;
    padding: 0.25rem;
}

.title {
    text-align: center;
    color: var(--blue);
}

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

.text-white {
    color: #fff;
    font-size: 1.2em;
}

.text-gray-500 {
    color: rgb(107 114 128);
}

.text-sm {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
}

.w-5 {
    width: 1.25rem; /* 20px */
}

.w-6 {
    width: 1.5rem; /* 24px */
}

/* Spinner Animation in form submission */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
  margin: 0 0.5rem;
}