/* =====================================================
   Aura Digital - Responsive.css
   Part 1
===================================================== */

/* ===============================
   1400px
================================ */

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

.container{
    width:92%;
}

.hero-grid{
    gap:60px;
}

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

.hero-right img{
    width:380px;
}

}

/* ===============================
   1200px
================================ */

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

.container{
    width:94%;
}

.navbar{

    padding:18px 25px;

}

.logo img{

    width:200px;

}

.nav-links{

    gap:25px;

}

.hero{

    padding-top:140px;

}

.hero-grid{

    grid-template-columns:1fr 430px;

    gap:50px;

}

.hero h1{

    font-size:3.4rem;

}

.hero p{

    font-size:1rem;

}

.hero-right img{

    width:330px;

}

.platform-grid{

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

}

.services-grid{

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

}

.portfolio-grid{

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

}

.stats-grid{

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

}

.contact-grid{

    grid-template-columns:1fr;

    gap:50px;

}

}

/* ===============================
   992px
================================ */

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

header{

    top:0;

    width:100%;

    left:0;

    transform:none;

}

.navbar{

    border-radius:0;

    padding:18px 22px;

}

.logo img{

    width:185px;

}

.mobile-menu{

    display:block;

    color:white;

    font-size:30px;

    cursor:pointer;

}

.nav-links{

    position:fixed;

    top:88px;

    left:-100%;

    width:100%;

    height:calc(100vh - 88px);

    background:#071320;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:50px;

    gap:28px;

    transition:.35s;

    z-index:999;

}

.nav-links.active{

    left:0;

}

.navbar .btn{

    display:none;

}

.hero{

    padding-top:150px;

    min-height:auto;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

    gap:50px;

}

.hero-left{

    order:2;

}

.hero-right{

    order:1;

}

.hero-right img{

    width:280px;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.section-title h2{

    font-size:2.4rem;

}

.timeline::before{

    left:25px;

}

.timeline-item{

    width:100%;

    left:0!important;

    text-align:left!important;

    padding-left:75px;

    padding-right:0;

}

.timeline-number{

    left:0!important;

    right:auto!important;

}

.services-grid{

    grid-template-columns:1fr 1fr;

}

.review-slider{

    grid-template-columns:1fr 1fr;

}

.footer{

    flex-direction:column;

    text-align:center;

    gap:20px;

}

}

/* =====================================================
   Aura Digital - Responsive.css
   Part 2 (Mobile First)
===================================================== */

/* ===============================
   768px
================================ */

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

section{

    padding:80px 0;

}

.container{

    width:92%;

}

.hero{

    padding-top:120px;

}

.hero h1{

    font-size:2.8rem;

    line-height:1.25;

}

.hero p{

    font-size:1rem;

    margin:20px auto 35px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

    gap:15px;

}

.hero-buttons .btn{

    width:100%;

    justify-content:center;

}

.hero-features{

    flex-direction:column;

    gap:15px;

    align-items:center;

}

.hero-right img{

    width:240px;

}

.section-title{

    margin-bottom:50px;

}

.section-title h2{

    font-size:2rem;

}

.section-title p{

    width:100%;

}

.platform-grid{

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

    gap:20px;

}

.platform-card{

    padding:25px 15px;

}

.platform-card img{

    width:55px;

}

.services-grid{

    grid-template-columns:1fr;

}

.service-card{

    padding:30px;

}

.timeline-item{

    padding-left:65px;

    margin-bottom:40px;

}

.timeline-content{

    padding:22px;

}

.portfolio-grid{

    grid-template-columns:1fr;

}

.portfolio-image{

    height:220px;

}

.stats-grid{

    grid-template-columns:1fr;

}

.review-slider{

    grid-template-columns:1fr;

}

.review-card{

    min-width:100%;

}

.contact-grid{

    grid-template-columns:1fr;

}

.contact-card{

    padding:18px;

}

.footer-links{

    justify-content:center;

    flex-wrap:wrap;

}

.whatsapp{

    width:60px;

    height:60px;

    font-size:26px;

    right:18px;

    bottom:18px;

}

}


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

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

.container{

    width:94%;

}

.logo img{

    width:165px;

}

.hero{

    padding-top:110px;

}

.hero h1{

    font-size:2.2rem;

}

.hero p{

    font-size:.95rem;

}

.tag{

    font-size:.75rem;

    padding:8px 16px;

}

.btn{

    width:100%;

    padding:15px;

}

.section-title span{

    font-size:.8rem;

}

.section-title h2{

    font-size:1.8rem;

}

.platform-grid{

    grid-template-columns:1fr;

}

.platform-card{

    padding:22px;

}

.platform-card i{

    font-size:45px;

}

.service-card{

    padding:25px;

}

.service-card h3{

    font-size:1.3rem;

}

.timeline::before{

    left:20px;

}

.timeline-item{

    padding-left:55px;

}

.timeline-number{

    width:42px;

    height:42px;

    font-size:.85rem;

}

.portfolio-image{

    height:200px;

}

.review-card{

    padding:25px;

}

.review-avatar{

    width:55px;

    height:55px;

    font-size:20px;

}

.contact-card{

    flex-direction:column;

    text-align:center;

}

.contact-card i{

    width:100%;

    margin-bottom:10px;

}

.contact-social{

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}

.cta-box{

    padding:35px 20px;

}

.cta-box h2{

    font-size:1.8rem;

}

.footer{

    gap:15px;

}

.footer-links{

    flex-direction:column;

    gap:12px;

}

}


/* ===============================
   400px
================================ */

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

.hero h1{

    font-size:1.9rem;

}

.hero-right img{

    width:200px;

}

.section-title h2{

    font-size:1.6rem;

}

.service-card{

    padding:22px;

}

.review-card{

    padding:22px;

}

.btn{

    font-size:.9rem;

}

.logo img{

    width:150px;

}

.whatsapp{

    width:55px;

    height:55px;

    font-size:22px;

}

}


/* ===============================
   Landscape Phones
================================ */

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

.hero{

    padding-top:140px;

    padding-bottom:60px;

}

.hero-grid{

    gap:30px;

}

.hero-right img{

    width:220px;

}

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

    /* -------------------------------- */

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo{

    margin:auto auto 20px;

}

.footer-social{

    justify-content:center;

}

.footer-bottom{

    flex-direction:column;

    gap:20px;

}

}