/*==================================================
    NJAKA RAJAONA
    RESPONSIVE DESIGN
==================================================*/


/*==================================================
    LARGE SCREENS
==================================================*/


@media (min-width:1600px){

.container{

max-width:1500px;

}


#hero h1{

font-size:90px;

}


#hero p{

font-size:22px;

}


.section-title h2{

font-size:65px;

}

}



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


@media (max-width:1200px){


#hero h1{

font-size:60px;

}


#hero h2{

font-size:28px;

}


.value-grid{

grid-template-columns:

repeat(2,1fr);

}


.timeline-content{

padding:25px;

}


.navbar ul{

gap:20px;

}

}



/*==================================================
    TABLETS
==================================================*/


@media(max-width:992px){


section{

padding:90px 0;

}



/* NAVIGATION */


.navbar-collapse{

background:

rgba(4,6,13,.95);

padding:30px;

border-radius:20px;

margin-top:20px;

backdrop-filter:blur(20px);

}


.navbar ul{

gap:15px;

}



.navbar li{

padding:10px 0;

}



/* HERO */


#hero{

padding-top:140px;

text-align:center;

}


#hero .row{

flex-direction:column-reverse;

}


#hero h1{

font-size:52px;

}



#hero p{

margin-left:auto;

margin-right:auto;

}



.profile-card{

max-width:500px;

margin:auto;

margin-bottom:60px;

}



.hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

}


.hero-stats{

justify-content:center;

}



/* TIMELINE */


.timeline::before{

left:20px;

}



.timeline-item{

width:100%;

left:0!important;

padding-left:60px;

text-align:left!important;

}



.timeline-dot{

left:10px!important;

right:auto!important;

}



}



/*==================================================
    MOBILE LARGE
==================================================*/


@media(max-width:768px){


section{

padding:70px 0;

}


#hero h1{

font-size:42px;

}


#hero h2{

font-size:24px;

}


#hero p{

font-size:17px;

}



.section-title h2{

font-size:38px;

}



.value-grid{

grid-template-columns:1fr;

}



.glass-card{

padding:30px;

}



.expertise-card{

height:auto;

}



.hero-stats{

gap:15px;

}



.hero-stats div{

min-width:110px;

padding:20px;

}



.hero-stats h3{

font-size:32px;

}



.tech-badge{

padding:12px 20px;

font-size:14px;

}



}



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


@media(max-width:480px){


body{

font-size:15px;

}



#hero h1{

font-size:36px;

}



#hero h2{

font-size:20px;

}



.badge{

font-size:12px;

padding:10px 18px;

}



.btn{

width:100%;

padding:16px;

}



.hero-buttons{

flex-direction:column;

}



.hero-stats{

display:grid;

grid-template-columns:

repeat(2,1fr);

}



.profile-card{

padding:15px;

border-radius:25px;

}



.section-title h2{

font-size:32px;

}



.timeline-content{

padding:22px;

}



.timeline-content h3{

font-size:20px;

}


}


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


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


#hero{

min-height:auto;

padding-top:120px;

padding-bottom:80px;

}


.profile-card{

max-width:300px;

}



}