/*=====================================
   K • ORMAN Portfolio
   Responsive Styles
======================================*/

/* Tablets */
@media (max-width: 992px){

.hero{
padding:100px 20px 60px;
}

.hero-content{
max-width:700px;
}

.projects-container,
.social-container,
.about-container{

grid-template-columns:1fr;

}

}

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

.hero{

padding-top:90px;

}

}

@media(max-width:768px){

.menu-btn{

display:block;

}

#navLinks{

position:absolute;

top:70px;

left:0;

width:100%;

display:none;

flex-direction:column;

padding:20px;

border-radius:18px;

background:rgba(10,15,25,.95);

}

#navLinks.open{

display:flex;

}

}

@media(max-width:768px){

.navbar{

padding:12px 18px;

}

.logo{

font-size:1rem;

}

.hero{

padding-top:130px;

}

#navLinks{

width:100%;

left:0;

right:0;

border-radius:0 0 18px 18px;

}

}


/* Tablets */
@media (max-width:992px){

...
}

/* Phones */
@media (max-width:768px){

/* Existing responsive styles */

...

/* 👇 Add Step 4 here */

.navbar{

padding:12px 18px;

}

.logo{

font-size:1rem;

}

.hero{

padding-top:130px;

}

#navLinks{

width:100%;

left:0;

right:0;

border-radius:0 0 18px 18px;

}

}

/* Small Phones */
@media (max-width:480px){

...

}

/* Phones */
@media (max-width:768px){

section{

padding:70px 20px;

}

.hero h1{

font-size:2.5rem;

}

.hero h2{

font-size:1.4rem;

}

.hero p{

font-size:.95rem;

}

.profile-wrapper{

width:140px;

height:140px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.primary-btn,
.secondary-btn{

width:220px;

text-align:center;

}

.section-title h2{

font-size:2rem;

}

.skill-card,
.project-card,
.social-card,
.about-card,
.journey{

padding:20px;

}

}


/* Small Phones */
@media (max-width:480px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:2rem;

}

.hero h2{

font-size:1.2rem;

}

.profile-wrapper{

width:120px;

height:120px;

}

.music-toggle{

width:40px;

height:40px;

right:15px;

bottom:15px;

}

.control-panel{

width:90%;

right:5%;

bottom:65px;

}

.footer-container{

text-align:center;

}

.footer-links,
.footer-contact{

align-items:center;

}

  }