/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Red+Hat+Display:wght@400;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;
  
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsla(281, 79.10%, 51.20%, 0.92);
  --first-color-light: hsla(297, 89.20%, 52.70%, 0.80);
  --first-color-alt:  hsla(281, 79.10%, 51.20%, 0.92);
  --first-color-dark:  hsla(281, 79.10%, 51.20%, 0.92);
  --first-color-gray: hsl(79, 6%, 64%);
  --title-color: hsl(0, 0%, 0%);
  --title-color-black: hsl(180, 4%, 12%);
  --text-color: hsl(0, 0%, 0%);
  --text-color-light: hsl(180, 4%, 65%);
  --body-color: hsl(0, 0%, 100%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Red Hat Display', sans-serif;
  --second-font: 'Kaushan Script', ;
  --biggest-font-size: 2rem;
  --bigger-font-size: 1.5rem;
  --big-font-size: 1.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-bold: 700;
  --font-black: 900;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 6rem;
    --bigger-font-size: 3.5rem;
    --big-font-size: 2.75rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body,
button,
input {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
}

h1,  h3 {
  color: var(--title-color);
  font-weight: var(--font-bold);
}
h2{ 
  color: var(--first-color);
  font-weight: var(--font-bold) ;


}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1124px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.section {
  padding: 4.5rem 0 2rem;
}

.section__data {
  display: flex;
  flex-direction: column;
  row-gap: .75rem;
  text-align: center;
  margin-bottom: 3rem;
}

.section__title, 
.section__title-border {
  font-size: var(--big-font-size);
  letter-spacing: 1.5px;
}

.section__subtitle {
  font-size: var(--h2-font-size);
  font-family: var(--second-font);
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--first-color);
  
}


.section__titles {
  display: flex;
  column-gap: .75rem;
  justify-content: center;
}

.section__title-border {
  -webkit-text-stroke: 1px var(--text-color);
  color: transparent;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.main {
  overflow: hidden; /* For animation ScrollReveal */
}

.color-red {
  color: hsl(0, 80%, 64%);
}

.color-green {
  color: var(--first-color);
}

/*=============== HEADER & NAV ===============*/

.header{
  width: 100%;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
transition: background .3s;
}

.nav{
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo ,
.nav__toggle{
  color: var(--first-color);
  display: flex;
}

.nav__logo{

  align-items: center;
  column-gap: .5rem ;
  font-weight: var(--font-bold);
  font-size: larger;
}

.nav__logo img{

  width: 2.00rem;
}
.nav__toggle{
font-size: 1.25rem;
cursor: pointer;
}

@media screen and (max-width: 1023px){
  .nav__menu{
   position: fixed;
    background-color:var(#1d1b19);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter:blur(32px);
    top: 0;
    right: -100%;
    width: 80%;
    height: 100%;
    border-left: 2px solid var(--first-color-gray);
    transition: right .3s;
  }
}
  
.nav__list{

  padding : 5rem 0 0 3rem;
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
}

.nav__link{
  color: var(--title-color);
  transition: color .3s;
}
.nav__link:hover{

  color: var(--first-color);
}

.nav__close{
 
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 1.5rem;
  color: var(--title-color);
  cursor: pointer;

}

.nav .nav__button{

  background-color: rgba(225, 18, 225, 0.8);
  border: none;
}
/* Show menu */
.show-menu{
  right: 0;

}

/* Change background header */

.bg-header{
background-color: var(--body-color);
box-shadow: 0 4px 8px hsla(180, 12%, 4%, .3);

}
/* Active link */
.active-link{
  color: var(--first-color)
}

/*=============== HOME ===============*/

.home{
 position: relative;
 padding-bottom: 0;
 background-image: url('../img/amen.jpg');
 background-repeat: no-repeat;
 background-size: 100% 100% ;
 background-position: center center;
 display: flex;
 
 
}
@media (max-width: 100px) {
  .home {
     background-size: cover;
     background-position: center center;
   }
 }
 
 .home__container{

  padding-top: 4rem;
  row-gap: 3rem;
  
 }
 
 .home__data{

  text-align: center;
  
 }
.home__subtitle{
  font-size: var(--bigger-font-size);
  -webkit-text-stroke: 1px var(--title-color);
  color:  hsla(281, 79.10%, 51.20%, 0.92);
}

.home__title{
  font-size: var(--biggest-font-size);
  font-weight: var(--font-black);
  margin: .5rem 0;
}

.home__subtitle,
.home__title{
  letter-spacing: 1.5px;
}

.home__description{

  margin-bottom: 2.5rem;
}
  .home__triangle{
    height: 325px ;
    position: absolute ;
    right: 0;
    bottom: 0;
    clip-path: polygon(100%  0 , 0 100% ,100% 100%);
    
  }

  .home__triangle-1{
    width: 105px;
    background-color: var(--first-color);
  }
  .home__triangle-2{
    width: 205px;
    background-color: var(--first-color-alt);
  }
  .home__triangle-3{
    width: 305px;
    background-color: var(--first-color-dark);
  }
.home__img{
  display: block;
  position:relative ;
  z-index: 1;
  margin: 0 auto;
}

/*=============== BUTTON ===============*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  padding :18px 32px;
  border: 2px solid var(--first-color);
  color: var(--title-color-black);
  font-weight: var(--font-bold);
  cursor: pointer; 
  transition: background .3s;
}

.button:hover{
  background-color: var(--first-color-alt);
}

.button i{
  font-size: 1.25rem;
  transition: transform .3s;
}
.button__flex{

  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
}

.button__flex:hover i {
  transform: translateX(.25rem);
}

/*=============== PROGRAM ===============*/


.program{
  position: relative;
 padding-bottom: 0;
 background-image: url('../img/');
 background-repeat: no-repeat;
 background-size: 100% 100% ;
 background-position: center center;
 display: flex;
}
.program__container{
  grid-template-columns: 225px;
  justify-content: center;
  row-gap: 2rem;
}

.program__card{

  display: grid;
  background-color: hsla(79, 6%, 64%, .07);
  padding: 1.5rem 2rem;
  border:  2px solid transparent;
  transition: background .5s , border .4s;
}
.program__img{
  width: 135px;
}



.program__shape{
  width: 50px;
  height: 50px;
  background-color: var(--body-color);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  transition: background .5s;
}

.program__title{
  font-size: var(--h3-font-size);
  margin-bottom: 1rem;

}

.program__description{
  font-size: var(--small-font-size);
  letter-spacing: .5px;
  line-height: 150%;

}

.program__title,
.program__description{
  transition:  color .5s;
}

.program__button{
  justify-self: flex-end;
  margin-top: 1.5rem;
  font-size: 1.25rem;
  color: var(--title-color-black);
  opacity : 0 ;
  transition: opacity .4s;
}

.program__button i{

  display: block;
  transition: transform .3s;
}
.program__button:hover i{

  transform: translateX(.25rem);
}



.program__card:hover .program__title ,
.program__card:hover .program__description{
  color: var(--title-color-black);
}

.program__card:hover .program__button{
  opacity: 1;
}
/*=============== CHOOSE ===============*/
.choose{
  position: relative;
 padding-bottom: 0;
 background-image: url('../img/section.');
 background-repeat: no-repeat;
 background-size: 100% 100% ;

}
.choose{
  padding-bottom:0;
}
.choose__overflow{
  position: relative;
}
.choose__container{
row-gap:  3rem;

}

.choose__content .section__data{
  margin-bottom: 2rem;
}

.choose__description{
  text-align: center;
  margin-bottom: 2.5rem;
  font-size:22px;
}

.choose__data{
  display: grid;
  grid-template-columns: repeat(2 ,1fr);
  row-gap: 2rem;


}
 .choose__group{

text-align: center;

 }
 .choose__number{
  font-size: var(--h1-font-size);
  font-family: var(--second-font);
  font-weight: 400;
  margin-bottom: .25rem;
 }

.choose__subtitle{
  font-size: var(--small-font-size);
}

.choose__triangle{
height: 325px;
position: absolute;
left: 0;
bottom: 0;
clip-path: polygon(0 0 , 0 100% , 100% 100%);
}
.choose__triangle-1{
width: 305px;
background-color: var(--first-color);

}
.choose__triangle-1{
  width: 305px;
  background-color: var(--first-color);
  
  }
  .choose__triangle-2{
    width: 205px;
    background-color: var(--first-color-alt);
    
    }
    .choose__triangle-3{
      width: 105px;
      background-color: var(--first-color-dark);
      
      }
            
.choose__img{
  width: 260px;
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}


/*=============== PRICING ===============*/
.pricing__container{
  grid-template-columns: 285px;
  justify-content: center;
  row-gap: 2rem;
}
.pricing__card ,
.pricing__shape ,
.pricing__list{
  display: grid;
  margin-left:100;
  
  width: fit-content;
}
.pricing__card{
  row-gap: 2rem;
  background-color:hsla(79, 6%, 64%, .07);
  padding: 2rem 2.5rem;
  

  
}

.pricing__img{
  width: 69px;
}

.pricing__img2{
  width: 450px;
}



.pricing__title{
  font-size: var(--h3-font-size);
  color: var(--text-color);
  margin-bottom: 1rem;
}
.pricing__number{
  font-size: var(--h1-font-size);
}
.pricing__list{
  row-gap: 1rem;
}
.pricing__item{
  display: flex;
  column-gap:  .5rem;
  align-items: center;
  font-size: var(--small-font-size);
}

.pricing__item i {

  font-size: 1.25rem;
  color: var(--first-color);

}
.pricing__item-opacity{
  opacity: .3;
}

.pricing__button{
background-color: var(--title-color);

}
.pricing__button:hover{
  background-color: var(--title-color);
}

.pricing__card-active{
  


}

.pricing__card-active .pricing__shape{
  background-color: var(--first-color-light);
}
.pricing__card-active .pricing__item i {

  color: var(--title-color);
}

/*=============== CALCULATE ===============*/
.calculate{
  padding-bottom: 0;
  
}
.calculate__container{
  row-gap: 4rem;

}
.calculate__contant .section__titles{
  margin-bottom: 2rem;
  text-align: center;
}
.calculate__description{

  text-align: center;
  margin-bottom: 2.5rem;
}

.calculate__form{
  display:grid;
  row-gap: 1rem;
}

.calculate__box{

  position: relative;
  border:  2px solid var(--first-color-light);
}

.calculate__input{
  width: 100%;
  background: transparent;
  padding: 20px 56px 20px 24px;
  outline: none;
  border: none;
  color: var(--text-color);
}

.calculate__input::-webkit-outer-spin-button,
.calculate__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
 
}

.calculate__input[type=number]{

-moz-appearance: textfield;

}
.calculate__label{
  position: absolute;
  right: 1.5rem;
  top: 1.25rem;
  color: var(--title-color);
}
.calculate__form .button{
  margin-top: 1.5rem;

}
.calculate__img{
  width: 200px;
  justify-self: center;
}
.calculate__message{
  position: absolute;
  transform: translateY(1rem )
}
/*=============== FOOTER ===============*/

.footer__container{
  

  row-gap: 4rem;
  padding-top: 1rem;
}
.footer__logo,
.footer__description{
  color: var(--first-color);
}
.footer__logo,
.footer__form,
.footer__social{
  display: flex;
}
.footer__logo{
  align-items: center;
  column-gap: 5rem;
  font-weight: var(--font-bold);
  margin-bottom: 1.5rem;

}

.footer__logo img{
  width: 1.5rem;
}
.footer__description{
  margin-bottom: 2rem;

}
.footer__form{
  flex-direction: column;
  gap: 1.25rem;

}
.footer__input{
  padding: 20px 56px 20px 24px ;
  border: 2px solid var(--first-color-light);
  background: transparent;
  color: var(--text-color);
}
.footer__content,
.footer__links ,
.footer__group{
display: grid;
}

.footer__content{
  grid-template-columns: repeat(2 ,max-content);
  gap: 2.5rem 3.5rem;
}
.footer__title{
  font-size: var(--h3-font-size);
  margin-bottom: 1.5rem;
}
.footer__links{
  row-gap:  .75rem;

}
.footer__links{
  color: var(--text-color);
  transition: color .3s;
}
.footer__links:hover{
  color :var(--first-color)
}
.footer__group{
  margin-top: 5rem;
  justify-items: center;
  row-gap: 2rem;

}

.footer__social{
  column-gap: 1.25rem;
}
.footer__social-link{
display: inline-flex;
padding:  .35rem;
background-color: var(--first-color);
border-radius: 50%;
font-size: 1.25rem;
color: var(--title-color-black);
transition: background .4s;

}

.footer__social-link:hover{

  background-color: var(--first-color);
}

.footer__copy{
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}
.footer__message{
  position: absolute;
  transform: translateX(1rem);
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
  width: .6rem;
  border-radius: .5rem;
  background-color: hsl(0, 0.00%, 95.70%);
}

::-webkit-scrollbar-thumb{
  background-color: hsl(290, 90.20%, 48.20%);
  
}
::-webkit-scrollbar-thumb:hover{
  background-color: hsl(289, 82.40%, 40.00%);
  
}

/*=============== SCROLL UP ===============*/
.scrollup{
position: fixed;
right: 1rem;
bottom: -30%;
background-color: var(--first-color);
display: inline-flex;
padding: .35rem;
color: var(--title-color-black);
font-size: 1.25rem;
z-index: var(--z-tooltip);
transition: .3s;

}



.scrollup:hover{
  transform: translateY(-.25rem);
}
/* Show Scroll Up*/
.show-scroll{
  bottom: 3rem;
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media  screen and (max-width: 340px) {
  .container{
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .section__titles{

    flex-direction: column;
    row-gap:  .25rem;
  }
  
  .home__triangle,
  .choose__triangle{
    width: 255px;
  }
  .home__triangle-3,
  .choose__triangle-1{
    width: 260px;
  }
  .choose__img{
    width: 195px;
  }
  .pricing__container{
    grid-template-columns: 250px;

  }
  .pricing__card{

    padding: 1.5rem;
  }
  .footer__content{

    grid-template-columns: 1fr;
  }

}

/* For medium devices */
@media screen  and ( min-width: 768px){
  .nav__menu{
    width: 50%;
  }
  .home__container,
  .choose__container{
    grid-template-columns: repeat(2 , 1fr);
    align-items: center;
  }
  .home__data,
  .choose__content .section__data,
  .choose__description,
  .calculate__description{
    text-align: initial;

  }
  .logos__container{
    grid-template-columns: repeat(4 , 1fr);

  }
  .program__container{
    grid-template-columns: repeat(2 , 225px);
    gap: 2.5rem;
  }
  .choose__content{
    order: 1;
  }
  .choose__data{
    justify-items: flex-start;
  }
  .choose__content .section__titles ,
  .calculate__content  .section__titles{
    justify-content: initial;
  }
  .pricing__container{
    grid-template-columns: repeat(2,285px);
    gap: 2.5rem;
  }
.pricing__container2{
    padding-top: 3rem;
    grid-template-columns: repeat(3 , 320px);
    padding-left:20rem;
    
    
  }
  .calculate__container{
    grid-template-columns: 1fr .8fr;
    align-items: center;
  }
  .calculate__form{
    grid-template-columns: repeat(2, 1fr);
    column-gap:  1.5rem;

  }
  .calculate__form .button{
    grid-column: 1 / 3 ;
  }
.footer__container{
  grid-template-columns: repeat(2 ,max-content);
  justify-content: space-between;
}
.footer__content{
  grid-template-columns: repeat(3 , max-content);
}

}

/* For large devices */

@media screen and (min-width: 1023px){

.nav{
  height: calc( var(--header-height)+ 2rem);
}
.nav__menu{
  width: initial;
}
.nav__toggle,
.nav__close{
  display: none;

}
.nav__list{
  flex-direction: row;
  padding: 0;
  align-items: center;
  column-gap: 4rem;
}

.section{
  padding: 7rem 0 0;
}
.section__subtitle{
  font-size: 2rem;
}

.home__container{
  grid-template-columns: repeat(2,max-content);
  align-items: initial;
}
.home__title{
  margin:  .75rem 0 1.25rem;
}
.home__description{
  width: 445px;
  margin-bottom: 3rem;
}
.home__img{
  width: 550px;
  transform: translateX(-6rem);
}
.home__triangle{
  height: 700px;
}
.home__triangle-1{
  width: 145px;
}
.home__triangle-2{
  width: 345px;
}
.home__triangle-3{
  width: 545px;
}
.logos{
  padding: 3.5rem 0 1rem;
}
.logos__img{
  width: 190px;
}
.choose__overflow{
  overflow: hidden;
}
.choose__img{
  width: 350px;
}
.choose__triangle{
  height: 700px;
}
.choose__triangle-1{
  width: 545px;
}
.choose__triangle-2{
  width: 345px;
}
.choose__triangle-3{
  width: 145px;
}
.footer{
  padding-bottom: 3rem;
}
.footer__form{
  flex-direction: row;
}
.footer__content{
  column-gap: 5rem;
}
.footer__group{
  grid-template-columns: repeat(2 , max-content);
  justify-content: space-between;
  margin-top: 7rem;
}
.footer__social{
  order: 1;
}
}

@media screen  and (min-width:1150px){
  .container{
    margin-left: auto;
    margin-right: auto;
  }
  .home__data{
    padding-top: 3rem;
  }
  .home__images{

    transform: translateX(-9rem);
  }
  .home__img{
    width: 700px;
    transform: translateX(2rem);
  }
  .home__triangle{
    height: 995px;
  }
  .home__triangle-1{
    width: 205px;
  }
  .home__triangle-2{
    width: 505px;
  }
  .home__triangle-3{
    width: 705px;
  }
  .program__container{
    grid-template-columns: repeat(4, 234px);
    padding: 3rem 0;
  }
  .program__card{
    padding: 2rem;
  }
  .program__description{
    font-size: var(--normal-font-size);
  }

  .choose__container{
    column-gap: 8rem;
  }
  .choose__img{
    width: 450px;
    margin: 0 0 0 auto;
  }
  .choose__triangle{
    height: 800px;
  }
  .choose__images{
    position: relative;
  }
  .choose__data{
    grid-template-columns: repeat(2 , max-content);
    gap:  2.5rem 8rem;
  }
  .choose__description{
    width: 418px;
    margin-bottom: 3.5rem;
  } 
  .pricing__container{
    padding-top: 3rem;
    grid-template-columns: repeat(3 , 320px);
    
  }
   .pricing__container2{
    padding-top: 3rem;
    grid-template-columns: repeat(3 , 320px);
    padding-left:25rem;
    
    
  }
  .pricing__card{
    padding: 2rem 3.5rem;
    row-gap: 2.5rem;
  }

  .calculate__description{
    width: 415px;
  }
  .calculate__form{
    width: 505px;
  }
  .calculate__img{
    width: 300px;
  }
  .scrollup{

  right: 3rem;
  }
}
.maquee{
  margin: auto;
  font-size: x-large;
  ;
}

/* For handheld devices */
@media (max-width: 600px) {
  body,
 .section,
 .home,
 .choose,
 .pricing,
 .calculate,
 .footer {
    background-size: fill;
    background-position: center center;
    
  }
}

.container2 {
  text-align: center;
  font-size: var(--bigger-font-size);
  font-family: var(--second-font);
  font-weight: var(--font-black);
  letter-spacing: 1.5px;
  color: hsl(295, 100.00%, 13.10%);
 
}

.text {
  font-size: 20px;
  
  opacity: 1; /* Ensure the first text is visible initially */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.hidden {
  opacity: 0; /* Hide the text with opacity */
  
}

 
 .map-section {
  margin: 20px auto;
  max-width: 1000px;
  font-family: inherit; /* Use the page's font */
}

.map-section .map-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.map-section iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f9f9f9;
  color: #222;
}

/* Home Section */
.home {
  padding: 60px 20px;
  background-image: url('../img/amen.jpg');
}

.home-container {
  max-width: 1200px;
  height:780px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-content h2 {
  font-size: 20px;
  color:  hsl(295, 100.00%, 13.10%);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-top: 2rem;
  font-size: var(--h1-font-size);
  font-family: var(--second-font);
  

}

.home-content h1 {
  font-size: 48px;
  font-weight: 800;
  margin: 10px 0;
}

.slogan {
  
  margin: 20px 0 10px;
  font-size: var(--bigger-font-size);
  font-family: var(--second-font);
  font-weight: var(--font-black);
  letter-spacing: 1.5px;
  color: hsl(295, 100.00%, 13.10%);
 
}

.description {
  font-size: 16px;
  color:  hsl(295, 100.00%, 13.10%);
  max-width: 600px;
  margin: auto;
  font-family: var(--second-font);
  
}

.cta-button {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 28px;
  background: #6b46c1;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  transition: background 0.7s;
}

.cta-button:hover {
  background: #5a3db5;
}

/* Marquee */
.marquee {
  overflow: hidden;
  margin-top: 50px;
  width: 100%;
}

.marquee-track {
  display: flex;
  animation: scroll 20s linear infinite;
}

.marquee-track img {
  height: 200px;
  width: auto;
  margin-right: 20px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.marquee-track:hover {
  animation-play-state: paused;
  cursor: grab;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 768px) {
  .home-content h1 {
    font-size: 32px;
  }

  .marquee-track img {
    height: 140px;
  }
}
.home-logo {
  margin: 20px 0;
}

.home-logo img {
  max-width: 180px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.music-button {
  position: fixed;
 left: 1rem;
 bottom: 30%;
  background: #6b46c1;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 2px 24px;
  font-size: 16px;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
  
}


/* Mobile-friendly adjustments */
@media (max-width: 480px) {
  .music-button {
    bottom: 10px;
    right: 10px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

.lower-third-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #1e1e1e;
  color: white;
  display: none; /* hidden by default */
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
  border-top: 2px solid #1db954;
  z-index: 999;
}

.ltp-content {
  display: flex;
  align-items: center;
  gap: 20px;
  width: calc(100% - 50px);
}

.ltp-cover {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

.ltp-info {
  flex: 1;
}

.ltp-info h4, .ltp-info p {
  margin: 3px 0;
}

.ltp-controls {
  display: flex;
  gap: 10px;
  margin: 5px 0;
}

.ltp-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.ltp-controls button:hover {
  color: #1db954;
}

.ltp-time {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #aaa;
}

.ltp-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.ltp-close:hover {
  color: red;
}

input[type="range"] {
  width: 100%;
}






.lower-third-player {
  position: fixed;
  bottom: -120px;
  left: 0;
  width: 100%;
  background: var(--first-color-dark);
  color: var(--body-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.4);
  border-top: 2px solid var(--first-color-light);
  transition: bottom 0.4s ease;
  z-index: 9999;
  font-family: var(--body-font);
}

.lower-third-player.show {
  bottom: 0;
}

.ltp-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.ltp-cover {
  width: 55px;
  height: 55px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.ltp-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.ltp-title {
  font-weight: var(--font-bold);
  font-size: var(--normal-font-size);
  color: var(--body-color);
}

.ltp-artist {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.ltp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ltp-btn {
  background: none;
  border: none;
  color: var(--body-color);
  cursor: pointer;
  font-size: 20px;
  transition: color 0.3s ease;
}

.ltp-btn:hover {
  color: var(--first-color-light);
}

#progressBar {
  flex: 1;
  height: 5px;
  accent-color: var(--first-color);
  cursor: pointer;
}

#volume {
  width: 70px;
  accent-color: var(--first-color);
  cursor: pointer;
}

.ltp-close {
  background: none;
  border: none;
  color: var(--body-color);
  font-size: 20px;
  cursor: pointer;
  margin-left: 15px;
  transition: color 0.3s ease;
}

.ltp-close:hover {
  color: var(--first-color-light);
}







/* Dummy trigger button */
.music-button {
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}
.music-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--primary);
}

/* ==== LOWER THIRD PLAYER ==== */
.lower-third-player {
  position: fixed;
  left: 50%;
  bottom: -160px;
  transform: translateX(-50%);
  width: min(100%, 1100px);
  background: linear-gradient(135deg, rgba(20,20,20,0.95), rgba(35,35,35,0.85));
  backdrop-filter: var(--blur);
  border-top: 2px solid var(--primary);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 10000;
}

.lower-third-player.show {
  bottom: 0;
  opacity: 1;
}

/* Left Section */
.player-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.cover {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  transition: all 0.4s ease;
}
.cover.playing {
  box-shadow: 0 0 20px var(--primary);
  transform: scale(1.05);
}

.song-info h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.song-info p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-light);
}

/* Center Controls */
.player-center {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* align left */
  justify-content: center;
  padding-left: -425px; /* adjust left shift */
}
/* Fine-tune button alignment */
.control-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-left: -150px; /* pushes them slightly left */
}
/* === Modern control buttons with purple glow === */
.control-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
}

/* On hover — subtle glow */
.control-btn:hover {
  color: #a259ff;
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(162, 89, 255, 0.6);
  background: rgba(162, 89, 255, 0.08);
}

/* Active (pressed) feedback */
.control-btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 6px rgba(162, 89, 255, 0.9);
}

/* The main Play button — slightly larger and more glow */
.play-btn {
  color: #a259ff;
  font-size: 28px;
  background: rgba(162, 89, 255, 0.15);
  box-shadow: 0 0 18px rgba(162, 89, 255, 0.5);
  transition: all 0.3s ease;
}

/* Hover pulse animation for Play button */
.play-btn:hover {
  animation: pulseControl 1.6s infinite ease-in-out;
}

/* Keyframes for glowing pulse */
@keyframes pulseControl {
  0% { box-shadow: 0 0 10px rgba(162, 89, 255, 0.5); }
  50% { box-shadow: 0 0 22px rgba(162, 89, 255, 0.9); }
  100% { box-shadow: 0 0 10px rgba(162, 89, 255, 0.5); }
}
/* Move ONLY the volume section down */
.player-right #volume,
.player-right i.fa-volume-high {
  position: relative;
  top: 23px; /* move vertically down */
}
/* Optional: fine-tune the down movement */
@media (min-width: 768px) {
  .player-right #volume,
  .player-right i.fa-volume-high {
    top: 8px; /* a bit more on desktop */
  }
}

/* Progress bar alignment */
.progress-bar-container {
  display: flex;
  align-items: ;
  justify-content: flex-start; /* Keep aligned left */
  gap: 10px;
  width: 100%; /* Optional: shrink width for better visual balance */
  margin-left: -115px; /* Ensure no default centering */
}
.time {
  font-size: 0.75rem;
  color: var(--text-light);
  min-width: 38px;
  text-align: center;
}
#progressBar {
  width: 100%;
  height: 4px;
  accent-color: var(--primary);
  cursor: pointer;
}
#progressBar {
  width: 100%;
  height: 4px;
  accent-color: var(--first-color, #a259ff);
  cursor: pointer;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 0 rgba(162, 89, 255, 0));
}

/* On hover: soft purple glow */
#progressBar:hover {
  filter: drop-shadow(0 0 6px rgba(162, 89, 255, 0.6));
  accent-color: #a259ff;
}

/* ==== PLAYER RIGHT SECTION FIX ==== */
.player-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
}

.player-right #volume,
.player-right i.fa-volume-xmark,
.player-right i.fa-volume-high {
  position: relative;
  top: 23px; /* move vertically down */
}


/* Move both mute button + volume slider down together */
.player-right #mute,
.player-right #volume , {
  position: relative;
  top: -23px; /* Adjust how far down they sit */
  transition: all 0.3s ease;
  z-index: 2;
}
/* Mute button styling - frosty & glossy theme */



/* Add a purple glow hover effect to the slider */

/* On hover, the slider glows */


/* Optional: add hover glow to volume icon too */

/* Optional: subtle pulse while hovering */
#progressBar:hover {
  animation: pulseGlow 1.5s infinite ease-in-out;
}
.close-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.close-btn:hover {
  color: #b388ff; /* premium purple accent */
  background: rgba(179, 136, 255, 0.15);
  box-shadow: 0 0 10px rgba(179, 136, 255, 0.4);
  transform: rotate(90deg) scale(1.1);
}
/* === Desktop enhancement: Add extra gap between close & volume === */
@media (min-width: 751px) {
  .player-right {
    gap: 25px; /* adds spacing between close button and volume controls */
  }
}
/* Responsive */
@media (max-width: 768px) {
  .lower-third-player {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 16px;
    
  }
  .player-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;  /* centers horizontally */
    justify-content: center;
    text-align: center;
    margin-top: 10px;
    margin-left: -15px;
  }
  .player-right {
    justify-content: center;
  }
  .control-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 8px;
    margin-left: -9px;
  }
   .progress-bar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* centers progress bar & times */
    gap: 8px;
    width: 90%; /* narrower for better centering */
    margin: 0 auto; /* centers within player */
  }

  .time {
    font-size: 0.8rem;
    color: #bfbfbf;
  }

  #progressBar {
    width: 100%;
    max-width: 400px;
    height: 6px;
  }
}


.music-trigger {
  background: var(--first-color, #1db954);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.music-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px var(--first-color, #1db954);
}

/* LOWER THIRD PLAYER */
.lower-third-player {
  position: fixed;
  left: 50%;
  bottom: -150px;
  transform: translateX(-50%);
  width: min(100%, 1100px);
  background: linear-gradient(135deg, rgba(20,20,20,0.95), rgba(35,35,35,0.85));
  backdrop-filter: blur(20px);
  border-top: 2px solid var(--first-color, #1db954);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 10000;
}

.lower-third-player.show {
  bottom: 0;
  opacity: 1;
}

/* Player sections */
.player-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.cover {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}
.song-info h4 { margin: 0; font-weight: 600; font-size: 1rem; }
.song-info p { margin: 4px 0 0; font-size: 0.85rem; color: #bbb; }

.player-center {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.control-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 6px;
}
.control-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.control-btn:hover { color: var(--first-color, #1db954); transform: scale(1.2); }

.play-btn { font-size: 28px; color: var(--first-color, #1db954); }

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.time {
  font-size: 0.75rem;
  color: #b3b3b3;
  min-width: 38px;
  text-align: center;
}
#progressBar {
  width: 100%;
  height: 4px;
  accent-color: var(--first-color, #1db954);
  cursor: pointer;
}

.player-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
#volume { width: 80px; accent-color: var(--first-color, #1db954); cursor: pointer; }
.close-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
  transition: color .3s;
}
.close-btn:hover { color: red; }

@media (max-width: 768px) {
  .lower-third-player { flex-direction: column; align-items: stretch; text-align: center; padding: 16px; }
  .player-right { justify-content: center; }
}

/* ----------------- Lower-third player (Mobile-Ready Version) ----------------- */
.lower-third-player {
  position: fixed;
  left: 50%;
  bottom: -180px;
  transform: translateX(-50%);
  width: min(100%, 1100px);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.85));
  border-top: 2px solid var(--first-color);
  backdrop-filter: blur(16px);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  z-index: 999;
  transition: bottom .38s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  opacity: 0;
  color: #fff;
}

.lower-third-player.show {
  bottom: 0;
  opacity: 1;
}

/* Desktop layout */
.player-left { display:flex; align-items:center; gap:12px; flex:1; min-width:180px; }
.player-center { flex:2; display:flex; flex-direction:column; gap:8px; align-items:center; }
.player-right { display:flex; gap:10px; align-items:center; justify-content:flex-end; position:relative; }

/* Cover and song info */
.cover { width:60px; height:60px; border-radius:10px; background-size:cover; background-position:center; flex-shrink:0; box-shadow:0 6px 18px rgba(0,0,0,0.3); }
.song-info h4 { margin:0; font-size:16px; font-weight:600; color:#fff; }
.song-info p { margin:0; font-size:13px; color:#ccc; }

/* Controls */
.control-buttons { display:flex; gap:14px; align-items:center; }

.control-btn:hover { background: rgba(255,255,255,0.1); transform: scale(1.1); }
.play-btn { font-size:28px; color:var(--first-color); }

/* Progress */
.progress-bar-container {
  display:flex; align-items:center; gap:8px;
  width:100%; min-width:200px;
}
.time { font-size:12px; color:#aaa; min-width:40px; text-align:center; }
#progressBar { width:100%; accent-color:var(--first-color); cursor:pointer; height:6px; }

/* Volume + close */
#volume { width:90px; accent-color:var(--first-color); cursor:pointer; }
/* --- Close Button (Universal Placement) --- */
.close-btn {
  position: absolute;
  top: -19px;
  right: 10px; /* ✅ This moves it to top-right */
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  border-radius: 25%;
  padding: 1.5px 1.5px;
  z-index: 1000;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}
.close-btn:hover {
  color: var(--first-color, #1db954);
  background: rgba(255,255,255,0.15);
}


/* ----------------- MOBILE ADAPTIVE ----------------- */
@media (max-width:768px) {
  .lower-third-player {
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100%;
    padding:16px 12px 24px;
    border-radius:20px 20px 0 0;
  }
  .player-left {
    flex-direction:column;
    gap:10px;
    margin-bottom:10px;
  }
  .cover { width:90px; height:90px; }
  .song-info h4 { font-size:17px; }
  .player-center { width:100%; }
  .control-buttons { justify-content:center; flex-wrap:wrap; }
  #progressBar { height:8px; }
  #volume { width:120px; }
  .player-right {
    width:100%;
    justify-content:center;
    margin-top:8px;
  }
  .close-btn {
    position:absolute;
    right:12px;
    top:12px;
    transform:none;
    color:#fff;
    z-index:1000;
  }
}












/* --- Floating Glassmorphic Mini Player --- */
.mini-player {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(25, 25, 25, 0.35);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #fff;
  border-radius: 18px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  z-index: 9999;
  width: 310px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease-in-out;
}

/* Hidden state when player is closed */
.mini-player.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px);
}

/* Info (cover + text) */
.mini-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.mini-cover {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.mini-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.mini-artist {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Control buttons arranged side-by-side */
.mini-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.mini-controls button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.mini-controls button:hover {
  transform: scale(1.25);
  color: var(--first-color, #1db954);
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .mini-player {
    width: 90%;
    left: 5%;
    bottom: 16px;
    padding: 10px 14px;
    gap: 12px;
  }

  .mini-cover {
    width: 42px;
    height: 42px;
  }

  .mini-title {
    font-size: 0.85rem;
  }

  .mini-artist {
    font-size: 0.75rem;
  }

  .mini-controls button {
    font-size: 1.1rem;
  }
}

.music-trigger {
  position: relative;
  background: rgba(255, 255, 255, 0.08); /* Transparent base */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Glossy light streak */
.music-trigger::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.05),
    transparent 60%
  );
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Hover state with purple tint */
.music-trigger:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(186, 85, 211, 0.6); /* soft purple border */
  box-shadow: 0 8px 35px rgba(186, 85, 211, 0.5); /* purple glow */
  background: rgba(186, 85, 211, 0.15); /* subtle purple tint */
}

/* Glossy shimmer appears */
.music-trigger:hover::before {
  opacity: 1;
}

/* Active click */
.music-trigger:active {
  transform: scale(0.98);
  box-shadow: 0 4px 20px rgba(186, 85, 211, 0.3);
}

/* Icon color */
.music-trigger i {
  color: #b86bff; /* Light purple icon */
  font-size: 1.2rem;
}°

#miniPlayer {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
  color: #fff;
  cursor: pointer;
  transition: all 0.35s ease;
  z-index: 9999;
}

/* Hover – add purple tint and glow */
#miniPlayer:hover {
  transform: translateY(-3px) scale(1.03);
  background: rgba(186, 85, 211, 0.15); /* purple glass tint */
  border-color: rgba(186, 85, 211, 0.6);
  box-shadow: 0 8px 35px rgba(186, 85, 211, 0.5); /* glowing purple aura */
}

/* Icon Buttons inside the Mini Player */
#miniPlayer button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover effect for icons */
#miniPlayer button:hover {
  color: #b86bff; /* soft purple */
  transform: scale(1.15);
}

/* Active (clicked) state */
#miniPlayer button:active {
  transform: scale(0.95);
  color: #d6a7ff;
}

/* Optional: make cover image round and sleek */
#miniPlayer .cover {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 10px rgba(186, 85, 211, 0.4);
}