/*==================================================
responsive.css
Sysguide
==================================================*/

/*==============================
Large Devices
==============================*/

@media (max-width:1200px){

.container{
    width:95%;
}

.hero h1{
    font-size:48px;
}

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

.about-content h2,
.guide-content h2,
.cta-box h2{
    font-size:38px;
}

.hero-wrapper,
.about-wrapper,
.guide-row{
    gap:50px;
}

}

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

@media (max-width:992px){

section{
    padding:80px 0;
}

.hero{
    padding:170px 0 90px;
}

.hero-wrapper,
.about-wrapper,
.guide-row,
.guide-row.reverse{

    grid-template-columns:1fr;
    gap:50px;

}

.guide-row.reverse .guide-image,
.guide-row.reverse .guide-content{
    order:unset;
}

.hero-content{
    text-align:center;
}

.hero p{
    margin:auto;
}

.hero-buttons,
.hero-stats{
    justify-content:center;
}

.hero-image{
    max-width:700px;
    margin:auto;
}

.card-one{
    left:10px;
}

.card-two{
    right:10px;
}

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

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

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

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

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

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

.experience-box{
    right:20px;
    bottom:20px;
}

}

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

@media (max-width:768px){

.header{
    padding:16px 0;
}

.desktop-btn{
    display:none;
}

.hamburger{
    display:block;
    z-index:1002;
}

.nav-menu{

    position:fixed;
    top:0;
    right:-100%;
    width:300px;
    height:100vh;

    background:#081220;

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

    gap:30px;

    transition:.4s;

    z-index:1001;

}

.nav-menu.active{
    right:0;
}

.nav-menu li a{
    color:#fff !important;
    font-size:18px;
}

.hamburger.active span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:translateY(-10px) rotate(-45deg);
}

.hero{
    padding:150px 0 80px;
}

.hero h1{
    font-size:42px;
}

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

.hero-buttons .btn,
.hero-buttons .btn-outline{
    width:230px;
}

.hero-stats{
    gap:15px;
}

.stat-box{
    min-width:140px;
}

.section-title h2,
.about-content h2,
.guide-content h2,
.cta-box h2{
    font-size:34px;
}

.topics-grid,
.why-grid,
.stats-grid,
.blog-grid{
    grid-template-columns:1fr;
}

.topic-card,
.why-card,
.blog-card{
    max-width:600px;
    margin:auto;
}

.guide-list li{
    font-size:15px;
}

.cta-box{
    padding:60px 35px;
}

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

.footer-bottom{
    flex-direction:column;
    text-align:center;
}

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

.floating-card{
    position:relative;
    width:100%;
    margin-top:20px;
}

.card-one,
.card-two{
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
}

.hero-image{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.about-image::before,
.about-image::after,
.guide-image::after,
.shape{
    display:none;
}

}

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

@media (max-width:576px){

section{
    padding:70px 0;
}

.container{
    width:92%;
}

.logo{
    font-size:22px;
}

.logo i{
    width:42px;
    height:42px;
    font-size:18px;
}

.hero{
    padding:135px 0 70px;
}

.hero-tag{
    font-size:14px;
}

.hero h1{
    font-size:34px;
}

.hero p{
    font-size:16px;
}

.section-title{
    margin-bottom:50px;
}

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

.about-content h2,
.guide-content h2,
.cta-box h2{
    font-size:30px;
}

.topic-card,
.why-card,
.blog-content,
.stat-card{
    padding:25px;
}

.topic-card h3,
.why-card h3{
    font-size:22px;
}

.blog-content h3{
    font-size:22px;
}

.stat-card h2{
    font-size:38px;
}

.experience-box{
    position:relative;
    right:0;
    bottom:0;
    width:100%;
    margin-top:20px;
}

.faq-question{
    padding:18px;
}

.faq-question h3{
    font-size:18px;
    padding-right:15px;
}

.faq-answer{
    padding:0 18px 20px;
}

.cta-box{
    padding:45px 25px;
}

.newsletter input,
.newsletter button{
    height:52px;
}

.social-links{
    flex-wrap:wrap;
}

.back-top{
    width:48px;
    height:48px;
    right:20px;
    bottom:20px;
}

}

/*==============================
Small Phones
==============================*/

@media (max-width:400px){

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

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

.about-content h2,
.guide-content h2,
.cta-box h2{
    font-size:27px;
}

.hero-buttons .btn,
.hero-buttons .btn-outline{
    width:100%;
}

.stat-box{
    width:100%;
}

.nav-menu{
    width:100%;
}

}