/*
    Theme Name: Atom Theme
    Theme URI: https://atomdigital.com.br/
    Author: Higor Paulo | Atom Digital
    Author URI: https://atomdigital.com.br/
    Description: Website/One Page/Landing Page
    Version: 2025.1
    License: Atom Digital
    License URI: https://atomdigital.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: #161616;
    --color-neutral-200: #2C2C2C;
    --color-neutral-300: #393939;
    --color-neutral-400: #747474;
    --color-neutral-500: #D0D1CF;
    --color-neutral-600: #f0f0f0;
    --color-neutral-700: #E6E6E6;
    --color-neutral-800: #EEEEEE;
    --color-neutral-900: #FFFFFF;

    --color-green: #06E77B;

    /* Fonts Family - Google Fonts */
    --font-family-01: "Inter", sans-serif;
}
html{
    font-size: 16px;
    font-weight: 400;
    scroll-behavior: smooth;
}
body{
    font-family: var(--font-family-01);
    color: var(--color-neutral-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.08em;
    font-weight: 400;
}
@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;
    }
}
form{
    touch-action: manipulation;
}
input,
textarea,
select{
    width: 100%;
    background: var(--color-neutral-900);
	font-size: 1rem;
    touch-action: manipulation;
    color: var(--color-neutral-400);
    border: 1px solid var(--color-neutral-700);
    padding: 1rem;
    letter-spacing: 0.08em;
}
textarea{
    min-height: 7rem;
    max-height: 7rem;
}
select{
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff url(./assets/img/default-dropdown.svg) no-repeat right 1rem center;
    background-size: .6rem; /* Tamanho da imagem */
    border-radius: 0 !important;
    border: 1px solid var(--color-neutral-700);
}
form select:focus, form input:focus{
    outline: none !important;
    box-shadow: none !important;
}
/*********** 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); }
.bg-color-green{ background-color: var(--color-green) !important; }
/*********** End Background ***********/

/*********** Start Colors ***********/
.text-color-neutral-100{ color: var(--color-neutral-100) !important; }
.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); }
/*********** End Colors ***********/

/*********** Start Text sizes ***********/
.heading-size-xxs { font-size: 1.375rem; /* 22px */ }
.heading-size-xs { font-size: 1.625rem; /* 25px */ }
.heading-size-sm { font-size: 2rem; /* 32px */ }
.heading-size-md { font-size: 2.5rem; /* 40px */ }
.heading-size-lg { font-size: 3rem; /* 48px */ }
.heading-size-xl { font-size: 3.25rem; /* 52px */ }
.heading-size-xxl { font-size: 3.813rem; /* 61px */ }
@media screen and (max-width: 576px) {
    .heading-size-xxl { font-size: calc(3.813rem - 50%); }
    .heading-size-xl { font-size: calc(3.25rem - 50%); }
    .heading-size-lg { font-size: calc(3rem - 50%); }
    .heading-size-md { font-size: calc(2.625rem - 50%); }
}
.text-size-xs { font-size: 0.656rem;  /* 10.5px */ }
.text-size-sm { font-size: 0.75rem; /* 12px */ }
.text-size-md { font-size: 0.875rem; /* 14px */ }
.text-size-lg { font-size: 1rem !important; /* 16px */ }
.text-size-xl { font-size: 1.125rem; /* 18px */ }
.text-size-xxl { font-size: 1.25rem; /* 20px */ }
/*********** End Text sizes ***********/

/*********** Start Font Weight ***********/
.font-weight-200{ font-weight: 200; }
.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 ***********/
.btn-style-01{
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
    border: 0;
    padding: 1.1rem 1.25rem;
    font-size: 0.875rem; /* 14px */
    line-height: 1;  
    font-weight: 400;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
}  

.btn-style-02 {
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-100);
    border: 0;
    padding: 1.1rem 1.25rem;
    font-size: 0.875rem; /* 14px */
    line-height: 1;  
    font-weight: 400;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
}

.btn-style-03 {
    background-color: transparent;
    color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-100);
    padding: 1.1rem 1.25rem;
    font-size: 0.875rem; /* 14px */
    line-height: 1;  
    font-weight: 400;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
}
/*********** End Button ***********/

/********* Start Swiper Config *********/
.swiper-pagination-bullet {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    opacity: 0.5;
    background-color: transparent;
}

.swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1; 
}
.swiper-button-next, .swiper-button-prev {
    background: var(--color-neutral-800);
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: .7px solid var(--color-neutral-800);
    padding: .8rem;
    top: 50%; 
    transform: translateY(-50%);
    margin-top: auto;
}
.swiper-button-next:after, 
.swiper-button-prev:after {
    content: '';
    width: 25px;
    height: 25px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.swiper-button-next{
    right: -10px;
}
.swiper-button-prev{
    left: -10px;
}
.swiper-button-next:after {
    background-image: url(./assets/img/arrow-right.svg) !important;
}
.swiper-button-prev:after {
    background-image: url(./assets/img/arrow-left.svg) !important;
}
@media screen and (max-width: 768px) {
    .swiper-button-next, .swiper-button-prev {
        width: 30px;
        height: 30px;
    }
}
@media screen and (max-width: 576px) {
    .swiper-button-next, .swiper-button-prev {
        width: 26px;
        height: 26px;
    }
}
/********* End Swiper Config *********/

/********* Product single – thumbs gallery (lateral esquerda) *********/
.product-gallery-with-thumbs {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.product-thumbs-col {
    flex-shrink: 0;
    width: 180px;
    overflow: hidden;
}
.carousel-products-single-thumbs {
    max-height: 100%;
}
.carousel-products-single-thumbs .swiper-slide {
    height: 180px !important;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    border: 1px solid transparent;
}
.carousel-products-single-thumbs .swiper-slide:hover,
.carousel-products-single-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}
.carousel-products-single-thumbs .swiper-slide-thumb-active {
    border-color: var(--color-neutral-100);
}
.carousel-products-single-thumbs .swiper-slide figure {
    height: 100%;
}
.carousel-products-single-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-main-col {
    flex: 1;
    min-width: 0;
}
.carousel-products-single {
    width: 100%;
}
.carousel-products-single .swiper-slide {
    width: 100%;
}
.carousel-products-single .swiper-slide figure {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
}
.carousel-products-single .swiper-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 767px) {
    .product-gallery-with-thumbs {
        flex-direction: column;
        gap: 1rem;
    }
    .product-thumbs-col {
        width: 100%;
        order: 2;
        height: auto !important;
    }
    .product-main-col {
        order: 1;
        width: 100%;
    }
    .carousel-products-single-thumbs {
        height: 120px !important;
        width: 100%;
    }
    .carousel-products-single-thumbs .swiper-wrapper {
        display: flex;
        flex-direction: row;
    }
    .carousel-products-single-thumbs .swiper-slide {
        height: 120px !important;
        width: 120px !important;
        flex-shrink: 0;
    }
    .carousel-products-single .swiper-slide figure {
        padding-bottom: 100%;
    }
}
/********* End Product single thumbs *********/

@media screen and (max-width: 576px) {
    .container{
        padding: 0 30px;
    }
}
/********* Gallery Lightbox Styles *********/
#gallery-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

#gallery-lightbox-modal.show {
    display: flex !important;
}

.gallery-lightbox-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 90%;
    max-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gallery-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10001;
    padding: 10px;
    line-height: 1;
}

#gallery-lightbox-close:hover {
    color: var(--color-primary);
}

.gallery-lightbox-swiper {
    width: 100%;
    height: 100%;
}

.gallery-lightbox-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-swiper .swiper-slide img,
.gallery-lightbox-swiper .swiper-slide video {
    width: auto;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 8px;
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
    background: var(--color-primary) !important;
}

@media screen and (max-width: 768px) {
    .gallery-lightbox-content {
        width: 95%;
        height: 85%;
    }
    
    #gallery-lightbox-close {
        top: -35px;
        font-size: 1.5rem;
    }
}

.gallery-lightbox-trigger {
    cursor: pointer;
    transition: transform 0.3s ease;
}
/********* End Gallery Lightbox Styles *********/

/********* Products Archive Styles *********/
.list-category-products li a {
    width: 100%;
    display: block;
    font-size: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--color-neutral-800);
}
/********* End Products Archive Styles *********/

/********* Pagination Styles *********/
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.page-numbers {
    width: 50px;
    height: 50px;
    padding: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-neutral-400);
    border: .5px solid var(--color-neutral-400);
}

.page-numbers.current {
    color: var(--color-neutral-100);
    border-color: var(--color-neutral-100);
}

.page-numbers img {
    display: inline-block;
    vertical-align: middle;
    max-height: .7rem;
}
/********* End Pagination Styles *********/
@media screen and (max-width: 999px) {
    .posts-section,
    .products-section,
    .services-section,
    .about-me-section,
    .about-section,
    .banner-hero-section,
    .newsletter-section,
    .products01-section,
    .products02-section,
    .services-section {
        padding: 3.75rem 0 !important;
    }

    .services-section,
    .newsletter-section {
        padding-top: 0 !important;
    }
}