/*====================================================

JOGANI EVENT
Responsive CSS
Part - 1

====================================================*/


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

@media(max-width:1400px){

.container{

width:92%;

}

.hero-content h1{

font-size:65px;

}

.section-title h2{

font-size:38px;

}

}


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

@media(max-width:1200px){

.hero-content h1{

font-size:58px;

}

.hero-content p{

font-size:18px;

}

.nav-links{

gap:22px;

}

.logo span{

font-size:24px;

}

.about .container{

gap:50px;

}

.counter-grid{

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

}

.why-grid{

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

}

.services-grid{

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

}

.machine-grid{

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

}

.footer-container{

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

}

}


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

@media(max-width:992px){

section{

padding:80px 0;

}

.menu-btn{

display:block;

}

.book-btn{

display:none;

}

.nav-links{

display:none;

}

.navbar{

padding:18px 30px;

}

.hero{

height:90vh;

}

.hero-content{

max-width:700px;

}

.hero-content h1{

font-size:52px;

}

.hero-content p{

font-size:18px;

}

.hero-buttons{

gap:15px;

}

.about .container{

grid-template-columns:1fr;

}

.about-right{

text-align:center;

}

.counter-grid{

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

}

.why-grid{

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

}

.services-grid{

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

}

.machine-grid{

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

}

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-container{

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

}

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

.navbar{
    padding:15px 20px;
}

.logo img{
    width:42px;
}

.logo span{
    font-size:20px;
}

.hero{
    min-height:100vh;
    padding:120px 20px 60px;
}

.hero-content h1{
    font-size:38px;
    line-height:1.3;
}

.hero-content h3{
    font-size:15px;
}

.hero-content p{
    font-size:15px;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.btn{
    width:100%;
    max-width:280px;
    text-align:center;
}

.section-title h2{
    font-size:32px;
}

.about-right h2{
    font-size:34px;
}

.contact-form{
    padding:25px;
}

.footer-container{
    grid-template-columns:1fr;
    text-align:center;
}

.social{
    justify-content:center;
}

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

.container{
    width:94%;
}

section{
    padding:60px 0;
}

.hero-content h1{
    font-size:30px;
}

.hero-content p{
    font-size:14px;
}

.hero-buttons .btn{
    padding:14px;
}

.section-title h2{
    font-size:26px;
}

.about-right h2{
    font-size:28px;
}

.counter-box{
    padding:25px;
}

.counter-box h2{
    font-size:40px;
}

.service-card,
.machine-card,
.highlight-item{
    padding:25px 18px;
}

.gallery-filter{
    gap:10px;
}

.gallery-filter button{
    width:100%;
}


.gallery-item img{
    height:220px;
}

.contact-form{
    padding:20px;
}

.map iframe{
    height:280px;
}

.footer-col h2{
    font-size:28px;
}

.footer-col h3{
    font-size:20px;
}

}
/* ===========================
Bride & Groom Entry Mobile Fix
=========================== */

@media (max-width:768px){

.machine-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.machine-card{
    width:100%;
    min-width:0;
    padding:20px 10px;
    border-radius:18px;
}

.machine-card h3{
    font-size:18px;
    line-height:1.4;
    word-break:break-word;
}

.machine-card{
    font-size:42px;
}

}
/* ===== Mobile Machine Cards - 3 Column ===== */

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

.machine-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
}

.machine-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    padding:15px 8px !important;
    min-height:160px !important;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.machine-card i{
    font-size:28px !important;
    margin-bottom:10px !important;
}

.machine-card img{
    width:32px !important;
    height:32px !important;
    margin-bottom:10px !important;
}

.machine-card h3{
    font-size:13px !important;
    line-height:1.35 !important;
    text-align:center;
    word-break:break-word;
}

}