/*
    Theme Name: Atom Theme
    Theme URI: https://hxdigital.com.br/
    Author: Higor Paulo | Hx Digital
    Author URI: https://hxdigital.com.br/
    Description: Website/One Page/Landing Page
    Version: 2024
    License: Atom Digital
    License URI: https://hxdigital.com.br/
    Tags: criação de páginas web Brasil, criação de páginas web Goiânia, desenvolvimento de sites Goiânia, desenvolvimento de sites responsivos Goiânia, web design Goiânia, otimização SEO, análise de desempenho de sites, técnicas de otimização para sites, gestão de redes sociais, estratégias de marketing nas redes sociais, produção de conteúdo para websites
    Text Domain: Atom Digital
*/

/* Cores customizadas */
:root {
    --color-neutral-100: #000000;
    --color-neutral-200: #414141;
    --color-neutral-300: #575757;
    --color-neutral-400: #69727d;
    --color-neutral-500: #D9D9D9;
    --color-neutral-600: #DFDFDF;
    --color-neutral-700: #F3F3F3;
    --color-neutral-800: #f8f8f8;
    --color-neutral-900: #FFFFFF;
    --color-primary: #00afef;
    --color-green: #028D31;

    /* Fonts Family */
    --font-family-01: "Montserrat", sans-serif;
}
.container{
    max-width: 1300px;
}

@media screen and (max-width: 999px) {
    html{
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    html{
        font-size: 14px;
    }
}

@media screen and (max-width: 576px) {
    html{
        font-size: 13px;
    }
}
body{
    font-size: 16px;
    font-weight: 500;
    color: var(--color-neutral-100);
    font-family: var(--font-family-01);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
form{
    touch-action: manipulation;
    border-radius: 10px;
    border: 1px solid var(--color-neutral-600);
}
.input-element{
    position: relative;
    display: flex;
}
.input-element label {
    position: absolute;    
    top: 15px;
    left: 34px;
    color: var(--color-neutral-100);
    font-size: 0.875rem; /* 14px */
    transition: 0.2s all ease-out;
    background: linear-gradient(180deg, rgba(243, 243, 243, 1) 0%, rgba(255, 255, 255, 0) 0%);
    padding: 0 5px;
    pointer-events: none; 
}
.input-element .active-label{
    top: -11px;
    left: 34px;
}
@media screen and (max-width: 768px) {
    .input-element .active-label{
        top: -9px;
    }
}
.input-element label.active-label{
    background: linear-gradient(180deg, rgba(243, 243, 243, 1) 60%, rgba(255, 255, 255, 0) 50%);
}
.input-element input:focus,
.input-element textarea:focus,
.input-element select:focus {
    border: 1px solid var(--color-primary); 
}
input,
textarea,
select{
    width: 100%;
    height: 100%;
    background-color: var(--color-neutral-900);
    font-size: 16px; 
    touch-action: manipulation;
    font-weight: 500;
    color: var(--color-neutral-300);
    border: 1px solid var(--color-neutral-900);
    padding: 15px 15px 15px 35px;
    border-radius: 10px;
}
input[type="text"][name="send-data-name"]{
    background-image: url(./assets/img/user-icon.svg);
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 14px 13px;
}
input[type="email"][name="send-data-email"]{
    background-image: url(./assets/img/email-icon.svg);
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 14px 13px;
}
input[type="tel"][name="send-data-phone"]{
    background-image: url(./assets/img/icon-phone.svg);
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 14px 13px;
}
input[type="email"][name="send-data-email"]{
    background-image: url(./assets/img/icon-email.svg);
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 14px 13px;
}
textarea[name="send-data-message"] {
    background-image: url(./assets/img/icon-mensagem.svg);
    background-position: 14px 18px;
    background-repeat: no-repeat;
    background-size: 14px 13px;
}
textarea{
    align-items: start;
    min-height: 10rem;
    max-height: 10rem;
}
select{
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent url(./assets/img/default-dropdown.svg) no-repeat right 1rem center;
    background-size: .6rem; /* Tamanho da imagem */
    background-color: var(--color-neutral-900);
    padding: 15px;
}
/*********** Start Fonts ***********/
.font-family-01{
    font-family: var(--font-family-01);
}
/*********** End Fonts ***********/

/*********** Start Background ***********/
.bg-color-neutral-100{
	background-color: var(--color-neutral-100);
}
.bg-color-neutral-200{
	background-color: var(--color-neutral-200);
}
.bg-color-neutral-300{
	background-color: var(--color-neutral-300);
}
.bg-color-neutral-400{
	background-color: var(--color-neutral-400);
}
.bg-color-neutral-500{
	background-color: var(--color-neutral-500);
}
.bg-color-neutral-600{
	background-color: var(--color-neutral-600);
}
.bg-color-neutral-700{
	background-color: var(--color-neutral-700);
}
.bg-color-neutral-800{
	background-color: var(--color-neutral-800);
} 
.bg-color-neutral-900{
	background-color: var(--color-neutral-900) !important;
}
.bg-color-primary{
	background-color: var(--color-primary);
}
.bg-color-green{
	background-color: var(--color-green) !important;
}
/*********** End Background ***********/

/*********** Start Colors ***********/
.text-color-neutral-100{
	color: var(--color-neutral-100);
}
.text-color-neutral-200{
	color: var(--color-neutral-200);
}
.text-color-neutral-300{
	color: var(--color-neutral-300);
}
.text-color-neutral-400{
	color: var(--color-neutral-400);
}
.text-color-neutral-500{
	color: var(--color-neutral-500);
}
.text-color-neutral-600{
	color: var(--color-neutral-600);
}
.text-color-neutral-700{
	color: var(--color-neutral-700);    
} 
.text-color-neutral-800{
	color: var(--color-neutral-800);    
} 
.text-color-neutral-900{
	color: var(--color-neutral-900);
}
.text-color-primary{
	color: var(--color-primary);
}
/*********** End Colors ***********/

/*********** Start Text sizes ***********/
.heading-size-xs {
	font-size: 1rem; /* 16px */
}
.heading-size-sm {
	font-size: 1.125rem; /* 18px */
}
.heading-size-md {
	font-size: 1.25rem; /* 20px */
}
.heading-size-lg {
	font-size: 1.75rem; /* 28px */
}
.heading-size-xl {
	font-size: 2.875rem; /* 46px */
}
.heading-size-xxl {
	font-size: 3.625rem; /* 58px */
}

@media screen and (max-width: 576px) {
    .heading-size-xxl {
        font-size: 2.8rem; /* 58px */
    }
}
.text-size-xs {
	font-size: 0.656rem;  /* 10.5px */
}
.text-size-sm {
	font-size: 0.75rem; /* 12px */
}
.text-size-md {
	font-size: 0.9rem; /* 14.4px */
}
.text-size-lg {
	font-size: 1rem !important; /* 16px */
}
.text-size-xl {
	font-size: 1.125rem; /* 18px */    
}
.text-size-xxl {
	font-size: 1.25rem; /* 20px */
}

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

}
/*********** End Text sizes ***********/

/*********** Start Font Weight ***********/
.font-weight-300{
    font-weight: 300;
}
.font-weight-400{
    font-weight: 400;
}
.font-weight-500{
    font-weight: 500;
}
.font-weight-600{
    font-weight: 600;
}
.font-weight-700{
    font-weight: 700;
}
.font-weight-800{
    font-weight: 800;
}
/*********** End Font Weight ***********/

/*********** Start Button ***********/
.at-btn-style-01{
    background-color: var(--color-primary);
    padding: 14px 25px;
    border-radius: 10px;
    border: 0;
    color: var(--color-neutral-900);
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    transition: all .3s;
}   
.at-btn-style-01:hover {
    transform: scale(0.9);
}
.at-btn-style-02{
    background-color: transparent;
    padding: 16px 20px;
    border: 2px solid var(--color-primary);
    border-radius: 10px 0;
    color: var(--color-neutral-100);
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    cursor: pointer;
}   
/*********** End Button ***********/

/********* Start Swiper Config *********/
.swiper-pagination-bullet{
    width: 11px;
    height: 3px;
    border-radius: 10px;
}
.blog-pagination .swiper-pagination-bullet{
    background-color: var(--color-neutral-400);
    opacity: 1;
}
.swiper-pagination-bullet-active{
    width: 41px;
    background-color: var(--color-neutral-100);
}
.swiper-button-next, .swiper-button-prev {
    width: 50px;
    height: 50px;
    margin-top: inherit;
    border-radius: 3px;
    border: .12rem solid var(--color-tertiary);
    color: var(--color-tertiary);
    font-size: .9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    position: relative;
}
.swiper-button-next i, .swiper-button-prev i {
    display: flex;
}
.swiper-button-prev {
    left: 0;
}
.swiper-button-next {
    right: 0;
}
.swiper-button-next:after, 
.swiper-button-prev:after {
    font-size: 20px;
}
/********* End Swiper Config *********/

@media screen and (max-width: 999px) {
    .container{
        padding: 0 30px;
    }
}
@media screen and (max-width: 576px) {
    .container{
        padding: 0 30px;
    }
}