/* Alison By TeamXcel */

/*  ==========================================================================
    Table of Contets
    ==========================================================================
    
    1.0 Common Styles
    2.0 Header Section
    3.0 Hero Section
    4.0 About Section
    5.0 Feature Section
    6.0 Video Section
    7.0 Screenshot Section
    8.0 Pricing Section
    9.0 Counter Section
    10.0 Testimonial Section
    11.0 Blog Section
    12.0 Download Section
    13.0 Subscribe Section
    14.0 Footer Section
    15.0 Scrool To Top
    
    ==========================================================================
    Alison Portfolio Template Version 0.1
    ========================================================================== */

	@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700|Oswald:400,500,600,700');
	
/*  ==========================================================================
    Common Styles
    ========================================================================== */
*{
	padding: 0;
	margin: 0;
}
body{
    background-color: #050505;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 23px;
    color: #777;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Oswald', sans-serif;
    -webkit-font-smoothing:antialiased;
	color: #333;
}
h1{
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
    color: #fff;
    letter-spacing: -0.05em;
}
h2{
    font-size: 32px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}
h3,h4{
    margin: 0 0 10px;
    font-weight: 600;
    line-height: 1.7;
    color: #fff;
    letter-spacing: -0.01em;
}
h3{
    font-size: 18px;
}
h4{
    font-size: 16px;
}
h5,h6{
    font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
    max-width: 100%;
}
.gif-container {
    width: 100%; /* O contêiner ocupa toda a largura disponível */
    max-width: 1121px; /* Não ultrapassa o tamanho original do GIF */
    margin: 0 auto; /* Centraliza o GIF na tela */
    position: relative;
}

.responsive-gif {
    width: 100%; /* O GIF se ajusta à largura do contêiner */
    max-width: 100%; /* Garante que ele não fique maior que o contêiner */
    height: auto; /* Mantém a proporção correta */
    display: block;
}
.responsive-video {
    width: 100%; /* O vídeo ocupa toda a largura do contêiner */
    max-width: 1121px; /* Não ultrapassa o tamanho original */
    height: auto; /* Mantém a proporção correta */
    display: block;
    margin: 0 auto; /* Centraliza o vídeo na página */
    object-fit: cover; /* Garante que o vídeo preencha corretamente sem distorcer */
}
.blur-effect {
    filter: blur(0px);
    transition: filter 1s ease-out;
}

ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p, li, a, span{}
p{
    font-size: 15px;
    margin-bottom: 15px;
}
a, a:hover{
    text-decoration: none;
}
a:focus{
    outline: 0;
    text-decoration: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
   color: #ddd !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
   color: #ddd !important;  
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #ddd !important;  
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{  
   color: #ddd !important;  
}
button{
    border: none;
	background: none;
}
/* Helper Class */
.padding{
    padding: 100px 0;
}
.no-padding{
    padding: 0;
}
.padding-15{padding: 15px;}
.padding-20{padding: 20px;}

.bg-white{ background-color: #fff; }
.bg-grey{ background-color: #eef3f9;}
.bg-dark{ background-color: #050505!important;}
.bd-top{ border-top: 1px solid #eaeaea;}
.bd-bottom{ border-bottom: 1px solid #eaeaea;}

.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.ml-15{ margin-left: 15px; }
.ml-20{ margin-left: 20px; }
.ml-25{ margin-left: 25px; }
.ml-30{ margin-left: 30px; }
.ml-35{ margin-left: 35px; }
.fz-28{ font-size: 28px; }
.fz-24{ font-size: 24px; }
.fz-22{ font-size: 22px; }
.fz-20{ font-size: 20px; }
.fz-18{ font-size: 18px; }
.fz-16{ font-size: 16px; }
.pd-15{ padding: 15px; }
.pdl-80{ padding-left: 80px; }
.text-black{
    color: #333;
}
.text-white{
    color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
    float: right;
}
.fl-left{
    float: left;
}

.overlay{
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* Preloader Styles */
.loaded .site-preloader-wrap {
    opacity: 0;
    visibility: hidden;
}
.site-preloader-wrap {
    position: fixed;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background: #111;
    top: 0;left: 0
}

.site-preloader-wrap .spinner {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}

.spinner {
  width: 40px;
  height: 40px;

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Button Style */
.btn_group{}
.btn_group a{
    margin: 5px;
}
.default-btn{
    font-family: "Open Sans",sans-serif;
    letter-spacing: 2px;
    background-color: #5e59bf;
    color: #ddd;
    line-height: 45px;
    display: inline-block;
    padding: 0 25px;
    border-radius: 0;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.default-btn:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    -webkit-transform-origin: right center;
       -moz-transform-origin: right center;
        -ms-transform-origin: right center;
            transform-origin: right center;
    -webkit-transform: scale(0, 1);
       -moz-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
         -o-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.default-btn:hover{
    color: #111;
}
.default-btn:hover:before{
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
    -webkit-transform: scale(1, 1);
       -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
         -o-transform: scale(1, 1);
            transform: scale(1, 1);
}
.default-btn.btn_sm{
    line-height: 40px;
    padding: 0 15px;
}

/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
/* ==========================================================================
   Header Section
   ========================================================================== */
.header-section{
    background-color: transparent;
    width: 100%;
    height: 80px;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px 0;
}
.navbar-fixed-top.header-section{
    background-color: #111;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.05);
    height: 70px;
    border-bottom: 0;
    padding: 0;
}
.mainmenu .download-btn{
    background-color: #ef5560;
    box-shadow: 0 10px 35px 2px rgba(239, 85, 96, 0.8);
    border-radius: 30px;
    display: inline-block;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 10px;
    color: #fff;
    font-weight: 600;
    line-height: 25px;
    margin: 14px 0;
}
.navbar-fixed-top .mainmenu .download-btn{
    background-color: #23262e;
    color: #fff;
}
.mainmenu .download-btn:hover{
    border-radius: 0;
    box-shadow: none;
}
.navbar-fixed-top ul.nav > li > a{
    color: #ddd;
}
.navbar-fixed-top ul.nav > li > a:hover,
.navbar-fixed-top ul.nav > li > a:focus,
.navbar-fixed-top ul.nav > li.active > a{
    color: #fff;
}
.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section{
    transition: all 0.3s ease-in-out;
}
.navbar{
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
    padding: 0;
}
.navbar-header {
    padding: 17px 0;
}
.navbar-header .brand{
    font-size: 25px;
    color: #333;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: -1px;
    font-weight: 600;
	margin-left: 13px;
}
.navbar-header .nav-btn{
    padding: 8px;
    border-radius: 1px;
}
.navbar-header .nav-btn .icon-bar{
    background-color: #fff;
    width: 18px;
}
.navbar-fixed-top .navbar-header .nav-btn .icon-bar{
    background-color: #777;
}
.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus{
    opacity: 0.8;
}

/* Nav Menu */
#navbar{
    z-index: 999;
    padding: 0 15px;
}
ul.nav{}
ul.nav > li{}
ul.nav > li > a{
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Open Sans', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 70px;
    z-index: 1;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li > a.active{
    background: none;
    color: #fff;
    opacity: 1;
}
.menu-btn{
    margin-left: 10px;
    margin-top: 10px;
}

/*Mobile Menu */
.menu-wrap{
    position: relative;
}
.slicknav_menu {
    background: none;
    padding: 4px 0;
    display:none;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.slicknav_nav {
    background-color: #fff;
}
.slicknav_btn{
    background-color: transparent;
    margin: 17px 5px 19px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row, 
.slicknav_nav a,
.slicknav_nav a:hover{
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.slicknav_nav .slicknav_row, 
.slicknav_nav a {
    padding: 10px 15px;
    margin: 0;
    color: #777;
}
.slicknav_nav a .caret{
    display: none;
}
.slicknav_nav ul{
    margin: 0;
}
.slicknav_nav ul li a{
    padding-left: 30px;
    font-size: 12px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover{
    background-color: transparent;
    color: #333;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    background-repeat: no-repeat;
    background-position: center top; /* Ajusta para alinhar melhor */
    background-size: cover;
    width: 100%;
    min-height: 100vh; /* Evita corte na imagem */
    position: relative;
	background: url(../img/hero-background.webp) no-repeat center top / cover;
    display: flex;
    align-items: center; /* Mantém centralizado */
    justify-content: center;
    padding-top: 80px; /* Ajusta para compensar a altura do menu */
}
#hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    filter: blur(25px); /* Começa embaçada */
    transition: filter 1s ease-out;
}

.hero-content h1{
    font-size: 80px;
    text-transform: uppercase;
}
.hero-content h5{
    color: #ddd;
    text-transform: uppercase;
}
.hero-content p{
    color: #ddd;
    margin-bottom: 50px;
}
.social-link{}
.social-link li{
    display: inline-block;
    margin: 0 10px;
}
.social-link li a{
    display: inline-block;
    color: #bbb;
    font-size: 18px;
}
.social-link li a:hover{
    color: #fff;
}
.down-arrow a {
    position: absolute;
    width: 40px;
    height: auto;
    left: calc(50% - 25px);
    bottom: 50px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    color: #ddd;
    writing-mode: vertical-rl;
    text-align: center;
    line-height: 40px;
    animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite;
}

/* Down Arrow Animation */
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-20px);}
    60% {-webkit-transform: translateY(-10px);}
}
 
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-20px);}
    60% {-moz-transform: translateY(-10px);}
}
 
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-20px);}
    60% {-o-transform: translateY(-10px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}
/* ==========================================================================
   About Section
   ========================================================================== */
.about-section{}
.about-wrap{
    display: flex;
    align-items: center;
}
.about-content{
    padding-right: 40px;
}
.about-content .default-btn{
    margin-top: 20px;
}
.about-content p{
    color: #bbb;
}
/* ==========================================================================
   Service Section
   ========================================================================== */
.service-section{
    background-image: url(../img/services-background.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.service-section .section-heading p{
    color: #ddd;
}
.service-wrap{
    margin-top: -15px;
    margin-bottom: -15px;
}
.service-content{
    background-color: rgba(255,255,255,0.03);
    padding: 30px 20px;
    transition: all 0.2s ease-in-out;
}
.service-content:hover{
    background-color: rgba(255,255,255,0.05);
    transition: all 0.2s ease-in-out;
}
.service-content i{
    font-size: 40px;
    color: #ff4c4c;
    margin-bottom: 15px;
}
.service-content h3{
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.service-content p{
    color: #bbb;
    font-size: 13px;
}

/* ==========================================================================
   Portfolio Section
   ========================================================================== */
.portfolio-section{
    padding-bottom: 0;
}
.portfolio-section .section-heading p{
    color: #ddd;
}
.portfolio-items .col-lg-4{
    padding: 0;
}
.portfolio-wrap{
    display: flex;
    align-items: center;
}
.portfolio-content{}
.portfolio-thumb img{
    width: 100%;
}
.portfolio-thumb{
    position: relative;
}
.portfolio-box .hover{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    
    opacity: 0;
    visibility: hidden;
    padding: 15px;
}
.portfolio-box .hover div{
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.portfolio-box:hover .hover{
    opacity: 1;
    visibility: visible;
}
/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section{}
.cta-section{
    padding: 130px 0;
}
.cta-section .cta-content h2{
    font-size: 40px;
    margin-bottom: 25px;
}


/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact-section{
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.contact-wrap{
    display: flex;
    align-items: center;
    padding: 120px 0;
}
/*Contact Form*/
.contact-form .form-control{
    border: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    height: 45px;
    background-color: transparent;
    color: #fff;
}
.form-control:hover,
.form-control:focus{
    box-shadow: none;
}
.contact-form .submit-button:hover{ cursor: pointer; }
.contact-form{
    padding-right: 40px;
}
.contact-form .form-control.message{
    height: 120px;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}
/*Google Map*/
#google-map{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
.mapa-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px; /* Ajuste conforme o layout */
    height: 450px;
    cursor: pointer;
}

.mapa-capa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

#mapa-iframe {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer-section{
    background-color: #111;
    display: block;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
.footer-section p{
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
}  

/* ==========================================================================
   Scroll To Top
   ========================================================================== */
#scroll-to-top{
    background-color: #6620A8;
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    line-height: 45px;
    color: #555;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
#scroll-to-top:hover{
    background-color: #282828;
    color: #fff;
}

body {
    cursor: url('/img/icons/cursor_anave.cur'), auto;
}

/* Mantém alinhamento à esquerda para telas maiores */
@media (min-width: 769px) {
    .about-section .about-content {
        text-align: left; /* Alinha à esquerda */
        padding-left: 80px; /* Mantém o espaçamento lateral */
    }

    .gif-container img {
        margin: 0; /* Remove centralização na imagem */
    }
}

/* Alinha ao centro em dispositivos móveis */
@media (max-width: 768px) {
    .about-section .about-content {
        padding-left: 0; /* Remove o padding lateral */
        text-align: center; /* Centraliza o texto */
    }

    .about-section .default-btn {
        margin: 0 auto; /* Centraliza o botão */
        display: inline-block;
    }

    .gif-container img {
        margin: 20px auto;
        display: block; /* Centraliza a imagem */
    }
}

/* Estilo para telas maiores (monitores) */
@media (min-width: 769px) {
    .portfolio-section .section-heading {
        text-align: left; /* Alinha o texto à esquerda */
        padding-left: 80px; /* Mantém o espaçamento lateral */
    }

    .portfolio-section .default-btn {
        margin: 0; /* Remove centralização no botão */
    }
}

/* Estilo para dispositivos móveis */
@media (max-width: 768px) {
    .portfolio-section .section-heading {
        text-align: center; /* Centraliza o texto */
        padding-left: 0; /* Remove o espaçamento lateral */
    }

    .portfolio-section .default-btn {
        margin: 0 auto; /* Centraliza o botão */
        display: inline-block;
    }
}

@media (max-width: 768px) {
    /* Centraliza a seção de serviços */
    .service-section .section-heading {
        padding-left: 0; /* Remove padding lateral */
        text-align: center; /* Centraliza o texto */
    }

    .service-section .default-btn {
        margin: 0 auto; /* Centraliza o botão */
        display: inline-block;
    }

    /* Centraliza os serviços */
    .service-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centraliza os itens */
    }

    .service-content {
        text-align: center; /* Centraliza o conteúdo de cada serviço */
        margin-bottom: 20px; /* Espaçamento entre os serviços */
    }

    .service-content img {
        margin: 0 auto; /* Centraliza a imagem */
        display: block;
    }
}

@media (max-width: 768px) {
    #contact .contact-info {
        text-align: center; /* Centraliza o texto no celular */
    }

    #contact .contact-form {
        text-align: center; /* Centraliza o formulário no celular */
    }

    #contact .form-group {
        display: flex;
        flex-direction: column; /* Organiza os campos do formulário em coluna */
        align-items: center; /* Centraliza os campos */
    }

    #contact .form-group .form-control {
        width: 100%; /* Faz os campos ocuparem toda a largura */
        max-width: 400px; /* Define um limite para a largura */
    }

    #contact .default-btn {
        margin: 0 auto; /* Centraliza o botão */
    }

    iframe {
        margin-top: 20px; /* Adiciona um espaçamento ao mapa no celular */
    }
}