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

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

@media (max-width:1200px){

section{
    padding:80px 6%;
}

.hero{
    gap:40px;
}

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

.profile-card{
    width:330px;
    height:420px;
}

.about-container{
    grid-template-columns:300px 1fr;
}

}

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

@media (max-width:992px){

.nav-links{
    gap:20px;
}

.hero{
    flex-direction:column-reverse;
    text-align:center;
    padding-top:140px;
}

.hero-content{
    width:100%;
}

.hero-text{
    margin:auto auto 35px;
}

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

.profile-card{
    width:320px;
    height:400px;
}

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

.about-image{
    margin-bottom:30px;
}

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

.experience-card{
    grid-template-columns:1fr;
    text-align:center;
}

.experience-year{
    justify-content:center;
}

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

}

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

@media (max-width:768px){

    .dashboard-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:35px;
}

.dashboard-card{
    padding:25px 15px;
    border-radius:18px;
    text-align:center;
}

.dashboard-card i{
    font-size:2rem;
    margin-bottom:15px;
}

.dashboard-card h2{
    font-size:1.8rem;
    margin-bottom:8px;
}

.dashboard-card p{
    font-size:.9rem;
}

.menu-btn{
    display:block;
    font-size:2rem;
    cursor:pointer;
    z-index:1001;
}

.nav-links{
    position:fixed;
    top:80px;
    right:-100%;
    width:260px;
    height:calc(100vh - 80px);
    background:#111;
    flex-direction:column;
    align-items:center;
    padding:40px 0;
    gap:25px;
    transition:.35s ease;
}

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

.hero{
    flex-direction:column-reverse;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:35px;
    padding:110px 20px 40px;
    overflow:hidden;
}
.hero-content{
    width:100%;
    max-width:100%;
    padding:0 20px;
    box-sizing:border-box;
}

.hero-image{
    width:100%;
    display:flex;
    justify-content:center;
}

body{
    overflow-x:hidden;
}

.hero h1{

    font-size:3rem;

}

.hero h2{

    font-size:1.5rem;

}

.hero-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    margin-bottom:40px;
}

.hero-buttons .btn{

    width:240px;

}

.profile-card{
    width:280px;
    height:360px;
    margin-top:0;
}

.about-details{

    grid-template-columns:1fr;

}

.education-grid{

    grid-template-columns:1fr;

}

.project-grid{

    grid-template-columns:1fr;

}

.trip-gallery{

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

}

.certificate-grid{

    grid-template-columns:1fr;

}

.services-container{

    grid-template-columns:1fr;

}

.contact-container{

    grid-template-columns:1fr;

}

footer{

    text-align:center;

}

}

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

@media(max-width:480px){

.hero h1{

    font-size:2.4rem;

}

.hero h2{

    font-size:1.2rem;

}

.section-heading h2{

    font-size:2rem;

}

.profile-card{

    width:230px;
    height:300px;

}

.trip-gallery{

    grid-template-columns:1fr;

}

}
.typing-text{

font-size:1.4rem;

}
/* ==========================
   Mobile 393px
========================== */

@media (max-width:393px){

section{
    padding:70px 18px;
}

.hero{
    padding-top:90px;
    gap:22px;
}

.hero-content{
    padding:0;
}

.hero h1{
    font-size:2.3rem;
    line-height:1.2;
}

.hero h2{
    font-size:1.35rem;
    line-height:1.5;
}

.typing-text{
    font-size:1.25rem;
    line-height:1.5;
    white-space:normal;
    word-break:break-word;
    min-height:65px;
}

.hero p{
    font-size:1rem;
    line-height:1.8;
}

.profile-card{
    width:250px;
    height:330px;
}

.hero-buttons{
    gap:15px;
    margin-bottom:25px;
}

.hero-buttons .btn{
    width:220px;
}

.dashboard-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.dashboard-card{
    padding:20px 10px;
}

.dashboard-card h2{
    font-size:1.9rem;
}

.dashboard-card p{
    font-size:.9rem;
}

.footer-content h2{
    font-size:2rem;
}

}
/* ==========================
   Mobile 360px
========================== */

@media (max-width:360px){

.hero{

    padding-top:85px;

}

.hero h1{

    font-size:2rem;

}

.hero h2{

    font-size:1.2rem;

}

.typing-text{

    font-size:1.1rem;
    min-height:60px;

}

.hero p{

    font-size:.95rem;

}

.profile-card{

    width:225px;
    height:295px;

}

.hero-buttons .btn{

    width:205px;

}

.dashboard-grid{

    gap:12px;

}

.dashboard-card{

    padding:18px 8px;

}

.dashboard-card h2{

    font-size:1.6rem;

}

.dashboard-card p{

    font-size:.82rem;

}

}