@media(max-width:991px){

section{

padding:70px 0;

}

}

@media(max-width:768px){

section{

padding:60px 0;

}

}

@media(max-width:576px){

section{

padding:50px 0;

}

}
@media(max-width:992px){

.nav-links{

display:none;

}

.mobile{

display:flex;

}

.logo span{

font-size:24px;

}

.search-box{

width:90%;

}

}

@media(max-width:576px){

.logo img{

height:42px;

}

.logo span{

font-size:20px;

}

.mobile-menu{

width:100%;

}

}


/* ===========================================
   Large Desktop
=========================================== */

@media (max-width:1400px){

.hero-title{

font-size:62px;

}

.circle-bg{

width:540px;

height:540px;

}

.hero-main-image{

max-width:500px;

}

}

/* ===========================================
   Laptop
=========================================== */

@media (max-width:1200px){

.hero-title{

font-size:54px;

}

.hero-text{

font-size:17px;

}

.hero-main-image{

max-width:460px;

}

.card1{

left:-20px;

}

.card2{

right:-20px;

}

.card3{

left:0;

}

}

/* ===========================================
   Tablet Landscape
=========================================== */

@media (max-width:992px){

.hero-section{

padding-top:140px;

padding-bottom:70px;

}

.hero-title{

font-size:46px;

text-align:center;

}

.hero-tag{

margin:auto;

margin-bottom:25px;

}

.hero-text{

text-align:center;

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

margin-top:50px;

}

.hero-right{

margin-top:70px;

}

.circle-bg{

width:430px;

height:430px;

}

.hero-main-image{

max-width:390px;

}

.card1{

top:0;

left:20px;

}

.card2{

right:20px;

}

.card3{

left:40px;

bottom:10px;

}

}

/* ===========================================
   Tablet Portrait
=========================================== */

@media (max-width:768px){

.hero-title{

font-size:38px;

line-height:1.2;

}

.hero-text{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

gap:15px;

}

.btn-shop,

.btn-whatsapp{

width:100%;

justify-content:center;

}

.hero-main-image{

max-width:320px;

}

.circle-bg{

width:330px;

height:330px;

}

.floating-card{

width:190px;

padding:12px;

}

.floating-card strong{

font-size:15px;

}

.floating-card small{

font-size:12px;

}

.card1{

left:0;

}

.card2{

right:0;

}

.card3{

left:20px;

}

.hero-stats{

gap:25px;

}

.stat h2{

font-size:34px;

}

}

/* ===========================================
   Mobile Large
=========================================== */

@media (max-width:576px){

.hero-section{

padding-top:120px;

}

.hero-title{

font-size:30px;

}

.hero-tag{

font-size:13px;

padding:8px 16px;

}

.hero-text{

font-size:15px;

line-height:1.7;

}

.hero-main-image{

max-width:260px;

}

.circle-bg{

width:260px;

height:260px;

}

/* Hide floating cards on small phones */

.floating-card{

display:none;

}

.hero-stats{

justify-content:space-between;

gap:10px;

}

.stat{

flex:1;

text-align:center;

}

.stat::after{

display:none;

}

.stat h2{

font-size:28px;

}

.stat span{

font-size:12px;

}

.scroll-indicator{

display:none;

}

}

/* ===========================================
   Small Mobile
=========================================== */

@media (max-width:425px){

.hero-title{

font-size:26px;

}

.hero-text{

font-size:14px;

}

.hero-main-image{

max-width:220px;

}

.circle-bg{

width:220px;

height:220px;

}

.hero-buttons{

margin-top:25px;

}

.btn-shop,

.btn-whatsapp{

padding:15px;

font-size:15px;

}

}

/* ===========================================
   Extra Small Mobile
=========================================== */

@media (max-width:375px){

.hero-title{

font-size:24px;

}

.hero-tag{

font-size:12px;

}

.hero-text{

font-size:13px;

}

.hero-main-image{

max-width:190px;

}

.circle-bg{

width:180px;

height:180px;

}

.hero-stats{

flex-direction:column;

gap:20px;

}

}

/* ===========================================
   Tiny Devices
=========================================== */

@media (max-width:320px){

.hero-title{

font-size:22px;

}

.hero-main-image{

max-width:170px;

}

.btn-shop,

.btn-whatsapp{

font-size:14px;

padding:14px;

}

.hero-text{

font-size:12px;

}

.hero-tag{

padding:7px 12px;

}

}




@media(max-width:768px){

.modal-tags{

justify-content:center;

}

.modal-share{

justify-content:center;

flex-wrap:wrap;

}

.modal-share span{

width:100%;

text-align:center;

margin-bottom:10px;

}

}




@media(max-width:992px){

.trust-stats{

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

}

}

@media(max-width:576px){

.trust-stats{

grid-template-columns:1fr;

}

}


/*====================================================
        RESPONSIVE
====================================================*/

@media(max-width:992px){

.testimonial-card{

min-width:320px;

padding:30px;

}

}

@media(max-width:768px){

.testimonial-card{

min-width:280px;

}

.customer-image{

width:80px;

height:80px;

}

.customer-info h4{

font-size:20px;

}

}

@media(max-width:480px){

.testimonial-card{

min-width:100%;

padding:25px;

}

.stars{

font-size:16px;

}

}

@media(max-width:992px){

.trust-showcase{

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

}

}

@media(max-width:576px){

.trust-showcase{

grid-template-columns:1fr;

}

}


/*=====================================================
        GALLERY RESPONSIVE
======================================================*/

@media(max-width:1200px){

.gallery-grid{

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

}

}

@media(max-width:992px){

.gallery-grid{

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

grid-auto-rows:220px;

}

.gallery-item:nth-child(6){

grid-column:span 1;

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item{

grid-row:span 1 !important;

grid-column:span 1 !important;

height:320px;

}

.gallery-overlay h4{

font-size:22px;

}

}

@media(max-width:480px){

.gallery-item{

height:260px;

}

.gallery-overlay{

padding:20px;

}

.gallery-overlay h4{

font-size:20px;

}

.gallery-view{

width:50px;

height:50px;

}

}


.gallery-overlay{

transform:translateY(40px);

}

.gallery-item:hover .gallery-overlay{

transform:translateY(0);

}


@media(max-width:768px){

.gallery-badge{

font-size:11px;

padding:7px 14px;

}

.gallery-like{

width:42px;

height:42px;

}

.gallery-overlay{

padding:18px;

}

.gallery-overlay h4{

font-size:20px;

}

}