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

.container-fluid{
    margin-inline: 0px;
}

/*NavBars Styling*/

.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%);
}




/*Top Image Section Styling*/


.topImageText{
    margin-top: 140px;
    color:white;
}

.topImageSection {
    /* Background image */
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3) ), url('../images/topbanner.jpg');

    /* Full-screen */
    height: 400px;
    /* Center the background image */
    background-position: center;
    /* Scale and zoom in the image */
    background-size: cover;
    /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
    position: relative;
    /* Add a white text color to all elements inside the .bgimg container */
    color: rgb(235, 235, 235);
    /* Add a font */
    font-family: "Courier New", Courier, monospace;
    /* Set the font-size to 25 pixels */
    font-size: 25px;
}

/* Small screens: make the background bigger! (height increase) */
@media (max-width: 800px) {
    .topImageSection {
        height: 600px; /* Increase height for small screens */
    }
    .mainNavMenu li a{
        margin-left: 0px;
    }
}


/*About Contact Styling*/

.aboutContactSection{
    margin-top: 70px;
    margin-inline: 40px;
}

.aboutContactSection img{
    padding: 5px;
    width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.aboutContactText{
    padding-top:15px;
    padding-left:20px;
}
.aboutContactText h2{
    font-size: 28px;
    color:black;
}

.aboutContactText p{
    font-size: 16px;
    color:#474747
}

/* Small screens: make the background bigger! (height increase) */
@media (max-width: 800px) {
    .aboutContactSection img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
        padding: 5px;
        width: 80%;
        object-fit: contain;
    }
    .aboutContactSection{
        margin-top: 40px;
    }
    .aboutContactText{
        padding-inline: 0px;
        text-align: center;
    }

    .aboutSection{
        margin-bottom:20px;
    }
    .contactSection{
        margin-bottom:20px;
    }
}

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

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

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

.studioText p{
    font-size: 14px;
    color:#474747;
    margin-bottom: 35px;;
}
/* Small screens: make the background bigger! (height increase) */
@media (max-width: 800px) {
    .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;
    }
}







/*Album Image Styling*/
.albumImage{
    margin-top: 70px;
    margin-bottom:70px;
    /* The image used */
    background-image: url("../images/album.jpg");
    
    /* Set a specific height */
    min-height: 440px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*Album Introduction Text Styling*/
.albumIntroText{
    color: black;
    text-align: center;
    margin-inline: 400px;
}

.albumIntroText h2{
    font-size: 38px;
    color:black;
    padding-bottom: 10px;
}
.albumIntroText h3{
    font-size: 25px;
    color:black;
    padding-bottom: 4px;
}

.albumIntroText p{
    font-size: 16px;
    margin-bottom: 35px;;
}
@media (max-width: 1400px) {
    .albumIntroText{
        color: black;
        text-align: center;
        margin-inline: 200px;
    }
}
@media (max-width: 800px) {
    .albumIntroText{
        color: black;
        text-align: center;
        margin-inline: 60px;
    }
}

.albumVideos{
    overflow-x: hidden;
}
.albumVideos h5{
    font-size: 40px;   
}

.albumVideos p{
    font-size: 14px;   
    font-weight: 800; 
    color: #6d6969;
}

.albumVideos a{
    font-size: 40px;
    color: black;
    transition: 0.3s;
}
.albumVideos a:hover{
    color: #03297c;
}

@media (max-width: 800px) {
    .albumVideos h5{
        padding-top: 14px;
        text-align: center;
    }
    
    .albumVideos p{
        text-align: center;
    }

    .albumVideos {
        padding-inline: 0px;
        margin-inline: 0px;
    }

    .albumVideos .row {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .albumVideos .col-12 {
        width: 100%; /* Ensure the columns take full width */
        margin: 0 auto; /* Center columns */
    }
    
    .albumVideos .col-md-6 {
        flex: 0 0 100%; /* Make columns 100% width on small screens */
    }
}