/*==========================================================
GENESIS V2
RESPONSIVE CSS
==========================================================*/

/*==========================================================
≤1400px
Large Desktop
==========================================================*/

@media screen and (max-width:1400px){

:root{

--container:1200px;

--section-space:110px;

}

.container{

width:min(100% - 48px,var(--container));

}

.hero{

padding-top:120px;

}

.hero-container{

grid-template-columns:1.05fr .95fr;

gap:4rem;

}

.hero-title{

font-size:clamp(4rem,5vw,5.2rem);

line-height:1.05;

}

.hero-subtitle{

font-size:1.08rem;

max-width:620px;

}

.hero-logo{

width:390px;

}

.logo-ring.ring-1{

width:340px;

height:340px;

}

.logo-ring.ring-2{

width:450px;

height:450px;

}

.logo-ring.ring-3{

width:560px;

height:560px;

}

.services-grid{

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

gap:2rem;

}

.why-grid{

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

gap:2rem;

}

.process-timeline{

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

gap:2rem;

}

.stats-grid{

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

gap:2rem;

}

.footer-grid{

grid-template-columns:1.5fr 1fr 1fr;

gap:2.5rem;

}

}

/*==========================================================
≤1200px
Laptop
==========================================================*/

@media screen and (max-width:1200px){

:root{

--container:1000px;

--section-space:95px;

}

.container{

width:min(100% - 40px,var(--container));

}

.header{

padding:16px 0;

}

.navbar{

gap:1.5rem;

}

.nav-links{

gap:1.4rem;

}

.hero{

padding-top:130px;

padding-bottom:80px;

}

.hero-container{

grid-template-columns:1fr;

text-align:center;

gap:5rem;

}

.hero-left{

max-width:800px;

margin:auto;

}

.hero-subtitle{

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-trust{

justify-content:center;

}

.hero-right{

min-height:500px;

}

.hero-logo{

width:340px;

}

.floating-card{

max-width:280px;

}

.card-one{

top:0;

right:10px;

}

.card-two{

left:10px;

bottom:60px;

}

.card-three{

bottom:0;

right:30px;

}

.contact-wrapper{

grid-template-columns:1fr;

gap:3rem;

}

.contact-info{

order:2;

}

.contact-form-wrapper{

order:1;

}

.footer-grid{

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

}

.footer-bottom{

flex-wrap:wrap;

gap:1.5rem;

justify-content:center;

}

}
/*==========================================================
≤992px
Tablet / Large Mobile
==========================================================*/

@media screen and (max-width:992px){

:root{

--section-space:80px;

}

.container{

width:min(100% - 32px,100%);

}

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

.header{

padding:14px 0;

}

.navbar{

height:72px;

}

.nav-brand{

gap:.8rem;

}

.nav-logo{

width:52px;

height:52px;

}

.brand-content h2{

font-size:1.2rem;

}

.brand-content p{

font-size:.78rem;

}

/*==============================
MOBILE MENU
==============================*/

.menu-toggle{

display:flex;

width:56px;

height:56px;

border-radius:50%;

flex-shrink:0;

}

.nav-menu{

position:fixed;

top:0;

right:-100%;

width:min(360px,100%);

height:100vh;

padding:120px 40px;

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:flex-start;

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

backdrop-filter:blur(30px);

-webkit-backdrop-filter:blur(30px);

border-left:1px solid rgba(255,255,255,.08);

transition:.45s cubic-bezier(.22,.61,.36,1);

overflow-y:auto;

}

.nav-menu.active{

right:0;

}

.nav-links{

width:100%;

flex-direction:column;

align-items:flex-start;

gap:2rem;

margin-bottom:2.5rem;

}

.nav-link{

font-size:1.15rem;

}

.nav-actions{

width:100%;

}

.nav-actions .btn-nav{

display:flex;

width:100%;

justify-content:center;

}

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

.hero{

padding-top:120px;

padding-bottom:70px;

min-height:auto;

}

.hero-container{

gap:4rem;

}

.hero-left{

text-align:center;

}

.hero-title{

font-size:clamp(2.9rem,8vw,4rem);

line-height:1.08;

}

.hero-subtitle{

max-width:650px;

margin-inline:auto;

font-size:1rem;

line-height:1.8;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

gap:1rem;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

min-width:220px;

}

.hero-trust{

justify-content:center;

gap:1rem;

flex-wrap:wrap;

}

.hero-right{

min-height:430px;

}

/*==============================
LOGO
==============================*/

.hero-logo{

width:300px;

}

.logo-ring.ring-1{

width:260px;

height:260px;

}

.logo-ring.ring-2{

width:340px;

height:340px;

}

.logo-ring.ring-3{

width:420px;

height:420px;

}

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

.floating-card{

position:absolute;

transform:scale(.9);

max-width:240px;

padding:16px 18px;

}

.card-one{

top:10px;

right:0;

}

.card-two{

left:0;

bottom:70px;

}

.card-three{

bottom:0;

right:15px;

}

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

.stats-grid,

.why-grid,

.services-grid,

.process-timeline,

.footer-grid{

grid-template-columns:1fr;

gap:2rem;

}

.contact-wrapper{

grid-template-columns:1fr;

gap:2.5rem;

}

.contact-form-wrapper{

padding:2rem;

}

.footer{

text-align:center;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

}

.footer-links{

justify-content:center;

flex-wrap:wrap;

gap:1rem;

}

}
/*==========================================================
≤768px
Phones
==========================================================*/

@media screen and (max-width:768px){

:root{

--section-space:72px;

}

html{

font-size:15px;

}

.container{

width:calc(100% - 24px);

}

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

.header{

padding:10px 0;

}

.navbar{

height:64px;

}

.nav-logo{

width:46px;

height:46px;

}

.brand-content h2{

font-size:1.1rem;

}

.brand-content p{

display:none;

}

.menu-toggle{

width:52px;

height:52px;

}

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

.hero{

padding-top:95px;

padding-bottom:50px;

}

.hero-container{

gap:2.8rem;

}

.hero-left{

width:100%;

}

.hero-badge{

max-width:100%;

width:fit-content;

margin-inline:auto;

padding:10px 18px;

font-size:.78rem;

white-space:normal;

text-align:center;

}

.hero-title{

font-size:clamp(2.3rem,10vw,3rem);

line-height:1.12;

letter-spacing:-1px;

word-break:break-word;

}

.hero-title br{

display:none;

}

.hero-subtitle{

font-size:.96rem;

line-height:1.8;

max-width:100%;

padding:0 4px;

}

.hero-buttons{

flex-direction:column;

align-items:stretch;

width:100%;

margin-top:2rem;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

width:100%;

min-width:unset;

height:58px;

font-size:1rem;

}

.hero-trust{

margin-top:2rem;

display:grid;

grid-template-columns:1fr;

gap:.8rem;

}

.hero-trust div{

justify-content:center;

padding:14px;

}

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

.hero-right{

min-height:320px;

}

.hero-logo{

width:210px;

}

.logo-ring.ring-1{

width:190px;

height:190px;

}

.logo-ring.ring-2{

width:250px;

height:250px;

}

.logo-ring.ring-3{

width:310px;

height:310px;

}

/* Hide floating cards on phones */

.floating-card{

display:none;

}

/*==============================
SECTIONS
==============================*/

.section-header{

margin-bottom:3rem;

}

.section-title{

font-size:2rem;

line-height:1.2;

}

.section-description{

font-size:.95rem;

}

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

.service-box,

.stat-card,

.why-card,

.process-card,

.contact-card{

padding:1.6rem;

border-radius:24px;

}

.service-box{

min-height:auto;

}

.service-content h3{

font-size:1.35rem;

}

.service-content p{

font-size:.95rem;

}

/*==============================
SEARCH
==============================*/

.service-search{

margin-bottom:2rem;

}

.service-search input{

height:56px;

font-size:.95rem;

}

.service-filter{

gap:.6rem;

}

.filter-btn{

padding:10px 16px;

font-size:.85rem;

}

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

.contact-form-wrapper{

padding:1.5rem;

}

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

.footer{

padding-top:60px;

}

.footer-bottom{

gap:1rem;

font-size:.85rem;

}

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

.whatsapp-float{

width:56px;

height:56px;

right:16px;

bottom:18px;

}

.back-top{

width:50px;

height:50px;

right:18px;

bottom:86px;

}

}
/*==========================================================
≤576px
Small Phones
==========================================================*/

@media screen and (max-width:576px){

:root{

--section-space:60px;

}

html{

font-size:14px;

}

.container{

width:calc(100% - 20px);

}

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

.header{

padding:8px 0;

}

.navbar{

height:58px;

}

.nav-brand{

gap:.65rem;

}

.nav-logo{

width:40px;

height:40px;

}

.brand-content h2{

font-size:1rem;

font-weight:700;

}

.menu-toggle{

width:48px;

height:48px;

}

.menu-toggle span{

width:20px;

}

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

.hero{

padding-top:82px;

padding-bottom:40px;

}

.hero-container{

gap:2rem;

}

.hero-badge{

padding:8px 14px;

font-size:.72rem;

border-radius:999px;

}

.hero-title{

font-size:2rem;

line-height:1.1;

letter-spacing:-.8px;

margin-bottom:1rem;

}

.hero-subtitle{

font-size:.9rem;

line-height:1.75;

margin-bottom:1.8rem;

}

.hero-buttons{

gap:.8rem;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

height:54px;

font-size:.95rem;

padding:0 18px;

border-radius:18px;

}

.hero-right{

min-height:250px;

}

.hero-logo{

width:180px;

}

.logo-ring.ring-1{

width:170px;

height:170px;

}

.logo-ring.ring-2{

width:220px;

height:220px;

}

.logo-ring.ring-3{

width:280px;

height:280px;

}

/*==============================
SECTION
==============================*/

.section-header{

margin-bottom:2.4rem;

}

.section-title{

font-size:1.8rem;

}

.section-description{

font-size:.88rem;

line-height:1.7;

}

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

.service-box,

.stat-card,

.why-card,

.process-card,

.contact-card{

padding:1.3rem;

border-radius:20px;

}

.service-icon,

.why-icon,

.stat-icon,

.process-icon,

.contact-icon{

width:60px;

height:60px;

}

.service-icon i,

.why-icon i,

.stat-icon i,

.process-icon i,

.contact-icon i{

font-size:1.5rem;

}

.service-content h3{

font-size:1.2rem;

}

.service-content p{

font-size:.88rem;

}

.service-content ul{

gap:.65rem;

}

.service-btn{

height:50px;

}

/*==============================
SEARCH
==============================*/

.service-search input{

height:52px;

padding-left:48px;

font-size:.88rem;

}

.service-search i{

left:18px;

}

/*==============================
FILTERS
==============================*/

.service-filter{

justify-content:flex-start;

overflow-x:auto;

flex-wrap:nowrap;

padding-bottom:8px;

scrollbar-width:none;

}

.service-filter::-webkit-scrollbar{

display:none;

}

.filter-btn{

flex-shrink:0;

padding:10px 15px;

font-size:.8rem;

}

/*==============================
FORM
==============================*/

.contact-form-wrapper{

padding:1.2rem;

}

.form-group input,

.form-group textarea{

padding:15px 16px;

}

/*==============================
POPUP
==============================*/

.popup{

padding:1.5rem;

border-radius:22px;

}

.popup h2{

font-size:1.35rem;

}

.popup p{

font-size:.88rem;

}

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

.footer{

padding:50px 0 24px;

}

.footer-logo{

width:60px;

}

.footer-grid{

gap:2rem;

}

.footer-bottom{

font-size:.8rem;

}

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

.whatsapp-float{

width:52px;

height:52px;

right:14px;

bottom:16px;

}

.back-top{

width:46px;

height:46px;

right:16px;

bottom:76px;

}

}
/*==========================================================
≤400px
Ultra Small Phones
==========================================================*/

@media screen and (max-width:400px){

:root{

--section-space:52px;

}

html{

font-size:13px;

}

.container{

width:calc(100% - 16px);

}

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

.header{

padding:6px 0;

}

.navbar{

height:54px;

}

.nav-logo{

width:36px;

height:36px;

}

.brand-content h2{

font-size:.92rem;

}

.menu-toggle{

width:44px;

height:44px;

}

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

.hero{

padding-top:76px;

padding-bottom:36px;

}

.hero-title{

font-size:1.7rem;

line-height:1.15;

}

.hero-subtitle{

font-size:.85rem;

line-height:1.65;

}

.hero-logo{

width:155px;

}

.logo-ring.ring-1{

width:145px;

height:145px;

}

.logo-ring.ring-2{

width:190px;

height:190px;

}

.logo-ring.ring-3{

width:235px;

height:235px;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

height:50px;

font-size:.88rem;

}

/*==============================
SECTIONS
==============================*/

.section-title{

font-size:1.55rem;

}

.section-description{

font-size:.82rem;

}

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

.service-box,

.stat-card,

.why-card,

.process-card,

.contact-card{

padding:1rem;

border-radius:18px;

}

.service-icon,

.why-icon,

.stat-icon,

.process-icon,

.contact-icon{

width:54px;

height:54px;

}

.service-icon i,

.why-icon i,

.stat-icon i,

.process-icon i,

.contact-icon i{

font-size:1.3rem;

}

.service-content h3{

font-size:1.05rem;

}

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

.contact-form-wrapper{

padding:1rem;

}

.form-group input,

.form-group textarea,

.form-group select{

padding:14px;

}

/*==============================
POPUP
==============================*/

.popup{

padding:1.2rem;

}

.popup-icon{

width:60px;

height:60px;

}

.popup-icon i{

font-size:2rem;

}

.popup h2{

font-size:1.2rem;

}

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

.whatsapp-float{

width:48px;

height:48px;

}

.back-top{

width:42px;

height:42px;

}

}

/*==========================================================
LANDSCAPE PHONES
==========================================================*/

@media screen and (max-height:500px) and (orientation:landscape){

.hero{

min-height:auto;

padding:90px 0 50px;

}

.hero-container{

grid-template-columns:1fr 1fr;

gap:2rem;

}

.hero-right{

min-height:220px;

}

.floating-card{

display:none;

}

}

/*==========================================================
SAFE AREA (iPhone Notch)
==========================================================*/