/* ===================================================================================

* Theme Name: Agntix Child
* Theme URI: https://wp.storebuild.shop/agntix/
* Author: themepure
* Author URI: https://themeforest.net/user/themepure
* Description: Agntix - Digital Agency Wordpress Theme
* Version: 1.0.0
* Template: agntix
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: agntix-child
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Tested up to: 6.7
Requires PHP: 7.4

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

/* html, body {
  overflow-x: hidden;
  overflow-y: auto;
}
 */

/* Header */

.elementor-widget-tp-header-13 .tp-offcanvas-2-close-btn, 
.app-faq-area .accordion-buttons, 
.tp-showcase-arrow-box .tp-showcase__button-prev,
.tp-showcase-arrow-box .tp-showcase__button-next {
    background-color: transparent !important;
}

@media (min-width: 2560px) {
  /* .tp-header-14-area > .container  {
    padding-left: 0;
    padding-right: 0;
  } */

  .container-hero {
    max-width: 1720px;
  }
}

@media screen and (max-width: 767px) {
    .tp-header-14-bar-wrap .tp-header-8-bar {
        padding: 5px 10px;
    }   
}

@media (width: 1440px) {
    .tp-header-14-area > .container {
        padding-left: 128px !important;
        padding-right: 128px !important;
    }
    .elementor-47741 .elementor-element.elementor-element-fb80a8f .tp-el-footer-title {
        font-size: 50px !important;
    }

    .section-about-us > .e-con-inner,
    .section-services > .e-con-inner,
    .section-use-cases > .e-con-inner,
    .wz-footer > .elementor-element,
    .wz-case-hero > .e-con-inner {
        padding-left: 113px !important;
        padding-right: 113px !important;
    }

    .tp-hero-area .container-hero-1440 {
        max-width: 1200px !important;
    }

    .tp-hero-area .tp-hero-title {
        font-size: 135px !important;
    }

    .wz-footer .wz-copyright .elementor-widget-heading {
        padding: 0px !important;
    }

    body:not(.rtl) .elementor-44173 .elementor-element.elementor-element-f39442e {
        right: 113px !important;
    }
}

/* Hero Banner */

.tp-hero-ptb {
    border-radius: 0px;
    background-repeat: no-repeat;
    background-size: cover;
}

.tp-hero-content-wrap {
    margin-left: 0px;
    gap: 40px;
}

@media (max-width: 767px) {
    .tp-hero-content-wrap {
        flex-wrap: wrap;
        display: flex;
        justify-content: center !important;
        align-items: center;
    }
}

.tp-hero-more-info-wrap {
    margin-left: 0px;
}

.tp-hero-more-info {
    width: 220px;
    min-height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
}


@media screen and (max-width:767px) {
    /* Reduce the slider height to 600px */
    #showcase-slider-holder {
        height: 600px !important;
    }

    .port-showcase-slider-item {
        height: 600px !important;
    }

    .parallax-slider-active .swiper-slide {
        height: 600px !important;
    }

    .parallax-slider-active .swiper-container {
        height: 600px !important;
    }

    #canvas-slider {
        height: 600px !important;
        position: absolute !important;
    }

    #port-showcase-slider-main {
        height: 600px;
        position: relative;
        overflow: hidden;
    }
    }

/* Team Page */

.agntix-dark .tp-team-part-shape img {
    filter: invert(0);
}

.hover-reveal-item .des-team-reveal-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Who are you */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-agntix-about-custom-title .tp-section-title-clash {
        font-size: 100px !important;
    }
}

div.studio-team-thumb img {
    transition: 0.6s;
    height: 400px;
    width: 100%;
    object-fit: cover;
}

@media screen and (min-width:1024px) {
    div.studio-team-thumb img {
        transition: 0.6s;
        height: 400px;
        width: 350px;
        object-fit: cover;
    }
}

.wz-text-who-knows h4 {
    font-family: var(--tp-ff-clash-semibold);
}

/* Services */

.tp-service-title-box {
    padding: 0px 15px 35px 0px;
}

@media screen and (min-width: 1024) {
   .tp-service-title-box {
        padding: 0px 0px 35px 0px;
    } 
}

.tp-service-number {
    padding-left: 0px;
}

/* Comments Form */

p.logged-in-as a {
    color: #fff;
}

.tp-btn-yellow-green.sidebar-btn {
    background-color: #2e4690;
    color: #fff !important;
}

/* Single Portfolio */

.tp-pd-4-thumb-wrap {
    background-color: #2E4690;
}

/* 404 page not found */

.tp-error-content .tp-btn {
    text-transform: none;
}

/* Testimonial */

.tp-testimonial-title-wrap {
    display: none;
}

.tp-testimonial-item .tp-testimonial-text .tp-el-rep-text {
    font-size: 16px;
}

.tp-testimonial-ratting img {
    width: 50px;
}

.tp-testimonial-ratting-icon i svg path {
    fill: #2e4690;
}

.tp-testimonial-bg {
    padding-top: 180px;
    padding-bottom: 180px
}

.tp-testimonial-global img.global-img {
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    text-align: center;
    width: 700px;
}

.tp-testimonial-slider-active {
    padding-top: 0px;
}


/* Faq */

@media (max-width: 767px) {
    .app-faq-wrap.faq-inner-style .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
        width: 80%;
        line-height: 1.1;
    }
}

@media (min-width: 768px) and (orientation: landscape)  {
    .app-faq-wrap.faq-inner-style .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
        width: 90%;
        line-height: 1.1;
    }
}

/* Blog */

.postbox-details-meta .postbox-meta:last-child {
    display: none;
}

/* Cookies Notice */

.cn-text-container {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

#cookie-notice .cn-button:not(.cn-button-custom) {
    display: inline-block;
    border-radius: 30px;
    padding: 8px 24px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: #fff;
    background-color: #2e4690 !important;
}

#cookie-notice .cn-button:not(.cn-button-custom):hover {
    background-color: #fff !important;
    color:#2e4690;
    border:1px solid #2e4690;
}

.cn-close-icon {
    background-color: transparent !important;
}

.cn-close-icon:before, .cn-close-icon:after {
    background-color: rgba(0, 0, 0, 1);
}

@media screen and (max-width:767px) {
    .cn-close-icon {
        position: absolute;
        right: 5px;
        top: 10%;
    }  
}

/* Contacts */

@media screen and (max-width:767px) {
    .tp-contact-location-info-thumb img {
        width: 100%;
    }
}

/* Footer */

.wz-footer {
    background-color: #0e0f11;
}

@media (min-width: 576px) and (max-width: 1023.98px) {
    .e-con-inner {
        max-width: 720px !important;
    }
}


/* Container Principal */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999; /* Z-index alto para ficar acima de tudo */
    background-color: #2e4690; /* A tua cor de fundo */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container interno para alinhar tudo */
.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Espaço entre as bolinhas e o texto */
}

/* 1. ANIMAÇÃO DAS SPANS (PISCAR) */
.loader-spans {
    display: flex;
    gap: 10px;
}

.loader-spans span {
    width: 8px;
    height: 8px;
    background-color: #2E4690;
	border: .5px solid white;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.4s infinite both;
}

/* Atrasos para criar o efeito de onda */
.loader-spans span:nth-child(1) { animation-delay: 0s; }
.loader-spans span:nth-child(2) { animation-delay: 0.2s; }
.loader-spans span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Container para centrar */
.preloader-inner {
    text-align: center;
    width: 100%;
    padding: 0 15px; /* Margem de segurança para o texto não bater nas bordas */
    box-sizing: border-box;
}

/* O TEXTO CINZENTO (FUNDO) */
.loading-text {
    /* Tipografia */
    font-family: 'Inter', sans-serif;
    font-size: 65px; 
    font-weight: 900;
    font-style: italic;
    
    /* Cor de fundo */
    color: rgba(234,236,243, 0.2); 
    
    /* ESTRUTURA */
    position: relative;
    display: inline-block;
    
    /* Alinhamento */
    line-height: 1.1; 
    margin: 0;
    padding: 0;
    
    /* Por defeito (Desktop) não quebra linha */
    white-space: nowrap; 
}

/* O TEXTO BRANCO (PREENCHIMENTO) */
.loading-text::after {
    /* Copia o texto do HTML */
    content: attr(data-text);
    
    /* Posiciona exatamente por cima */
    position: absolute;
    left: 0;
    top: 0;
    
    /* Ocupa SEMPRE o tamanho todo do pai */
    width: 100%;
    height: 100%;
    
    /* CORREÇÃO DO BRANCO PURO */
    color: #ffffff;
    opacity: 1;
    z-index: 5;
    /* Este shadow faz o branco brilhar e cobrir 100% o cinzento */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.4); 

    /* Herança de estrutura para alinhar pixel por pixel */
    line-height: 1.1; 
    white-space: nowrap; /* Igual ao pai */
    
    /* A ANIMAÇÃO (CLIP-PATH em vez de WIDTH) */
    /* Isto recorta o texto da direita para a esquerda */
    /* Se a variavel for 10%, cortamos 90% da direita */
    clip-path: inset(0 calc(100% - var(--progresso, 0%)) 0 0);
    
    /* A Transição Suave (Manteiga) */
    transition: clip-path 10s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

/* Classe que o JS adiciona no fim */
.loading-text.carregado::after {
    transition: clip-path 0.5s ease-out;
}

/* --- AJUSTE MOBILE --- */
@media (max-width: 768px) {
    .loading-text {
        font-size: 35px; /* Tamanho bom para mobile */
        
        /* PERMITIR QUEBRA DE LINHA */
        white-space: normal; /* O texto cai para baixo */
        text-align: center;
    }

    .loading-text::after {
        /* OBRIGATÓRIO: O filho tem de ter as mesmas regras do pai */
        white-space: normal; 
        text-align: center;
    }
}
.tp-image-distortion canvas{
	width:100% !important;
	height: 100% !important;
}

.tp-section-title{
	line-height: 1.1;
}