/* Xoom By WowThemez */

/*  ==========================================================================
    Table of contents
    ==========================================================================
    
    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 scroll To Top
    
    ==========================================================================
    Xoom App Landing Page Version 0.1
    ========================================================================== */
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap');
	@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Montserrat:400,600,700,800');
	
/*  ==========================================================================
    Common Styles
    ========================================================================== */
*{
	padding: 0;
	margin: 0;
}
body{
    background-color: #fff;
    font-family: 'Plus Jakarta Sans', 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 23px;
    color: #777;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Plus Jakarta Sans', 'Open Sans', Arial, 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: 26px;
    color: #5a33b4;
    margin: 0 0 10px;
    font-weight: 800;
    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: #333;
    letter-spacing: -0.01em;
}
h3{
    font-size: 17px;
}
h4{
    font-size: 16px;
}
h5,h6{
    font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
    max-width: 100%;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p, li, a, span{}
p{
    font-size: 14px;
    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: 80px 0;
}
.no-padding{
    padding: 0;
}

.bg-white{ background-color: #fff; }
.bg-grey{ background-color: #fafafa;}
.bg-dark{ background-color: #232323;}
.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; }
.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;
}
.display-table{
    width: 100%;
    height: 100%;
    display: table;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}

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

/*Background Gradiant*/
.gradiant_1{
    background: linear-gradient( 135deg, #7044d6 10%, #5a33b4 100%);
}
.gradiant_2{
    background: linear-gradient(315deg, #5a33b4 10%, rgb(142, 63, 153) 100%);
    transition: box-shadow 0.3s, background 0.3s, transform 0.2s;
    box-shadow: 0 6px 24px 0 rgba(90,51,180,0.16);
}
.gradiant_2:hover {
    background: linear-gradient(315deg, #5a33b4 10%, #d3677e 100%);
    box-shadow: 0 12px 32px 0 rgba(90,51,180,0.28), 0 0 0 3px #ffffff30;
    transform: translateY(-2px) scale(1.01);
    cursor: pointer;
  }
.gradiant_3{
    background: linear-gradient(315deg, #5a33b4 10%, rgb(142, 63, 153) 100%);
    transition: box-shadow 0.3s, background 0.3s, transform 0.2s;
    box-shadow: 0 6px 24px 0 rgba(90,51,180,0.16);
}
.gradiant_3:hover {
    background: linear-gradient(315deg, #5a33b4 10%, #d3677e 100%);
    box-shadow: 0 12px 32px 0 rgba(90,51,180,0.28), 0 0 0 3px #ffffff30;
    transform: translateY(-2px) scale(1.01);
    cursor: pointer;
  }
.gradiant_4{
    background: linear-gradient(315deg, #5a33b4 10%, rgb(142, 63, 153) 100%);
    transition: box-shadow 0.3s, background 0.3s, transform 0.2s;
    box-shadow: 0 6px 24px 0 rgba(90,51,180,0.16);
}
.gradiant_4:hover {
    background: linear-gradient(315deg, #5a33b4 10%, #d3677e 100%);
    box-shadow: 0 12px 32px 0 rgba(90,51,180,0.28), 0 0 0 3px #ffffff30;
    transform: translateY(-2px) scale(1.01);
    cursor: pointer;
  }

/* Preloader Styles */
#preloader{
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
    height: 100%;
    width: 100%;
    -webkit-transition: all .5s .5s ease;
    -moz-transition: all .5s .5s ease;
    transition: all .5s .2s ease;
}
.loader{
    position:absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 60px;
    height: 60px;
    display: block;
    margin: auto;
    margin-top: -30px;
}
body.loaded #preloader{
    opacity: 0;
    visibility: hidden;
}
/*Battery*/
.battery{
    width: 28px;
    height: 14px;
    border: 1px #fff solid;
    border-radius: 2px;
    position: relative;
    -webkit-animation: charge 5s linear infinite;
       -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
    top: 40px;
    margin: 0 auto;
}
.battery:after{
    width: 2px;
    height: 7px;
    background-color: #fff;
    border-radius: 0px 1px 1px 0px;
    position: absolute;
    content: "";
    top: 2px;
    right: -4px;
}
@-webkit-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
@-moz-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
@keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
/* Button Style */
.btn_group{}
.btn_group a{
    margin: 5px;
}
.btn_group_left a{
    margin-right: 15px;
    margin-bottom: 15px;
}
.button_1{
    background: linear-gradient(45deg, #f01167 0%, #ee4284 100%);
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    border-radius: 28px;
    line-height: 50px;
    font-weight: 700;
    display: inline-block;
    padding: 0 25px;
    letter-spacing: -0.02em;
}
.button_1:hover{
    box-shadow: 0px 0px 24px 5px rgba(255, 255, 255, 0.3);
    color: #fff;
}
.button_1.button_2{
    background: linear-gradient(45deg, #19d9b4 0%, #92d275 100%);
}
.button_1.button_3{
    background: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);
}
.button_1.price_btn{
    background: #fff;
    color: #736cf5;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.15);
}
.button_1.price_btn:hover{
    box-shadow: none;
}

/* 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: auto;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px 0;
}

.navbar-fixed-top.header_section{
    background: linear-gradient( 135deg, #5a33b4 10%, #7367F0 100%);
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.05);
    border-bottom: 0;
    padding: 0;
}
.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: 'Plus Jakarta Sans', 'Open Sans', Arial, 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: 'Plus Jakarta Sans', 'Open Sans', Arial, sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    letter-spacing: 1px;
    font-size: 12px;
    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 {
    position: relative;
    height: auto;
    padding: 120px 20px 60px;
    overflow: hidden;
    z-index: 1;
    text-align: center;
  }
  .hero_content {
    max-width: 800px;
    margin: 0 auto 40px;
    color: #fff;
    position: relative;
    z-index: 2;
    letter-spacing: 1px; /* Deixa o título mais compacto e moderno */
    word-spacing: 5px;         /* Mais espaço entre palavras */
  }
.hero_section .video_bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
    
}
.hero_mockup {
    position: relative;
    z-index: 3;
    margin-top: -240px; /* Sobe os mascotes sobre a curva */
  }
  
  .hero_mockup img {
    max-width: 950px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transform: translateY(90px); /* Faz o mascote invadir a seção abaixo */
    pointer-events: none;
  }
  
.hero_section:after {
  background: url(../img/wave2.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: -1;
}


/* RESPONSIVO */
@media (max-width: 1000px) {
    .hero_content h1 {
      font-size: 28px;
      margin-top: 10px;
      letter-spacing: 1px; /* Deixa o título mais compacto e moderno */
      word-spacing: 5px;         /* Mais espaço entre palavras */
    }
    .promo_content {
        z-index: -2;
    }
  
    .hero_content p {
      font-size: 16px;
    }
  
    .hero_mockup img {
      max-width: 90%;
      transform: translateY(150px);
    }

  }

/* ==========================================================================
   Promo Section
   ========================================================================== */
.promo_section{    
    letter-spacing: 1px; /* Deixa o título mais compacto e moderno */
    word-spacing: 5px;         /* Mais espaço entre palavras */
    margin-top: 5px;
}
.promo_content{
    z-index: 1;
    color: #fff;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.15);
    letter-spacing: 1px; /* Deixa o título mais compacto e moderno */
    word-spacing: 5px;         /* Mais espaço entre palavras */

}
.promo_content img{
    margin-bottom: 10px;
    z-index: -2;

}
.promo_content h3{
    color: #fff;
    margin-bottom: 5px;

}


/* ==========================================================================
   Feature Section
   ========================================================================== */
.feature_section{
    padding: 100px 0 55px;
}
.feature_list.feature_left{
    text-align: right;
}
.feature_list{
    padding: 80px 0;
}
.feature_list li{
    position: relative;
    margin-bottom: 30px;
}
.feature_list li i{
    color: #fff;
    background: linear-gradient( 135deg, #CE9FFC 10%, #5a33b4 100%);
    width: 50px;
	height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 2px;
    margin-bottom: 8px;
	position: relative;
    z-index: 1;
}
.feature_content h4{
    margin-bottom: 5px;
}

/*Circle Style*/
.feature_list .circle {
    width: 100px;
    height: 2px;
    background-color: #ddd;
    position: absolute;
    left: -110px;
    top: 0%;
    transform: translateY(-50%);
    z-index: 1;
}
.feature_left.feature_list .circle{
    right: -110px;
    left: auto;
}

.feature_list .circle:before{
    background-color: rgba(115, 108, 245, 0.8);
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: -30px;
    top: -15px;
    z-index: 1;
}
.feature_left.feature_list .circle:before,
.feature_left.feature_list .circle:after{
    right: -30px;
    left: auto;
}
.feature_list .circle:after{
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: -30px;
    top: -15px;
    z-index: 1;
    border: 3px solid #736cf5;
    -webkit-animation: circle_zoom 0.8s linear 0.4s infinite;
    animation: circle_zoom 0.8s linear 0.4s infinite;
}

@-webkit-keyframes circle_zoom {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .6
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

@keyframes circle_zoom {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .6
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

/* ==========================================================================
   Video Section
   ========================================================================== */
.video_section{
    background-image: url(../img/video-background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    padding: 150px 0;
    left: 0;
    top: 0;
    z-index: 1;
}
.video_section:before{
    background: linear-gradient( 135deg, #5a33b4 10%, #7367F0 100%);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.9;
    z-index: -1;
}
.video_content{
    position: relative;
}
.video_content h3{
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 20px;
}
.video_content p{
    color: #fff;
    margin: 0;
}
.video_content a{
    background-color: #fff;
    color: #736cf5;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    position: relative;
}
.video_content a:after{
    content: "";
    width: 70px;
    height: 70px;
    border-radius: 70%;
    position: absolute;
    left: 0;
    top: 0;
    color: #736cf5;
    z-index: 1;
    border: 3px solid #fff;
    -webkit-animation: circle_zoom 0.8s linear 0.4s infinite;
    animation: circle_zoom 0.8s linear 0.4s infinite;
}

/* ==========================================================================
   Screenshot Section
   ========================================================================== */
.owl-nav-2 .owl-nav{}
.owl-nav-2 .owl-nav div{
    background: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
	display: block;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
    border-radius: 50%;
	color: #FFF;
	box-shadow: 1px 1px 10px 0px #111;
	font-size: 18px;
	position: absolute;
	left: -20px;
	top: calc(50% - 20px);
	transition: all 0.3s linear;
}
.owl-nav-2 .owl-nav div.owl-next{
    left: auto;
	right: -20px;
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */
.pricing_section{}
.pricing_table{
    border-radius: 10px;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.15);
}
.pricing_head{
    padding: 40px 0;
    border-bottom: 1px solid #ddd;
}
.pricing_head h3{
    color: #fff;
    font-size: 36px;
    font-weight: 800;
}
.pricing_head span{
    font-size: 14px;
    text-transform: uppercase;
}
.pricing_head h5,
.pricing_head h4{
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: -8px;
}
.pricing_head h5{
    margin-top: -10px;
}
.pricing_table ul{
    margin: 20px 0;
}
.pricing_table li{
    color: #fff;
    padding: 5px 0;
}
.pricing_footer{
    padding-bottom: 40px;
}

/* ==========================================================================
   Counter Section
   ========================================================================== */

.counter_section{
	background-image: url(../img/counter-bg.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
    padding: 150px 0;
    position: relative;
    z-index: 1;
}
.counter_section:before{
    background: linear-gradient( 135deg, #8767d3 10%, #5a33b4 100%);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.9;
    z-index: -1;
}
.counters{}
.counters .counter_content{
	display: block;
	text-align: center;
	color: #fff;
}
.counters .counter_content i{
	font-size: 36px;
}
.counters .counter_content h3{
	font-size: 32px;
	margin: 10px 0;
	color: #fff;
    font-weight: 800;
}
.counters .counter_content h4{
    font-size: 14px;
    text-transform: uppercase;
	margin: 0;
}

/* ==========================================================================
   Testimonial Section
   ========================================================================== */
   .testimonial_section{
    letter-spacing: 1px;
    word-spacing: 5px;
    background: var(--branco-puro);
    padding: 40px 0;
}
.testimonial_items.owl-carousel .owl-stage-outer{
    padding-bottom: 20px;
}
.testimonial_item{
    text-align: center;
}
.testimonial_item .client_thumb{
    border-radius: 50%;
    height: 60px;
    width: 60px;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 25px;
}
.testi_content{
    background: linear-gradient(135deg, #7044d6 10%, #5a33b4 100%);
    color: var(--branco-puro);
    font-style:italic;
    padding: 26px 18px 18px 18px;
    border-radius: 18px;
    position: relative;
    box-shadow: 0 8px 32px rgba(123,97,255,0.09);
    margin: 0 auto 16px;
    max-width: 340px;
    transition: box-shadow 0.2s;
}

.testi_content:before{
    background: var(--branco-puro);
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    left: calc(50% - 8px);
    top: -8px;
    transform: rotate(45deg);
    
}
.testimonial_item h4{
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
}
.testimonial_item p{
    color: #ffffff;
}

.testimonial_items .owl-nav {
    position: static; /* ou relative, se preferir */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px; /* Espaço abaixo do card */
    margin-bottom: 8px;
}

.testimonial_items .owl-nav .owl-prev,
.testimonial_items .owl-nav .owl-next {
    position: static;
    transform: none;
    margin: 0 16px;
    box-shadow: 0 4px 24px rgba(123, 97, 255, 0.09);
}

/* ==========================================================================
   Blog Section
   ========================================================================== */
.blog_section{}
.blog_content{}
.blog_top{
    position: relative;
}
.blog_top img{
    border-radius: 2px;
    margin-bottom: 10px;
    width: 100%;
}
.blog_top img:hover{
    opacity: 0.8;
}
.blog_top a{
    background: linear-gradient( 135deg, #8767d3 10%, #5a33b4 100%);
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    padding: 10px 15px;
    position: absolute;
    left: 15px;
    top: 15px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}
.blog_top span{
    display: block;
}
.blog_bottom h3{
    color: #666;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
}
.blog_bottom h3:hover{
    color: #736cf5;
    text-decoration: underline;
}
.blog_bottom .read_more{
    color: #736cf5;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.blog_bottom .read_more:hover{
    text-decoration: underline;
}

.download_section {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #7044d6 10%, #5a33b4 100%);
    letter-spacing: 1px;
    word-spacing: 5px;
    padding: 0; /* padding ficará no .download-flex */
}
.download-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px 40px 16px; /* Margem interna de 16px para não encostar nas bordas */
    box-sizing: border-box;
}
.download_content {
    flex: 1 1 420px;
    max-width: 540px;
    padding: 0 5px;
    z-index: 2;
    margin-bottom: 50px;
}
.download_content h3 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.download_content p {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 10px;
}
.btn_group {
    margin-top: 22px;
}
.download_btn {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    background-color: transparent;
    border: 2px solid #fff;
    padding: 14px 36px;
    border-radius: 30px;
    line-height: 15px;
    transition: background 0.18s, color 0.18s;
    display: inline-block;
}
.download_btn:hover {
    background: #fff;
    color: #5a33b4;
}
.download_mockup {
    flex: 1 1 340px;
    min-width: 250px;
    max-width: 400px;
    height: 370px;
    background-image: url(../img/mockup-3-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;
    margin: 0 5px;
}

/* Onda separadora se quiser manter */
.download_section:after {

    background-repeat: no-repeat;
    background-position: bottom left;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: -1;
}

/* Responsivo: empilha no mobile */
@media (max-width: 900px) {
    .download-flex {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 32px 5vw 32px 5vw;
    }
    .download_content {
        max-width: 100%;
        padding: 0 4px;
        text-align: center;
        margin-bottom: 0px;
    }
    .download_mockup {
        width: 100%;
        min-width: 0;
        height: 220px;
        margin-top: 18px;
        margin-bottom: 5px;
        background-position: center;
    }
}

.btn_group a{
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    background-color: transparent;
    border: 2px solid #fff;
    padding: 14px 30px;
    padding-left: 35px;
    border-radius: 30px;
    line-height: 15px;
}
.btn_group i{
    font-size: 30px;
    position: absolute;
    left: 20px;
    top: 15px;
}
.download_btn span{
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: block;
}
.download_btn:hover span{
    color: #777;
}
.btn_group a:hover{
    background-color: #fff;
    color: #666;
}
.download_btn:hover i{
    color: #736cf5;
}
.btn_group{
    margin-left: -10px;
}

/* ==========================================================================
   Subscribe Section
   ========================================================================== */

.subscribe_wrap{
    display: block;
    text-align: center;
    margin-bottom: 75px;
}
.subscribe_form{
    display: block;
    text-align: center;
    width: 450px;
    margin: 0 auto;
    position: relative;
}
.subscribe_form .form_input{
    background: none;
    display: block;
    color: #777;
    font-size: 14px;
    line-height: 58px;
    padding: 0 15px;
    float: left;
    width: 100%;
    outline: none;
    border: none;
    border: 1px solid #736cf5;
    border-radius: 30px;
    padding-right: 130px;
}
.subscribe_form .button_1{
    position: absolute;
    right: 5px;
    top: 5px;
}
.subscribe_form .button_1:hover{
    cursor: pointer;
}
#subscribe-result{
    display: none;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #f77030;
}
#subscribe-result.subs-result{
    display: block;
}
.subscription-success,
.subscription-error{
    color: #fff;
}
.social_link{
    text-align: center;
    margin-top: 30px;
}
.social_link li{
    display: inline-block;
    margin: 0 5px;
}
.social_link li a{
    background: linear-gradient( 135deg, #8767d3 10%, #5a33b4 100%);
    display: inline-block;
    font-size: 14px;
    color: #fff;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 2px;
}
.social_link li a:hover{
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer_section{
    background: linear-gradient( 135deg, #8767d3 10%, #5a33b4 100%);
    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: linear-gradient( 135deg, #8767d3 10%, #5a33b4 100%);
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    line-height: 45px;
    color: #fff;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
}
#scroll-to-top:hover{
    background-color: #282828;
    color: #fff;
}

.video_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    opacity: 0.5; /* 10% de opacidade preta */
}


#mostrarFormulario {
    background: #ff2e83;
    color: #fff;
    font-weight: bold;
    padding: 20px 20px;         /* MAIOR! */
    font-size: 1.2rem;            /* Bem maior! */
    border: none;
    border-radius: 15px;
    margin: 0 auto 2px auto;
    display: block;
    box-shadow: 0 8px 10px rgba(255,46,131,0.14); /* destaque! */
    transition: background 0.3s, transform 0.13s;
    letter-spacing: 2px;
    cursor: pointer;
}

#mostrarFormulario:hover {
    background: #d2206a;
    transform: scale(1.04); /* efeito sutil */
}


  /* Container do formulário */
.formulario-centralizado {
    max-width: 600px;
    margin: 60px auto 40px;
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #333;
  }
  
  /* Cada pergunta */
  .formulario-centralizado .form-group {
    margin-bottom: 30px;
  }
  
  /* Título das perguntas */
  .formulario-centralizado .form-group label {
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
    font-size: 18px;
    color: #2d2d2d;
  }
  
  /* Radio e seus textos */
  .formulario-centralizado input[type="radio"] {
    accent-color: #ff2677;
    transform: scale(1.3);
    margin-right: 10px;
  }
  
  .formulario-centralizado label input[type="radio"] + span {
    font-weight: 400;
    font-size: 16px;
    color: #555;
  }
  
  /* Botão customizado */
  .formulario-centralizado button {
    background-color: #ff2677;
    color: #fff;
    border: none;
    padding: 14px 32px;
    font-size: 16px;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    margin: 0 auto;
  }
  
  .formulario-centralizado button:hover {
    background-color: #e91e63;
  }

  .question select {
    width: 100%;
    max-width: 250px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 19px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    appearance: none; /* remove setinha padrão em alguns navegadores */
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;
    background-size: 20px;
  }
  
  /* Centralizar o conteúdo da pergunta */
  .question {
    text-align: center;
  }

  .linha-divisoria {
    border: none;
    border-top: 1px solid #ddd;
    margin: 40px auto;
    width: 80%;
  }
  

  .como-funciona {
    text-align: center;
    padding: 40px 20px;
  }

  .swiper {
    width: 100%;
    max-width: 400px;
    margin: auto;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .swiper-slide img {
    width: 280px;
    height: auto;
    object-fit: contain;
  }

  .swiper-slide h3 {
    font-size: 1.2rem;
    margin-top: 20px;
    color: #5D2EFF;
  }

  .swiper-slide p {
    font-size: 1rem;
    color: #333;
  }

  .swiper-pagination {
    margin-top: 20px;
  }

  /* Cupom */
  .input-cupom {
  width: 100%;
  max-width: 320px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1.5px solid #ff2677;
  font-size: 18px;
  background: #fff;
  color: #444444;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(255,46,131,0.06);
  transition: border 0.2s;
  opacity: 1;
}

.input-cupom:focus {
  border: 2px solid #ff2677;
  outline: none;
}

.input-cupom::placeholder {
    color: #a7a7a7 !important;
    opacity: 1 !important;
    font-size: 17px;
  }



.cupom-emoji {
  font-size: 1.25em;
  vertical-align: middle;
  margin-right: 2px;
}

.gooka-footer {
    background: linear-gradient( 135deg, #8767d3 10%, #5a33b4 100%);
    padding: 40px 0 18px 0;
    color: #bbb;
    font-family: 'Plus Jakarta Sans', 'Open Sans', Arial, sans-serif;
    text-align: center;
  }
  
  .gooka-footer-inner {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
  }
  
  .gooka-footer-logo {
    width: 147px;
    height: auto;
    margin-bottom: 8px;
  }
  
  .gooka-footer-desc {
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 5px;
    line-height: 1.5;
  }
  
  .gooka-footer-email {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;
  }
  
  .gooka-footer-email:hover {
    text-decoration: underline;
    color: #d6b7fa;
  }
  
  .gooka-footer-privacy {
    color: #ffffff;
    font-size: 11px;
    margin-top: 2px;
    letter-spacing: 0.1px;
  }
  
  .footer_section{
    background: linear-gradient( 135deg, #8767d3 10%, #5a33b4 100%);
    display: block;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
.footer_section p{
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
} 

.kicker{font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#7c5cfc; margin:0 0 6px;}
.lead{font-size:18px; color:#475467;}
.badge-soon{display:inline-block; margin-left:8px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; color:#5537ff; background:#efeaff; vertical-align:middle;}
.helper-note{color:#667085; display:block; margin-bottom:10px;}


.pillar-legend{font-size:14px; font-weight:700; color:#7c5cfc; margin:0 0 8px}
.hint{color:#667085; margin:.25rem 0 .5rem}