/*==================================================
  OFFICIAL YOGI
  RESPONSIVE.CSS
==================================================*/


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

@media (max-width:1400px){

.container{

max-width:1140px;

}

.hero-title{

font-size:56px;

}

.section-title{

font-size:44px;

}

}



/*==================================================
  LAPTOP
==================================================*/

@media (max-width:1200px){

.container{

max-width:960px;

}

.hero{

min-height:80vh;

}

.hero-title{

font-size:52px;

}

.song-title{

font-size:36px;

}

.artist-profile{

gap:40px;

}

.music-showcase{

padding:40px;

}

.video-wrapper{

max-width:100%;

}

}



/*==================================================
  TABLET LANDSCAPE
==================================================*/

@media (max-width:992px){

.container{

max-width:720px;

}


/* Navigation */

.site-header .container{

flex-direction:column;

padding:20px 0;

}

.site-nav{

margin-top:20px;

flex-wrap:wrap;

justify-content:center;

}


/* Hero */

.hero{

min-height:70vh;

text-align:center;

}

.hero-content{

margin:auto;

}

.hero-title{

font-size:46px;

}

.hero-description{

font-size:20px;

}

.hero-buttons{

justify-content:center;

}


/* Music */

.music-showcase{

padding:35px;

}

.music-showcase .row{

flex-direction:column;

}

.music-showcase.reverse .row{

flex-direction:column;

}

.album-cover{

margin-bottom:35px;

}


/* Artist */

.artist-profile{

flex-direction:column;

text-align:center;

}

.artist-photo{

flex:none;

max-width:420px;

}


/* Timeline */

.timeline{

padding-left:0;

}

.timeline::before{

display:none;

}

.timeline-item{

padding-left:0;

}

.timeline-item::before{

display:none;

}


/* Footer */

.footer-links{

justify-content:center;

}

.footer-social{

justify-content:center;

}

}



/*==================================================
  TABLET PORTRAIT
==================================================*/

@media (max-width:768px){

.container{

padding-left:20px;

padding-right:20px;

}


/* Typography */

h1{

font-size:42px;

}

h2{

font-size:34px;

}

h3{

font-size:28px;

}

.section-title{

font-size:34px;

}

.section-description{

font-size:18px;

}


/* Hero */

.hero{

padding:120px 0;

}

.hero-title{

font-size:40px;

}

.hero-description{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:100%;

max-width:320px;

}


/* Music */

.song-title{

font-size:32px;

}

.song-description{

font-size:17px;

}

.music-buttons{

flex-direction:column;

}

.music-buttons .btn{

width:100%;

}


/* Cards */

.music-card-body{

padding:25px;

}

.blog-card-body{

padding:25px;

}

.feature-box{

padding:30px;

}

.service-card{

padding:30px;

}


/* CTA */

.cta{

padding:60px 30px;

}


/* Video */

.video-wrapper{

margin:40px auto;

}

.video-wrapper iframe{

border-radius:18px;

}


/* Buttons */

.button-group{

flex-direction:column;

align-items:center;

}

.button-group .btn{

width:100%;

max-width:320px;

}

}



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

@media (max-width:576px){

section{

padding:70px 0;

}

.container{

padding-left:18px;

padding-right:18px;

}


/* Logo */

.logo{

font-size:26px;

}


/* Navigation */

.site-nav{

gap:14px;

}

.site-nav a{

font-size:15px;

}


/* Hero */

.hero{

min-height:65vh;

}

.hero-title{

font-size:34px;

line-height:1.2;

}

.hero-subtitle{

letter-spacing:3px;

font-size:13px;

}

.hero-description{

font-size:16px;

}


/* Section */

.section-title{

font-size:30px;

}

.section-description{

font-size:16px;

}


/* Music */

.music-showcase{

padding:25px;

border-radius:20px;

}

.song-title{

font-size:28px;

}

.song-tags{

gap:10px;

}

.song-tag{

font-size:12px;

padding:7px 14px;

}

.music-card{

border-radius:20px;

}

.music-card-body{

padding:20px;

}


/* Blog */

.blog-card{

border-radius:20px;

}


/* Feature */

.feature-box{

padding:25px;

}


/* Social */

.social-grid{

grid-template-columns:1fr;

}


/* Timeline */

.timeline-item{

margin-bottom:40px;

}


/* Quote */

.quote-box{

padding:30px 22px;

}

.quote-box p{

font-size:20px;

}


/* Footer */

.site-footer{

padding:50px 0;

}

.footer-links{

flex-direction:column;

gap:10px;

}

.footer-social{

gap:14px;

}

.footer-social a{

width:44px;

height:44px;

}

.footer-copy{

font-size:14px;

}

}



/*==================================================
  SMALL PHONES
==================================================*/

@media (max-width:400px){

.hero-title{

font-size:30px;

}

.section-title{

font-size:26px;

}

.song-title{

font-size:24px;

}

.btn{

padding:12px 24px;

font-size:15px;

}

}