/*=========================================
        TABLET (992px and below)
=========================================*/

@media (max-width:992px){

.container{

    width:92%;

}

.hero-container,
.feature-layout,
.security-container,
.plan-card,
.download-wrapper{

    flex-direction:column;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-content p,
.download-content p,
.security-content p{

    margin-left:auto;
    margin-right:auto;

}

.feature-layout{

    display:flex;

    gap:30px;

}

.feature-small-grid{

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

}

.journey-wrapper,
.steps{

    gap:20px;

}

.plan-card img{

    width:320px;

}

.download-image img{

    width:320px;

}

.security-image img{

    width:380px;

}

.testimonial-wrapper{

    flex-wrap:wrap;

}

.footer-container{

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

}

}


/*=========================================
            MOBILE (768px)
=========================================*/

@media (max-width:768px){

section{

    padding:70px 0;

}

.container{

    width:92%;

}

/*================ NAVBAR ================*/

.navbar{

    padding:15px 0;

    flex-wrap:wrap;

    justify-content:center;

}

.nav-links{

    width:100%;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.nav-links a{

    font-size:15px;

}

.download-btn{

    margin-top:15px;

}

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

#hero{

    min-height:auto;

}

.hero-container{

    flex-direction:column-reverse;

    height:auto;

    gap:40px;

}

.hero-content h1{

    font-size:42px;

    line-height:1.2;

}

.hero-content p{

    font-size:17px;

    max-width:100%;

}

.hero-image{

    height:auto;

}

.hero-image img{

    width:100%;

    max-width:300px;

    height:auto;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.primary-btn,
.secondary-btn{

    width:230px;

}

/*================ HEADINGS ================*/

.section-title h2,
.plans-heading,
.faq-heading h2,
.download-content h2,
.security-tag{

    font-size:42px !important;

    line-height:1.2;

}

.section-title p{

    font-size:20px;

}

/*================ FEATURES ================*/

.feature-layout{

    display:flex;

    flex-direction:column;

}

.feature-large{

    height:360px;

}

.feature-large img{

    object-fit:cover;

}

.feature-small-grid{

    grid-template-columns:1fr 1fr;

}

.small-card{

    padding:25px;

}

.small-card h4{

    font-size:34px;

}

/*================ HOW IT WORKS ================*/

.steps{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.step-card{

    width:100%;

    max-width:350px;

    margin:auto;

}

/*================ JOURNEY ================*/

.journey-wrapper{

    display:flex;

    flex-direction:column;

}

.journey-wrapper::before{

    display:none;

}

.journey-card{

    max-width:350px;

    margin:auto;

}

/*================ PLANS ================*/

.plan-tabs{

    gap:10px;

}

.plan-tab{

    font-size:14px;

    padding:12px 20px;

}

.plan-card{

    padding:35px;

}

.plan-card img{

    width:260px;

}

.plan-text h2{

    font-size:38px;

}

.plan-text p{

    font-size:18px;

}

/*================ SECURITY ================*/

.security-container{

    flex-direction:column;

}

.security-image img{

    width:100%;

    max-width:320px;

}

.security-list{

    text-align:left;

}

/*================ TESTIMONIALS ================*/

.testimonial-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:30px;

}

.testimonial-card{

    width:100%;

    max-width:360px;

}

.testimonial-card.side{

    transform:none;

    opacity:1;

}

/*================ FAQ ================*/

.faq-question{

    font-size:18px;

}

.faq-answer{

    font-size:16px;

}

/*================ DOWNLOAD ================*/

.download-wrapper{

    flex-direction:column;

    text-align:center;

}

.store-buttons{

    flex-direction:column;

    gap:15px;

}

.store-buttons a{

    width:220px;

}

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

.footer-container{

    display:grid;

    grid-template-columns:1fr;

    text-align:center;

    gap:40px;

}

.social-icons{

    justify-content:center;

}

.footer-links{

    align-items:center;

}

.footer-contact{

    align-items:center;

}

}


/*=========================================
        SMALL PHONES (480px)
=========================================*/

@media (max-width:480px){

.hero-content h1{

    font-size:34px;

}

.section-title h2,
.security-tag,
.download-content h2{

    font-size:34px !important;

}

.hero-tag{

    font-size:13px;

}

.hero-content p{

    font-size:16px;

}

.plan-text h2{

    font-size:32px;

}

.feature-small-grid{

    grid-template-columns:1fr;

}

.plan-tab{

    width:100%;

}

.small-card{

    padding:20px;

}

}
/*================ MOBILE NAVBAR ================*/

.menu-toggle{

    display:none;

    font-size:28px;

    cursor:pointer;

    color:#D4AF37;

}

/* Mobile */

@media(max-width:768px){

.navbar{

    position:relative;

    justify-content:space-between;

    padding:18px 0;

}

.menu-toggle{

    display:block;

}

.download-btn{

    display:none;

}

.nav-links{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:white;

    flex-direction:column;

    align-items:center;

    gap:0;

    overflow:hidden;

    max-height:0;

    transition:.4s;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.nav-links.active{

    max-height:600px;

}

.nav-links li{

    width:100%;

}

.nav-links li a{

    display:block;

    padding:18px;

    border-bottom:1px solid #eee;

    width:100%;

    text-align:center;

}

}
.nav-links li{

    opacity:0;

    transform:translateY(-15px);

    transition:.3s;

}

.nav-links.active li{

    opacity:1;

    transform:translateY(0);

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

.logo img{

    height:55px;

}

}