@charset "UTF-8";
/* CSS Document */

html {
  scroll-behavior: smooth !important;
}
body{
font-family: neue-haas-grotesk-display, sans-serif !important;
}

.text-blue{
	color:#173156;
}
.feather-icon svg {
  stroke-width: 1 !important;  
}
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%); 
  z-index: 999;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

#mainNav.visible {
  transform: translateY(0); 
 opacity: 1;
}
.logobg{
  background-image: url('../backg.jpg'); 
  background-position: top center;   
  background-repeat: no-repeat;      
  background-size: cover;            
  width: 100%;                      
  height: 600px; 
}

.logo{
	max-width: 1600px;
	height: auto;
	position: relative;
	color: transparent; 
  	font-size: 0; 
	margin-left: auto;
	margin-right: auto;
	
}

.logo-sm{
	position: relative;
	color: transparent; 
  	font-size: 0; 
}

.logo-nav{
	 font-size: 0; 
}

.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;	
}
.fs-mini{
	font-size: 11px;
	text-align: center;
	letter-spacing: 0.03rem;
	line-height: 14px;
	margin-top:20px;
}

.fs-minialbum{
	font-size: 11px;
	text-align: center;
	letter-spacing: 0.03rem;
	line-height: 14px;
	margin-top:-5px;
}

.message{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
.img-corners{
	border-radius: 20px;
}

.img-corners-player{
	border-radius: 6px;
}

.mypad{
	padding-left:  10% !important;
	padding-right:  10% !important;
}

.footer-text{
	font-size: 11px;
}

.myt{
	letter-spacing: 0.02rem;
}

.navigation{
	height: 80px;
	background-color: #F3F3ED;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10% 0 10%;	
	}

.maxh{
	height: 100% !important;
	}
.minw2{
	min-width: 240px;
}
.album-thmb{
	width: 100px;
	height: 100px;
	border-radius:6px;
	margin-bottom: 12px;
}
.ls-1{
	letter-spacing: 0.03rem;
}

:focus {
  outline: none !important;
  box-shadow: none !important;
}
.mylink{
	text-decoration: none !important;
	 outline: none !important;
}
.menu-list-item{
	color: #000000;
	list-style: none;
	padding: 10px 16px;	
	background-color: white;
	border-bottom: thin solid rgba(197,197,197,0.5);
}

.menu-list-item:hover{
	background-color: rgba(243,243,237,0.5);
	border-bottom: thin solid rgba(197,197,197,0.5);	
}
.song-list{
	font-size: 12px;
}
.mylink2{
	text-decoration: none !important;
	color: #173156;
	font-weight: bold;
	}

.mylink3{
	text-decoration: none;
	color: #173156;
	font-weight: normal;
	}
.mylink3:hover{
	text-decoration: underline;
	color: #173156;
}


.link-play{
	text-decoration: none !important;
	color:inherit;
	}






.bg-light-gold{
	background-color: #F3F3ED;
}
.color-sera{
	color: #173156 !important;
}

.albmar{
	margin-left: 10%;
	margin-right: 10%;
}
.album-title{
	font-size: 14px;
	font-weight: bold;
	color: #173156;
	margin-top: 12px;
}


.album-release{
	font-size: 12px;
	font-weight: bolder;
	color: #173156;
	margin-top: -6px;
}

.album-desc{
	font-size: 12px;
	font-weight: normal;
	color: #173156;
	margin-top: 0px;
	line-height: 16px;
}
.dwnld-link{
	font-size: 12px;
	font-weight: bolder;
	color: #173156;
	text-decoration: none; 
	cursor: pointer;
	}
.bndc{
	font-size: 11px;
	color: #173156;
	font-weight: normal;
	margin-top: -4px;	
}
.mhdes{
	min-height: 60px !important;
	}


.album-card:hover .overlay {
  opacity: 1;
}

.overlay-content {
  color: #fff;
  text-align: center;
  font-size: 1rem;
}

.overlay-content i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

.lyrics{
	display:flex;	
	justify-content: center;
	}

.original-lyrics{
	padding: 30px;
	background-color: rgba(224,224,224,0.15);
	width: 35%;
	border-radius: 10px;
	margin:20px;
}
.translated-lyrics{
	padding: 30px;
	background-color: rgba(224,224,224,0.15);
	width: 35%;
	border-radius: 10px;
	margin:20px;
}

.fs-lyrics{
	font-size: 12px;
	font-weight: bolder;
	margin-top: 40px;
}

.player{
	width: 50%;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	min-height: 100px;
	border-radius: 10px;
	padding: 10px;
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.player:hover{
	background-color: rgba(224,224,224,0.15);
}

.player2{
	width: 100%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	min-height: 100px;
	border-radius: 10px;
	padding: 10px;
	align-items: center;
	display: flex;
	justify-content: space-between;
	background-color: rgba(224,224,224,0.15);
}

.right-play{
	align-items: center;
	display: flex;
	justify-content: end;
	gap: 10px;
}

.left-play{
	align-items: center;
	display: flex;
	justify-content: start;
	}

.cta-title{
	font-size: 22px;
	font-weight: bolder;
	}

.cta-title2{
	font-size: 16px;
	font-weight: bolder;
	}
.cta-title3{
	font-size: 14px;
	font-weight: bolder;
	line-height: 14px;
	padding-bottom: 4px;
	}

.cta-subtitle{
	font-size: 12px;
	font-weight: bolder;
	margin-top:-5px;
}
.cta-subtitle2{
	font-size: 12px;
	font-weight: bolder;
	margin-top:-5px;
}

.cta-subtitle3{
	font-size: 12px;
	font-weight: bolder;
	margin-top:-15px;
}

.cta-subtitle2{
	font-size: 11px;
	line-height: 12px;
	font-weight: bolder;
	margin-top:-5px;
}

.sharing{
	width: 20%;
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	padding: 10px;
	border-top: solid thin #D4D4D4;
}
.share-icons{
	padding:5px 10px;
}

.share-icons:hover{
	padding:5px 10px;
	background-color: rgba(224,224,224,0.15);
	border-radius: 10px;
	}


.newsletter{
	width: 50%;
	background-color: #f3f3ed;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	min-height: 200px;
	border-radius: 10px;
	padding: 30px;
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.cta-newsletter-title{
	font-size: 34px;
	line-height: 34px;
	font-weight: bolder;	
}
.cta-newsletter-subtitle{
	font-size: 20px;
	line-height:24px;
	font-weight: bolder;
	margin: 20px 0px 20px 0px;
}
.sharebutt{
	min-width:150px;
}
.ls-2{
	letter-spacing: 0.06rem;
}
.cover-detail{
	    width: 100%;       
  		max-width: 450px;  
  		margin: 0 auto;    
  		box-sizing: border-box;
	}

.btn-sera{
	background-color: #173156;
	border-radius: 5px;
	color: #fff;
	font-weight: bolder;
	border:none;
}

.btn-sera:hover{
	background-color:#011634;
}

.album-description{
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	letter-spacing: 0.03rem;
	width: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	
}
.title3{
	font-size: 16px;
	line-height: 20px;
	font-weight: bolder;
	text-align: center;
	letter-spacing: 0.03rem;
	width: 100%;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 80px;
	
}

.allalbumstitle{
	font-size: 50px;
	color:#173156;
	font-weight: bolder;
	letter-spacing: -0.03rem;
	text-align: center;
	padding:20px 10px;
}
.reles{
	font-size: 12px;
	}

.view-album-btn{
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 0.2rem;
	background-color: #173156;
	color:white;
	padding: 5px 15px;
	display: inline-block;
	position: relative;
}

.covers{
	display: flex;
  	flex-wrap: wrap;
  	justify-content: center; 
  	gap: 20px;
	max-width:900px;
	margin: 0 auto;
}
.cover{
  flex: 0 1 400px; 
  max-width: 400px;
  width: 100%; 
  padding:20px;
  background-color: rgba(224,224,224,0.15);
  border-radius: 10px;
}
.coverpromo{
  flex: 0 1 500px; 
  max-width: 500px;
  width: 100%; 
  padding:20px;
  border-radius: 10px;
}

.cover:hover {
  background-color: rgba(224,224,224,0.15);
  background-color: #f3f3ed;
  }

.hero1 {
  max-width: 1600px;         
  width: 100%;               
  margin: 0 auto;            
  padding: 60px 20px;
  height:600px;
  
 
  background-image: url('../img/serafinia-hero-1.svg');
  background-repeat: no-repeat;
  background-size: contain;    
  background-position: center center;
  display: flex;            
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;    
}
.promo-title{
	font-size: 80px;
	font-weight: bolder;
	color:#173156;
	text-align: center;
	line-height: 75px;	
	padding:10px;
}
.promo-sub{
	font-size: 40px;
	font-weight: bolder;
	color:#173156;
	text-align: center;
	line-height: 44px;	
}

.promo-box{
	width: 100%;
	max-width:1000px;
}

.news-promo{
	background-color: #f3f3ed;
	
}

.promo-newsletter{
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.nwl-title{
	font-size:80px;
	line-height: 80px;
	font-weight: bolder;
	color:#173156;
}

.news-l{
	width: 70%
}
.news-r{
	width: 30%
}

.mylinkbut{
	text-decoration: none;
	color: #ffffff;
	background-color: #173156;
	padding: 20px 30px;
	border-radius:5px;	
	display: block;
	text-align: center;
	font-size: 22px;
	margin-top:-20px;
	letter-spacing: 0.03rem;
}
.heading-titles{
	font-weight: 600;
	font-size: 80px;
	line-height: 80px;
	color: #173156;
}
.w-body-copy{
	width: 75%;
	color: #173156;
	font-weight: 500;
	font-size: 20px;
	line-height: 26px;
}
.sticky-wrap {
  position: sticky;
  top: 150px; 
}

.section-title-main{
	font-size: 20px;
	color: #173156;
	font-weight: 600;
	line-height: 24px;
	}
.section-title {
	font-size: 20px;
	color: #173156;
	font-weight: 600;
	line-height: 24px;
}

.sticky-heading {
	font-size: 20px;
	color: #173156;
	font-weight: 600;
	line-height: 24px;
}

.clauses{
	padding-left:50px;
	padding-right:50px;
	color:#173156;
}

@media (max-width: 768px) {
	
	.clauses{
	padding-left:20px;
	padding-right:20px;
	color:#173156;
}
	.w-body-copy{
	text-align: center;
	padding: 0px 20px;
	width: 100%;
}
	.heading-titles{
	text-align: center;
	font-size: 50px;
	line-height: 50px;
	color: #173156;
}
	
	.promo-newsletter{
	display: block;
	
}
	
	.news-l{
	width: 100%
}
.news-r{
	width: 100%
}
	
	
	.nwl-title{
	font-size:50px;
	line-height: 50px;
	font-weight: bolder;
	color:#173156;
}
	
	.promo-title{
	font-size: 50px;
	font-weight: bolder;
	color:#173156;
	text-align: center;
	line-height: 45px;
		padding:10px;
}
	.promo-sub{
	font-size: 25px;
	font-weight: bolder;
	color:#173156;
	text-align: center;
	line-height:30px;	
}
	
	.logo{
		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 20px;
		padding-right: 20px;
		
	}
	.message{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
	
	
	.logobg{
  background-image: url('../backg.jpg'); 
  background-position: top center;   
  background-repeat: no-repeat;      
  background-size: auto;            
  width: auto;                      
  height: 670px;
 
}
	.fs-mini{
	font-size: 11px;
	text-align: center;
	letter-spacing: 0.03rem;
	line-height: 14px;
	margin-top:10px;
	color: #505474;
}
.mypad{
	padding-left:  0% !important;
	padding-right:  0% !important;
}
	.upx{
		margin-top:-100px;
	}
	.navigation{
	height: 80px;
	background-color: #F3F3ED;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px 0 10px;	
	}
	
	.maxh{
	height: 100% !important;
	}
	.song-list{
	font-size: 14px;
}
	.minw2{
	min-width: 100%;
}
	.album-thmb{
	width: 150px;
	height: 150px;
	border-radius:6px;
	margin-bottom: 12px;
}
	.albmar{
	margin-left: 5%;
	margin-right: 5%;
}
	.hero1 {
  max-width:1600px;         
  width: 100%;               
  margin: 0 auto;            
  padding: 60px 20px;
  height:200px;
}	
}

@media (max-width: 992px) {
	.lyrics{
	display:block;		
	}
	.original-lyrics{
	width: 100%;
	margin:20px 0px 20px 0px;
	}
.translated-lyrics{
	width: 100%;
	margin:20px 0px 20px 0px;
	}
	.player{
	width: 100%;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	min-height: 100px;
	border-radius: 10px;
}
	.sharing{
	width: 60%;
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	padding: 10px;
	border-top: solid thin #D4D4D4;
}
	.newsletter{
	width: 100%;
	background-color: #f3f3ed;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	min-height: 200px;
	border-radius: 10px;
	padding: 30px;
	align-items: center;
	display: block;
	}
	
	
	
	}

@media (max-width: 400px) {
	.right-play{
	flex-direction: column;   
    align-items: flex-center; 
		
	
}
}

@media (max-width: 991px) {
  .sticky-wrap {
    position: static;
  }
}