*{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
body {
    overflow-x: hidden;
}
  
  /*NavBars Styling*/

  /*Top border
  .topNavBars{
    border-bottom: 2px solid #000000;
  }*/

  .responsiveNavBg {
      background-color: #474747; /* Bootstrap's dark color */
  }
  
  .mainNavMenu .nav-link {
      color: white;
      transition: 0.2s;
  }
  .mainNavMenu .nav-link:hover {
      color: #03297c !important;
  }
  
  .phoneEmail{
      color: white;
      transition: 0.2s;
  }
  .phoneEmail:hover{
      color: #03297c !important;
  }
  
  
  .lastMainNavItem{
      margin-right: 0px;
  }

  .mainNavMenu li a{
    margin-left: 0px;
}
.custom-active{
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: white;
    transition: 0.2s;
}
.custom-active:hover{
    text-decoration-color: #03297c;
}

.navbar-toggler{
    margin-left: 10px;
}
.navbar-brand{
    margin-inline:48px;
}

@media (max-width: 992px) {
    .navbar-toggler{
        margin-right: 30px;
    }
}

@media (max-width: 366px) {
    .navbar-toggler{
        margin: 0px;
    }
}
@media (max-width: 330px) {
    .navbar-toggler{
        margin-inline: auto;
    }
    .navbar-brand, h1{
        margin-inline: auto;
    }
}

/* Large screens (≥992px): no background */
@media (min-width: 992px) {
    .responsiveNavBg {
        background-color: transparent !important; /* Default: Transparent background */
    }
    .mainNavMenu .nav-link{
        color: black !important;
    }
    .lastMainNavItem{
        margin-right: 56px;
    }
    .custom-active{
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: black;
    }
    .mainNavMenu li a{
        margin-left: 50px;
    }
}
  
  .topSocialsBar{
      font-style: none;
      color: white;
      background-color: #474747;
      max-width: 100%;
  }
  
  .navbar-brand, h1{
      font-style: none;
      color: black;
      transition: 0.2s;
  }
  
  .navbar-brand, h1:hover {
      color: #03297c !important;
  }
  
  .topNavBar{
      font-style: none;
      color: black;
  }
  .navbar-nav, .nav-item, a{
      font-style: none;
      color: white;
  }
  
  .socialMediaIcon{
      filter: invert(100%) sepia(0%) saturate(8%) hue-rotate(222deg) brightness(102%) contrast(101%);
      transition-duration: 0.1s;
      height:30px;
      width:30px;
  }
  
.socialMediaIcon:hover{
    filter: invert(8%) sepia(84%) saturate(4940%) hue-rotate(223deg) brightness(92%) contrast(98%);
}

  /*Studio Styling*/
.studioSection{
    margin-top: 20px;
    margin-inline: 40px;
    max-width: 100%;
}

.studioSection img{
    object-fit: contain;
    margin: 5px;
    padding: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    align-self: center;
}

.studioText{
    padding-top:15px;
    padding-left:20px;
    padding-right: 120px;
    padding-bottom:15px;
}
.studioText h2{
    font-size: 44px;
    color:black;
    padding-bottom: 10px;
}
.studioText h3{
    font-size: 20px;
    color:black;
    padding-bottom: 4px;
}

.studioText p{
    font-size: 14px;
    color:#474747;
    margin-bottom: 35px;
}

@media (max-width: 875px) {
    .studioSection img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
        padding: 5px;
        width: 80%;
        object-fit: contain;
        
    }
    .studioSection{
        margin-top: 40px;
    }
    .studioText{
        padding-inline: 0px;
        text-align: center;
    }
}
@media (max-width: 500px) {
    .studioSection img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
        padding: 5px;
        width: 100%;
        object-fit: contain;
        
    }
    .studioSection{
        padding-inline: 0px;
        text-align: center;
        margin-inline:0px;
    }
}

/*Bring Your Music To Life Styling*/
.bringMusicToLife{
    margin-top: 70px;
}
.bringMusicToLife h2{
    font-size: 44px;
    color:black;
    padding-bottom: 10px;
}
.bringMusicToLife p{
    font-size: 17px;
    color:black;
    margin-bottom: 35px;
    padding-inline:120px;
}

/*Testimonial Section*/
.testimonial{
    margin-top: 40px;
    margin-inline: 40px;
    max-width: 100%;
}

.testimonial h2{
    font-size: 44px;
    color:black;
    padding-bottom: 10px;
}
.testimonial .testimonialText{
    font-size: 20px;
    color:black;
    margin-bottom: 20px;
}

.testimonial .avatar img{
    border-radius: 60px;
    height: 45px;
    width: 45px;
    padding:0;
    margin: 0px 0px 0px 20px;
}

.testimonial .avatar .avatarName{
    font-size: 11px;
    color:#474747;
    padding:0;
    margin:0;
}
.testimonial .avatar .avatarOccupation{
    font-size: 11px;
    color:black;
    padding:0;
    margin:0;
}

.testimonial .testimonialCard{
    border-radius: 10px;
    border: 0.5px solid #aeadad;
    /*Top Right Bottom Left*/
    padding:20px;
    margin: 30px,30px,30px,30px;
}

@media (max-width: 800px) {
    .bringMusicToLife p{
        padding-inline:40px;
    }
    .testimonial h2{
        text-align: center;
    }
}

@media (max-width: 550px){
    .testimonial{
        /*Top Right Bottom Left*/
        margin: 30px,10px,30px,10px;
    }
    .testimonialCard {
        margin: 30px,0px,30px,0px;
    }
}

@media (max-width: 460px){
    .testimonial{
        margin-inline: 0px;
    }
    .testimonialCard {
        padding:10px;
        margin-inline: 0px;
    }
}



/*Contact Form Styling*/
.contactForm{
    margin-top: 40px;
    margin-inline: 40px;
}

.contactForm h2{
    text-align:center;
    font-size: 44px;
    color:black;
    padding-bottom: 10px;
}

.contactForm p{
    text-align:center;
    font-size: 17px;
    color:#474747;
    padding-bottom: 30px;
}

.contactForm .actualForm{
    padding-inline:350px;
}

.contactForm .actualForm button{
    width:100%;
}

#backToTopButton button{
    background-color: #474747;
}

@media (max-width: 1500px) {
    .contactForm .actualForm{
        padding-inline:120px;
    }
}
@media (max-width: 800px) {
    .contactForm .actualForm{
        padding-inline:40px;
    }
}
@media (max-width: 450px) {
    .contactForm .actualForm{
        padding-inline:0px;
    }
}