/*==================================================
GOOGLE FONTS
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');



/*==================================================
RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'DM Sans',sans-serif;

    font-size:16px;

    line-height:1.7;

    color:#1f2937;

    background:#F8F6F2;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:.35s;

}

ul{

    margin:0;

    padding:0;

    list-style:none;

}



/*==================================================
VARIABLES
==================================================*/

:root{

    --primary:#4A49F5;

    --primary-hover:#3938D7;

    --secondary:#121826;

    --background:#F8F6F2;

    --surface:#FFFFFF;

    --text:#1F2937;

    --text-light:#6B7280;

    --border:#E5E7EB;

    --success:#22C55E;

    --radius:22px;

    --radius-sm:12px;

    --shadow:

        0 25px 60px rgba(25,40,80,.10);

    --transition:.35s ease;

}



/*==================================================
COMMON
==================================================*/

section{

    position:relative;

    padding:110px 0;

}

.container{

    max-width:1240px;

}

h1,
h2,
h3,
h4,
h5{

    color:var(--secondary);

    font-family:'Plus Jakarta Sans',sans-serif;

    font-weight:800;

}

p{

    color:var(--text-light);

}



/*==================================================
BUTTONS
==================================================*/

.btn-primary-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 30px;

    border-radius:999px;

    background:var(--primary);

    color:#FFF;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary-custom:hover{

    background:var(--primary-hover);

    color:#FFF;

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(74,73,245,.28);

}

.btn-outline-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 30px;

    border-radius:999px;

    border:2px solid var(--border);

    color:var(--secondary);

    font-weight:700;

    transition:var(--transition);

}

.btn-outline-custom:hover{

    border-color:var(--primary);

    color:var(--primary);

}


/*==================================================
HEADER
==================================================*/

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    transition:.35s;

}

.site-header.scrolled{

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}



/*==================================================
TOPBAR
==================================================*/

.topbar{

    background:var(--primary);

    color:#FFF;

    height:42px;

    font-size:.84rem;

    font-weight:500;

}

.topbar-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:42px;

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:28px;

}

.topbar-left{

    gap:10px;

}

.topbar-right a{

    display:flex;

    align-items:center;

    gap:8px;

    color:#FFF;

    transition:.35s;

}

.topbar-right a:hover{

    opacity:.8;

}

.topbar i{

    font-size:.9rem;

}



/*==================================================
HEADER MAIN
==================================================*/

.header-main{

    background:#FFF;

    transition:.35s;

}

.site-header.scrolled .header-main{

    backdrop-filter:blur(12px);

    background:rgba(255,255,255,.96);

}



/*==================================================
NAVBAR
==================================================*/

.navbar{

    min-height:100px;

    padding:0;

}

.navbar-brand img{

    height:62px;

    width:auto;

}

.navbar-nav{

    gap:34px;

}

.nav-link{

    position:relative;

    padding:0 !important;

    font-size:.96rem;

    font-weight:600;

    color:var(--secondary) !important;

    transition:.35s;

}

.nav-link:hover{

    color:var(--primary) !important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.nav-link:hover::after,
.nav-link.active::after{

    width:100%;

}

.nav-link.active{

    color:var(--primary) !important;

}



/*==================================================
HEADER ACTIONS
==================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

}



/*==================================================
MOBILE BUTTON
==================================================*/

.navbar-toggler{

    border:none;

    box-shadow:none !important;

    padding:0;

}

.navbar-toggler i{

    font-size:2rem;

    color:var(--secondary);

}

.navbar-toggler:focus{

    box-shadow:none;

}



/*==================================================
RESPONSIVO HEADER
==================================================*/

@media(max-width:991px){

    .header-main{

        padding:10px 0;

    }

    .navbar{

        min-height:auto;

    }

    .navbar-collapse{

        margin-top:20px;

        padding:25px;

        border-radius:18px;

        background:#FFF;

        box-shadow:0 20px 50px rgba(0,0,0,.08);

    }

    .navbar-nav{

        gap:18px;

    }

    .nav-link{

        padding:10px 0 !important;

    }

    .header-actions{

        flex-direction:column;

        align-items:stretch;

        margin-top:25px;

    }

    .header-actions a{

        width:100%;

        justify-content:center;

    }

}



/*==================================================
HERO
==================================================*/
/*==================================================
HERO
==================================================*/

.hero{

    position:relative;

    overflow:hidden;

    padding:170px 0 120px;

    background:#f8f6f2;

}



/*==================================================
BACKGROUND
==================================================*/

.hero-grid{

    position:absolute;

    inset:0;

    z-index:1;

    opacity:.55;

    background-image:

        linear-gradient(rgba(60,72,255,.05) 1px,transparent 1px),

        linear-gradient(90deg,rgba(60,72,255,.05) 1px,transparent 1px);

    background-size:42px 42px;

}

.hero-gradient{

    position:absolute;

    top:-250px;

    right:-180px;

    width:760px;

    height:760px;

    border-radius:50%;

    background:rgba(76,82,255,.12);

    filter:blur(130px);

    z-index:1;

}



/*==================================================
CONTAINER
==================================================*/

.hero .container{

    position:relative;

    z-index:2;

}



/*==================================================
CONTENT
==================================================*/

.hero-content{

    max-width:560px;

    padding-top:10px;

}



/*==================================================
BADGE
==================================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border:1px solid rgba(76,82,255,.20);

    border-radius:999px;

    background:#FFF;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

}



/*==================================================
TITLE
==================================================*/

.hero h1{

    margin:34px 0 30px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:4.25rem;

    font-weight:800;

    line-height:1.02;

    letter-spacing:-3px;

    color:#181d33;

}

.hero h1 span{

    color:var(--primary);

}



/*==================================================
TEXT
==================================================*/

.hero p{

    max-width:520px;

    margin:0;

    font-size:1.16rem;

    line-height:1.85;

    color:#6d7385;

}



/*==================================================
BUTTONS
==================================================*/

.hero-actions{

    display:flex;

    align-items:center;

    margin-top:42px;

}

.hero-actions .btn-primary-custom{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:18px 34px;

    border-radius:999px;

    font-size:1rem;

    font-weight:700;

}

.hero-actions i{

    font-size:1rem;

}



/*==================================================
RATING
==================================================*/

.hero-rating{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:54px;

}



/*==================================================
PEOPLE
==================================================*/

.hero-people{

    display:flex;

    align-items:center;

}

.hero-people img{

    width:46px;

    height:46px;

    margin-left:-14px;

    border-radius:50%;

    border:3px solid #FFF;

    object-fit:cover;

    object-position:top;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.hero-people img:first-child{

    margin-left:0;

}



/*==================================================
REVIEW
==================================================*/

.hero-review{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.hero-stars{

    display:flex;

    gap:4px;

}

.hero-stars i{

    color:#FDBA12;

    font-size:.82rem;

}

.hero-review small{

    font-size:.84rem;

    color:#7b8193;

}
/*==================================================
HERO GALLERY
==================================================*/

.hero-gallery{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    grid-template-rows:auto auto;

    gap:24px;

    max-width:520px;

    margin-left:auto;

    align-items:start;

}



/*==================================================
ITEM
==================================================*/

.gallery-item{

    position:relative;

    transition:.35s;

}

.gallery-item:hover{

    transform:translateY(-6px);

}



/*==================================================
IMAGE
==================================================*/

.gallery-image{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#FFF;

    box-shadow:
        0 25px 60px rgba(0,0,0,.08);

}

.gallery-image img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:top;

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.05);

}



/*==================================================
IMAGE 01
==================================================*/

.gallery-item-1{

    z-index:3;

}

.gallery-item-1 .gallery-image{

    height:430px;

}



/*==================================================
IMAGE 02
==================================================*/

.gallery-item-2{

    margin-top:58px;

}

.gallery-item-2 .gallery-image{

    height:385px;

}



/*==================================================
IMAGE 03
==================================================*/

.gallery-item-3{

    margin-top:-34px;

}

.gallery-item-3 .gallery-image{

    height:270px;

}



/*==================================================
LABELS
==================================================*/

.hero-label{

    position:absolute;

    top:16px;

    right:-14px;

    padding:12px 22px;

    border-radius:18px;

    background:#FFF;

    color:#1d2340;

    font-size:.80rem;

    font-weight:700;

    white-space:nowrap;

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);

    z-index:20;

}

.hero-label.secondary{

    top:auto;

    right:auto;

    left:-10px;

    bottom:18px;

    background:var(--primary);

    color:#FFF;

    transform:rotate(-6deg);

}



/*==================================================
CARD
==================================================*/

.hero-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:270px;

    padding:34px;

    border-radius:28px;

    background:#FFF;

    box-shadow:
        0 25px 60px rgba(0,0,0,.08);

}

.hero-card span{

    display:block;

    margin-bottom:18px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3.7rem;

    font-weight:800;

    line-height:1;

    color:var(--primary);

}

.hero-card h3{

    margin-bottom:10px;

    font-size:1.12rem;

    font-weight:800;

}

.hero-card p{

    margin:0;

    font-size:.90rem;

    line-height:1.7;

}



/*==================================================
HOVER
==================================================*/

.hero-card:hover{

    transform:translateY(-6px);

    transition:.35s;

}



/*==================================================
FLOAT
==================================================*/

.gallery-item-1{

    animation:heroFloat1 8s ease-in-out infinite;

}

.gallery-item-2{

    animation:heroFloat2 9s ease-in-out infinite;

}

.gallery-item-3{

    animation:heroFloat3 7s ease-in-out infinite;

}

.hero-card{

    animation:heroFloat4 10s ease-in-out infinite;

}



/*==================================================
KEYFRAMES
==================================================*/

@keyframes heroFloat1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes heroFloat2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

@keyframes heroFloat3{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes heroFloat4{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}





/*==================================================
ACTIVE MENU
==================================================*/

.navbar-nav a.active{

    color:var(--primary);

}

.navbar-nav a.active::after{

    width:100%;

}



/*==================================================
FADE ANIMATION
==================================================*/

.hero-content,
.hero-gallery,
.section-heading,
.card,
.service-card{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}

.hero-content.show,
.hero-gallery.show,
.section-heading.show,
.card.show,
.service-card.show{

    opacity:1;

    transform:none;

}



/*==================================================
SERVICES
==================================================*/

.services{

    padding:120px 0;

    background:#F8F6F2;

}



/*==================================================
HEADER
==================================================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:60px;

    margin-bottom:70px;

}

.section-title{

    max-width:700px;

}

.section-title h2{

    margin-top:24px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3.2rem;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--secondary);

}

.section-title h2 span{

    color:var(--primary);

}

.section-description{

    max-width:360px;

}

.section-description p{

    margin:0;

    font-size:1rem;

    line-height:1.8;

}



/*==================================================
LIST
==================================================*/

.services-list{

    overflow:hidden;

    border:1px solid rgba(0,0,0,.06);

    border-radius:36px;

    background:#FFF;

    box-shadow:

        0 25px 60px rgba(0,0,0,.05);

}



/*==================================================
ITEM
==================================================*/

.service-item{

    display:grid;

    grid-template-columns:220px 1fr auto;

    align-items:center;

    gap:42px;

    padding:34px;

    transition:.35s;

}

.service-item+.service-item{

    border-top:1px solid rgba(0,0,0,.08);

}

.service-item:hover{

    background:#FCFCFD;

}



/*==================================================
IMAGE
==================================================*/

.service-image{

    overflow:hidden;

    border-radius:26px;

}

.service-image img{

    width:100%;

    height:170px;

    display:block;

    object-fit:cover;

    object-position:top;

    transition:.45s;

}

.service-item:hover .service-image img{

    transform:scale(1.05);

}



/*==================================================
CONTENT
==================================================*/

.service-content{

    display:flex;

    align-items:flex-start;

    gap:26px;

}

.service-number{

    flex-shrink:0;

    margin-top:8px;

    font-size:.9rem;

    font-weight:800;

    color:var(--primary);

}

.service-content h3{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

    font-size:2rem;

    font-weight:800;

}

.service-content p{

    max-width:560px;

    margin:0;

    font-size:1rem;

    line-height:1.8;

}



/*==================================================
ICON
==================================================*/

.service-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    border-radius:18px;

    background:rgba(74,73,245,.08);

    color:var(--primary);

    transition:.35s;

}

.service-icon i{

    font-size:1.35rem;

}

.service-item:hover .service-icon{

    background:var(--primary);

    color:#FFF;

}



/*==================================================
BUTTON
==================================================*/

.service-action{

    display:flex;

    justify-content:flex-end;

}

.service-action .btn-outline-custom{

    display:flex;

    align-items:center;

    gap:10px;

    padding:16px 28px;

    border-radius:999px;

    white-space:nowrap;

}

.service-item:hover .btn-outline-custom{

    background:var(--primary);

    color:#FFF;

    border-color:var(--primary);

}




/*==================================================
ABOUT
==================================================*/

.about{

    padding:0;

    background:#FFFFFF;

    overflow:hidden;

}



/*==================================================
CONTENT
==================================================*/

.about-content{

    max-width:720px;

    margin-left:auto;

    padding:110px 60px;

}

.about-content h2{

    margin:28px 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3.2rem;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--secondary);

}

.about-content h2 span{

    color:var(--primary);

}

.about-content>p{

    max-width:560px;

    margin-bottom:50px;

    font-size:1.05rem;

    line-height:1.9;

}



/*==================================================
LIST
==================================================*/

.about-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px 35px;

    margin-bottom:50px;

}

.about-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    font-size:.95rem;

    font-weight:600;

    color:var(--secondary);

}

.about-item i{

    margin-top:2px;

    color:var(--primary);

    font-size:1.1rem;

}



/*==================================================
BUTTON
==================================================*/

.about-content .btn-primary-custom{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:18px 34px;

}



/*==================================================
IMAGE
==================================================*/

.about-image{

    position:relative;

    height:100%;

    min-height:760px;

    overflow:hidden;

}

.about-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}



/*==================================================
CARD
==================================================*/

.about-card{

    position:absolute;

    left:50px;

    right:50px;

    bottom:50px;

    display:flex;

    align-items:center;

    gap:24px;

    padding:26px 34px;

    border-radius:999px;

    background:var(--primary);

    color:#FFF;

    box-shadow:

        0 30px 70px rgba(74,73,245,.30);

}

.about-number{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:72px;

    height:72px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:1.8rem;

    font-weight:800;

}

.about-card h4{

    margin:0 0 6px;

    color:#FFF;

    font-size:1.2rem;

    font-weight:700;

}

.about-card p{

    margin:0;

    color:rgba(255,255,255,.85);

    font-size:.9rem;

}



/*==================================================
HOVER
==================================================*/

.about-image img{

    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.05);

}



/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:991px){

    .about-content{

        padding:80px 35px;

    }

    .about-content h2{

        font-size:2.5rem;

    }

    .about-list{

        grid-template-columns:1fr;

        gap:18px;

    }

    .about-image{

        min-height:500px;

    }

    .about-card{

        left:20px;

        right:20px;

        bottom:20px;

        padding:20px;

        border-radius:24px;

    }

}




/*==================================================
INDICATORS
==================================================*/

.indicators{

    padding:120px 0;

    background:#FFF;

}



/*==================================================
HEADER
==================================================*/

.section-center{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}

.section-center h2{

    margin-top:26px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3rem;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--secondary);

}

.section-center h2 span{

    color:var(--primary);

}



/*==================================================
LIST
==================================================*/

.indicators-list{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:55px;

    margin-top:70px;

    padding-top:45px;

    border-top:1px solid rgba(0,0,0,.08);

}



/*==================================================
ITEM
==================================================*/

.indicator-item{

    transition:.35s;

}

.indicator-item:hover{

    transform:translateY(-6px);

}



/*==================================================
HEADER
==================================================*/

.indicator-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:30px;

}

.indicator-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border:1px solid rgba(0,0,0,.10);

    border-radius:50%;

    font-size:.8rem;

    font-weight:700;

    color:#7C8596;

}

.indicator-header h3{

    margin:0;

    font-size:1.15rem;

    font-weight:700;

}



/*==================================================
VALUE
==================================================*/

.indicator-value{

    display:block;

    margin-bottom:24px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3.6rem;

    font-weight:800;

    line-height:1;

    color:var(--primary);

}



/*==================================================
TEXT
==================================================*/

.indicator-item p{

    margin:0;

    font-size:.95rem;

    line-height:1.9;

    color:var(--text-light);

}



/*==================================================
PROCESS
==================================================*/

.process{

    padding:120px 0;

    background:#F8F6F2;

}

.process h2{

    margin:28px 0 45px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3rem;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--secondary);

}

.process h2 span{

    color:var(--primary);

}



/*==================================================
IMAGE
==================================================*/

.process-image{

    overflow:hidden;

    border-radius:32px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.08);

}

.process-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    transition:.5s;

}

.process-image:hover img{

    transform:scale(1.05);

}



/*==================================================
STEP
==================================================*/

.step-item{

    height:100%;

    padding:42px;

    border:1px solid rgba(0,0,0,.08);

    border-radius:32px;

    background:#FFF;

    transition:.35s;

    box-shadow:

        0 15px 40px rgba(0,0,0,.04);

}

.step-item:hover{

    transform:translateY(-8px);

    border-color:rgba(74,73,245,.25);

}



/*==================================================
NUMBER
==================================================*/

.step-number{

    display:block;

    margin-bottom:28px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3.3rem;

    font-weight:800;

    line-height:1;

    color:rgba(74,73,245,.18);

}



/*==================================================
TITLE
==================================================*/

.step-item h3{

    margin-bottom:18px;

    font-size:1.35rem;

    font-weight:700;

    color:var(--secondary);

}



/*==================================================
TEXT
==================================================*/

.step-item p{

    margin:0;

    font-size:.98rem;

    line-height:1.9;

}



/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:991px){

    .process{

        padding:90px 0;

    }

    .process h2{

        font-size:2.5rem;

    }

    .process-image img{

        height:380px;

    }

    .step-item{

        padding:32px;

    }

}



/*==================================================
CTA
==================================================*/

.cta-section{

    padding:80px 0 120px;

    background:#F8F6F2;

}



/*==================================================
BOX
==================================================*/

.cta-box{

    position:relative;

    overflow:hidden;

    padding:60px 70px;

    border-radius:34px;

    background:var(--primary);

    color:#FFF;

}



/*==================================================
BACKGROUND
==================================================*/

.cta-grid{

    position:absolute;

    inset:0;

    opacity:.10;

    background-image:

        linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);

    background-size:42px 42px;

}

.cta-circle{

    position:absolute;

    top:-170px;

    right:-120px;

    width:330px;

    height:330px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    pointer-events:none;

}



/*==================================================
CONTENT
==================================================*/

.cta-content{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}



/*==================================================
LEFT
==================================================*/

.cta-left{

    max-width:650px;

}

.cta-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.25);

    font-size:.82rem;

    font-weight:700;

    color:#FFF;

}

.cta-left h2{

    margin:24px 0 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3rem;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:#FFF;

}



/*==================================================
RIGHT
==================================================*/

.cta-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:16px;

    flex-shrink:0;

}



/*==================================================
BUTTON LIGHT
==================================================*/

.btn-cta-light{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:170px;

    padding:18px 34px;

    border-radius:999px;

    background:#FFF;

    color:var(--primary);

    font-weight:700;

    box-shadow:

        0 18px 40px rgba(0,0,0,.15);

    transition:.35s;

}

.btn-cta-light:hover{

    transform:translateY(-4px);

    color:var(--primary);

    box-shadow:

        0 25px 55px rgba(0,0,0,.20);

}



/*==================================================
BUTTON OUTLINE
==================================================*/

.btn-cta-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:170px;

    padding:18px 34px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.30);

    color:#FFF;

    font-weight:700;

    transition:.35s;

}

.btn-cta-outline:hover{

    background:rgba(255,255,255,.10);

    color:#FFF;

}



/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:991px){

    .cta-box{

        padding:50px 35px;

    }

    .cta-content{

        flex-direction:column;

        align-items:flex-start;

        gap:35px;

    }

    .cta-left{

        max-width:100%;

    }

    .cta-left h2{

        font-size:2.4rem;

    }

    .cta-right{

        width:100%;

        justify-content:flex-start;

        flex-wrap:wrap;

    }

    .cta-circle{

        width:240px;

        height:240px;

        top:-120px;

        right:-80px;

    }

}

@media(max-width:576px){

    .cta-left h2{

        font-size:2rem;

    }

    .btn-cta-light,

    .btn-cta-outline{

        width:100%;

    }

}


/*==================================================
CONTACT
==================================================*/

.contact{

    padding:120px 0;

    background:#FFF;

}

.contact h2{

    margin:28px 0;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:3rem;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--secondary);

}

.contact h2 span{

    color:var(--primary);

}

.contact> .container p,
.contact .col-lg-5>p{

    max-width:520px;

    font-size:1.05rem;

    line-height:1.9;

    color:var(--text-light);

}



/*==================================================
BUTTONS
==================================================*/

.contact-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:45px;

}

.contact-buttons .btn-primary-custom{

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.contact-buttons .btn-outline-custom{

    padding:18px 34px;

}



/*==================================================
CARDS
==================================================*/

.contact-card{

    height:100%;

    padding:34px;

    border:1px solid rgba(0,0,0,.07);

    border-radius:28px;

    background:#F8F6F2;

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-6px);

    border-color:rgba(74,73,245,.20);

    background:#FFF;

    box-shadow:

        0 20px 45px rgba(15,23,42,.08);

}



/*==================================================
ICON
==================================================*/

.contact-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    margin-bottom:22px;

    border-radius:18px;

    background:rgba(74,73,245,.10);

    color:var(--primary);

    font-size:1.2rem;

}



/*==================================================
LABEL
==================================================*/

.contact-card small{

    display:block;

    margin-bottom:12px;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#9097A6;

}



/*==================================================
LINK
==================================================*/

.contact-card a{

    display:block;

    color:var(--secondary);

    font-size:1rem;

    font-weight:600;

    line-height:1.8;

    transition:.35s;

}

.contact-card a:hover{

    color:var(--primary);

}



/*==================================================
TEXT
==================================================*/

.contact-card p{

    margin:0;

    color:var(--secondary);

    font-size:.95rem;

    line-height:1.8;

}



/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:991px){

    .contact{

        padding:90px 0;

    }

    .contact h2{

        font-size:2.4rem;

    }

    .contact-buttons{

        margin-bottom:15px;

    }

}

@media(max-width:767px){

    .contact-buttons{

        flex-direction:column;

    }

    .contact-buttons a{

        width:100%;

        justify-content:center;

    }

    .contact-card{

        padding:28px;

    }

}






/*==================================================
FOOTER
==================================================*/

.footer{

    padding:90px 0 35px;

    background:#F8F6F2;

    border-top:1px solid #ECECEC;

}

.footer-logo{

    display:inline-block;

    margin-bottom:28px;

}

.footer-logo img{

    height:62px;

}

.footer-about{

    max-width:420px;

    margin-bottom:35px;

    color:var(--text-light);

}

.footer h4{

    margin-bottom:28px;

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#A2A2A2;

}

.footer-menu{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-menu a{

    color:var(--secondary);

    transition:.3s;

}

.footer-menu a:hover{

    color:var(--primary);

    padding-left:8px;

}

.footer-social{

    display:flex;

    gap:14px;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#F3F4F6;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--secondary);

    transition:.35s;

}

.footer-social a:hover{

    background:var(--primary);

    color:#FFF;

    transform:translateY(-4px);

}

.footer-bottom{

    margin-top:70px;

    padding-top:30px;

    border-top:1px solid #ECECEC;

    text-align:center;

}

.footer-bottom p{

    margin:0;

    color:#8A8A8A;

    font-size:.95rem;

}








/*==================================================
RESPONSIVO
1199px
==================================================*/

@media(max-width:1199px){

    section{

        padding:90px 0;

    }

    .container{

        max-width:960px;

    }

    /*-----------------------------------
    HERO
    -----------------------------------*/

    .hero{

        padding:155px 0 90px;

    }

    .hero h1{

        font-size:3.5rem;

        letter-spacing:-2px;

    }

    .hero-gallery{

        max-width:470px;

    }

    .gallery-item-1 .gallery-image{

        height:380px;

    }

    .gallery-item-2 .gallery-image{

        height:340px;

    }

    .gallery-item-3 .gallery-image{

        height:240px;

    }

    .hero-card{

        height:240px;

        padding:28px;

    }

    /*-----------------------------------
    SERVICES
    -----------------------------------*/

    .service-item{

        grid-template-columns:180px 1fr auto;

        gap:30px;

        padding:28px;

    }

    .service-image img{

        height:145px;

    }

    .service-content h3{

        font-size:1.7rem;

    }

    /*-----------------------------------
    ABOUT
    -----------------------------------*/

    .about-content{

        padding:90px 45px;

    }

    .about-content h2{

        font-size:2.8rem;

    }

    .about-image{

        min-height:680px;

    }

    /*-----------------------------------
    INDICATORS
    -----------------------------------*/

    .indicators-list{

        gap:35px;

    }

    .indicator-value{

        font-size:3rem;

    }

    /*-----------------------------------
    PROCESS
    -----------------------------------*/

    .process-image img{

        height:460px;

    }

    .step-item{

        padding:34px;

    }

}
/*==================================================
RESPONSIVO
991px
==================================================*/

@media(max-width:991px){

    section{

        padding:80px 0;

    }

    .container{

        max-width:720px;

    }

    /*-----------------------------------
    HERO
    -----------------------------------*/

    .hero{

        padding:145px 0 80px;

        text-align:center;

    }

    .hero-content{

        max-width:100%;

        margin:0 auto 60px;

    }

    .hero h1{

        font-size:3rem;

        letter-spacing:-1px;

    }

    .hero p{

        max-width:620px;

        margin:auto;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-rating{

        justify-content:center;

    }

    .hero-gallery{

        max-width:560px;

        margin:0 auto;

    }

    .gallery-item-1 .gallery-image{

        height:360px;

    }

    .gallery-item-2 .gallery-image{

        height:320px;

    }

    .gallery-item-3 .gallery-image{

        height:230px;

    }

    .hero-card{

        height:230px;

    }

    /*-----------------------------------
    SECTION HEADERS
    -----------------------------------*/

    .section-header{

        flex-direction:column;

        align-items:flex-start;

        gap:25px;

        margin-bottom:45px;

    }

    .section-title,

    .section-description{

        max-width:100%;

    }

    .section-title h2{

        font-size:2.5rem;

    }

    .section-center h2{

        font-size:2.5rem;

    }

    /*-----------------------------------
    SERVICES
    -----------------------------------*/

    .service-item{

        grid-template-columns:1fr;

        gap:24px;

        text-align:center;

    }

    .service-image{

        max-width:300px;

        margin:auto;

    }

    .service-image img{

        height:180px;

    }

    .service-content{

        flex-direction:column;

        align-items:center;

        gap:18px;

    }

    .service-number{

        margin-top:0;

    }

    .service-content p{

        max-width:100%;

    }

    .service-action{

        justify-content:center;

    }

    /*-----------------------------------
    ABOUT
    -----------------------------------*/

    .about{

        padding:80px 0;

    }

    .about-content{

        max-width:100%;

        padding:0 15px 60px;

    }

    .about-content h2{

        font-size:2.5rem;

    }

    .about-image{

        min-height:520px;

    }

    /*-----------------------------------
    INDICATORS
    -----------------------------------*/

    .indicators-list{

        grid-template-columns:repeat(2,1fr);

        gap:35px;

    }

    /*-----------------------------------
    PROCESS
    -----------------------------------*/

    .process h2{

        font-size:2.5rem;

    }

    .process-image{

        margin-bottom:35px;

    }

    .process-image img{

        height:420px;

    }

    .step-item{

        padding:30px;

    }

    /*-----------------------------------
    CTA
    -----------------------------------*/

    .cta-box{

        padding:50px 40px;

    }

    .cta-content{

        flex-direction:column;

        align-items:flex-start;

        gap:35px;

    }

    .cta-left{

        max-width:100%;

    }

    .cta-left h2{

        font-size:2.4rem;

    }

    .cta-right{

        justify-content:flex-start;

        flex-wrap:wrap;

    }

    /*-----------------------------------
    CONTACT
    -----------------------------------*/

    .contact{

        text-align:center;

    }

    .contact .col-lg-5{

        margin-bottom:40px;

    }

    .contact .col-lg-5 p{

        max-width:100%;

    }

    .contact-buttons{

        justify-content:center;

    }

    /*-----------------------------------
    FOOTER
    -----------------------------------*/

    .footer{

        text-align:center;

    }

    .footer-about{

        margin:0 auto 35px;

    }

    .footer-social{

        justify-content:center;

        margin-bottom:40px;

    }

    .footer h4{

        margin-top:30px;

    }

    .footer-menu{

        align-items:center;

    }

}

/*==================================================
RESPONSIVO
767px
==================================================*/

@media(max-width:767px){

    section{

        padding:70px 0;

    }

    .container{

        padding-left:22px;

        padding-right:22px;

    }

    /*-----------------------------------
    HEADER
    -----------------------------------*/

    .header-top{

        display:none;

    }

    .site-header{

        top:0;

    }

    .navbar-brand img{

        height:42px;

    }

    /*-----------------------------------
    HERO
    -----------------------------------*/

    .hero{

        padding:120px 0 70px;

    }

    .hero h1{

        font-size:2.45rem;

        line-height:1.08;

        letter-spacing:-1px;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-actions{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }

    .hero-actions .btn-primary-custom,

    .hero-actions .btn-outline-custom{

        width:100%;

        justify-content:center;

    }

    .hero-rating{

        flex-direction:column;

        gap:18px;

    }

    .hero-gallery{

        grid-template-columns:1fr;

        max-width:360px;

    }

    .gallery-item{

        margin:0 !important;

    }

    .gallery-item-1 .gallery-image,

    .gallery-item-2 .gallery-image,

    .gallery-item-3 .gallery-image{

        height:380px;

    }

    .hero-card{

        height:auto;

        min-height:220px;

    }

    .hero-label{

        font-size:.72rem;

        padding:10px 16px;

    }

    /*-----------------------------------
    TITLES
    -----------------------------------*/

    .section-title h2,

    .section-center h2,

    .about-content h2,

    .process h2,

    .cta-left h2,

    .contact-content h2{

        font-size:2rem;

        line-height:1.15;

    }

    /*-----------------------------------
    SERVICES
    -----------------------------------*/

    .service-item{

        padding:24px;

    }

    .service-image{

        max-width:100%;

    }

    .service-image img{

        height:200px;

    }

    .service-content h3{

        font-size:1.45rem;

    }

    .service-button{

        width:100%;

        justify-content:center;

    }

    /*-----------------------------------
    ABOUT
    -----------------------------------*/

    .about-content{

        padding-bottom:50px;

    }

    .about-list{

        grid-template-columns:1fr;

        gap:15px;

    }

    .about-image{

        min-height:420px;

    }

    .about-image img{

        height:420px;

    }

    .about-highlight{

        left:20px;

        right:20px;

        bottom:20px;

        padding:18px;

    }

    /*-----------------------------------
    INDICATORS
    -----------------------------------*/

    .indicators-list{

        grid-template-columns:1fr;

        gap:30px;

    }

    /*-----------------------------------
    PROCESS
    -----------------------------------*/

    .process-image img{

        height:320px;

    }

    .steps-grid{

        grid-template-columns:1fr;

    }

    .step-item{

        margin-top:0 !important;

    }

    /*-----------------------------------
    CTA
    -----------------------------------*/

    .cta-box{

        padding:45px 30px;

    }

    .cta-left h2{

        font-size:2rem;

    }

    .cta-right{

        flex-direction:column;

        align-items:stretch;

    }

    .cta-right .btn{

        width:100%;

    }

    /*-----------------------------------
    CONTACT
    -----------------------------------*/

    .contact-buttons{

        flex-direction:column;

    }

    .contact-buttons .btn{

        width:100%;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

}



/*==================================================
RESPONSIVO
576px
==================================================*/

@media(max-width:576px){

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    .hero{

        padding:105px 0 60px;

    }

    .hero-badge,

    .section-badge{

        font-size:.68rem;

        padding:8px 15px;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .gallery-item-1 .gallery-image,

    .gallery-item-2 .gallery-image,

    .gallery-item-3 .gallery-image{

        height:320px;

    }

    .hero-card{

        padding:26px;

    }

    .hero-card span{

        font-size:2.6rem;

    }

    .service-item{

        border-radius:22px;

        padding:20px;

    }

    .step-item,

    .contact-card{

        border-radius:22px;

        padding:24px;

    }

    .about-highlight{

        flex-direction:column;

        align-items:flex-start;

        border-radius:24px;

    }

    .about-highlight-number{

        width:54px;

        height:54px;

        font-size:1.2rem;

    }

    .cta-box{

        border-radius:28px;

        padding:36px 24px;

    }

    .footer{

        padding-top:60px;

    }

    .footer-logo img{

        height:48px;

    }

    .footer-bottom{

        text-align:center;

        flex-direction:column;

        gap:12px;

    }

}