/*==========================================
  RESPONSIVE.CSS
  THE EVENT COMPANY
==========================================*/


/*==========================================
  LARGE LAPTOPS
==========================================*/

@media (max-width:1400px){

.container{
    width:92%;
}

.hero h1{
    font-size:4rem;
}

.section-title h2{
    font-size:2.8rem;
}

}



/*==========================================
  LAPTOPS
==========================================*/

@media (max-width:1200px){

.hero h1{
    font-size:3.6rem;
}

.hero-content{
    max-width:700px;
}

.about-grid{

    gap:60px;

}

.services-grid{

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

}

.why-grid{

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

}

.process-grid{

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

}

.stats-grid{

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

    gap:30px;

}

.featured-grid{

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

}

.featured-card.large{

    grid-row:auto;

    min-height:380px;

}

.gallery-item{

    width:280px;
    height:210px;

}

.footer-grid{

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

}

}



/*==========================================
  TABLET
==========================================*/

@media (max-width:992px){

section{

    padding:100px 0;

}



/* NAVBAR */

.navbar{

    padding:18px 0;

}

.logo img{

    height:60px;

}

.menu-toggle{

    display:block;

    z-index:1001;

}

.nav-links{

    position:fixed;

    right:-100%;

    top:90px;

    width:300px;

    height:calc(100vh - 90px);

    background:#111;

    display:flex;

    flex-direction:column;

    gap:25px;

    padding:40px;

    transition:.35s;

    z-index:1000;

}

.nav-links.active{

    right:0;

}

.nav-links a{

    color:#fff;

}

.navbar .btn-primary{

    display:none;

}



/* HERO */

.hero{

    text-align:center;

}

.hero-content{

    margin:auto;

}

.hero h1{

    font-size:3rem;

}

.hero p{

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-prev,

.hero-next{

    display:none;

}



/* ABOUT */

.about-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.about-image{

    order:1;

}

.about-content{

    order:2;

}



/* THE BRANDING COMPANY */

.branding-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.branding-image{

    order:1;

}

.branding-content{

    order:2;

}



/* SERVICES */

.services-grid{

    grid-template-columns:1fr;

}



/* WHY */

.why-grid{

    grid-template-columns:1fr;

}

}

/*==========================================
  MOBILE DEVICES
==========================================*/

@media (max-width:768px){

section{
    padding:85px 0;
}

.container{
    width:92%;
}


/* Typography */

.section-title h2{
    font-size:2.2rem;
}

.section-title p{
    font-size:.95rem;
}

.hero h1{
    font-size:2.5rem;
    line-height:1.2;
}

.hero p{
    font-size:1rem;
}

.contact-cta h2{
    font-size:2.2rem;
}


/* Hero */

.hero{
    min-height:100vh;
}

.hero-content{
    padding-top:60px;
}

.hero-buttons{
    flex-direction:column;
    gap:15px;
}

.hero-buttons .btn-secondary{
    margin-left:0;
}


/* Hero Dots */

.hero-dots{
    bottom:25px;
}


/* About */

.about-features{
    grid-template-columns:1fr;
}


/* Stats */

.stats-grid{
    grid-template-columns:1fr;
}


/* Process */

.process-grid{
    grid-template-columns:1fr;
}


/* Featured */

.featured-grid{
    grid-template-columns:1fr;
}

.featured-card.large{
    min-height:350px;
}


/* Gallery */

.gallery-item{
    width:220px;
    height:170px;
}

.gallery-marquee{
    gap:15px;
}

.gallery-track{
    gap:15px;
}


/* Testimonials */

.testimonial-slider{
    grid-template-columns:1fr;
}


/* Clients */

.clients-grid{
    grid-template-columns:repeat(2,1fr);
}


/* Footer */

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

.footer-logo{
    margin:auto auto 25px;
}

.social-links{
    justify-content:center;
}

.contact-list li{
    justify-content:center;
}


/* CTA */

.contact-cta{
    padding:90px 0;
}

.contact-cta p{
    font-size:1rem;
}


/* Floating Buttons */

.scroll-top{

    width:50px;
    height:50px;

    right:18px;
    bottom:18px;

}

.whatsapp-float{

    width:55px;
    height:55px;

    left:18px;
    bottom:18px;

    font-size:26px;

}

}



/*==========================================
  SMALL MOBILE
==========================================*/

@media (max-width:576px){

.hero{

    min-height:100vh;

    padding-top:90px;

}

.hero h1{

    font-size:2rem;

}

.hero p{

    font-size:.95rem;

}

.tagline{

    font-size:.75rem;

    letter-spacing:2px;

}

.section-title h2{

    font-size:1.9rem;

}

.contact-cta h2{

    font-size:1.9rem;

}

.btn-primary,
.btn-secondary{

    width:100%;

    justify-content:center;

}

.service-card,
.why-card,
.process-card,
.testimonial-card{

    padding:30px 25px;

}

.feature{

    flex-direction:column;

    align-items:flex-start;

}

.feature i{

    margin-bottom:10px;

}

.clients-grid{

    grid-template-columns:1fr;

}

.footer{

    padding-top:70px;

}

.footer-grid{

    gap:40px;

}

.footer-bottom{

    margin-top:40px;

}

}



/*==========================================
  EXTRA SMALL DEVICES
==========================================*/

@media (max-width:400px){

.logo img{

    height:52px;

}

.hero h1{

    font-size:1.7rem;

}

.section-title h2{

    font-size:1.6rem;

}

.hero p{

    font-size:.9rem;

}

.hero-content{

    padding-top:40px;

}

.gallery-item{

    width:180px;
    height:140px;

}

.scroll-top{

    width:46px;
    height:46px;

}

.whatsapp-float{

    width:50px;
    height:50px;

}

}



/*==========================================
  LANDSCAPE MOBILE
==========================================*/

@media (max-height:600px){

.hero{

    min-height:auto;

    padding:140px 0 90px;

}

.scroll-indicator{

    display:none;

}

}



/*==========================================
  LARGE DESKTOP
==========================================*/

@media (min-width:1600px){

.container{

    max-width:1450px;

}

.hero h1{

    font-size:5rem;

}

.section-title h2{

    font-size:3.4rem;

}

}



/*==========================================
  REDUCED MOTION
==========================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

.hero-slide{

    transform:none !important;

}

}



/*==========================================
  PRINT
==========================================*/

@media print{

.navbar,
.scroll-top,
.whatsapp-float,
.hero-prev,
.hero-next,
.hero-dots,
.hero-progress,
.scroll-indicator{

    display:none !important;

}

body{

    background:#fff;

    color:#000;

}

section{

    padding:30px 0;

}

}