/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:992px){


.hero-container{
    grid-template-columns: 1fr;
    text-align: center;
}
.hero-image{
    order: -1;   /* keeps the photo appearing above the text, like originally intended */
}

.about-container,
.about-info,
.learning-grid,
.why-grid,
.process-grid,
.services-grid,
.achievement-grid,
.pricing-grid,
.footer-content{
    grid-template-columns: 1fr;
}

.contact-wrapper{
    grid-template-columns: 1fr;
}


/* * {
    min-width: 0;
}

.hero-container,
.navbar,
.header,
.container {
    max-width: 100%;
}    

.gradient-border{
    width: 100%;
    max-width: 330px;
}

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

.navbar{

padding:14px 22px;

}

.nav-links{

display:none;

}

.hire-btn{

display:none;

}

.menu-btn{

display:block;

}

.logo-box{

width:56px;
height:56px;

font-size:22px;

}

.logo-text h2{

font-size:22px;

}

.nav-links.active{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(20,20,20,.95);
    padding: 20px;
    gap: 20px;
    z-index: 998;
} */

}

@media(max-width:576px){

.header{

padding:18px 0;

}

.navbar{

border-radius:18px;

padding:14px 18px;

}

.logo{

gap:12px;

}

.logo-box{

width:50px;
height:50px;

font-size:20px;

border-radius:14px;

}

.logo-text h2{

font-size:20px;

}

.logo-text span{

font-size:10px;

letter-spacing:2px;

}

.menu-btn{

font-size:28px;

}

}

@media(max-width:992px){

.hero-container{

flex-direction:column-reverse;

text-align:center;

}

.hero h1{

font-size:clamp(3rem,6vw,4.8rem);

line-height:1.05;

}

.hero-image img{

width:330px;

}

.hero-buttons{

justify-content:center;

}

.hero p{

margin:auto;

margin-bottom:35px;

}

}

@media(max-width:900px){

.timeline-line{

left:25px;

}

.timeline-box{

width:100%;
left:0;
padding-left:80px;
padding-right:20px;
text-align:left;

}

.timeline-number{

left:-5px !important;
right:auto;

}

}

@media(max-width:900px){

    .calculator{

        grid-template-columns:1fr;

    }

    .features{

        grid-template-columns:1fr;

    }

}

@media(max-width:992px){
    .bg-title{
        font-size: clamp(60px, 18vw, 120px);
    }
}

@media(max-width:576px){
    .bg-title{
        font-size: clamp(40px, 16vw, 80px);
    }
}