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


/*Navbar Styling*/
/*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 Section Styling*/

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

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

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

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

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

}

/*reach Out And Follow The Sound Styling*/
.phoneEmailDark{
    color: black;
    transition: 0.2s;
}
.phoneEmailDark:hover{
    color: #03297c !important;
}

.reachOut, .followTheSound{
    margin-top: 70px;
}
.reachOut h2,.followTheSound h2{
    font-size: 32px;
    color:black;
    padding-bottom: 10px;
}
.reachOut p,.followTheSound p{
    font-size: 17px;
    color:black;
    margin-bottom: 35px;
    padding-inline:120px;
}

.socialMediaIconBottom{
    transition-duration: 0.1s;
    height:30px;
    width:30px;
}

.socialMediaIconBottom:hover{
    filter: invert(8%) sepia(84%) saturate(4940%) hue-rotate(223deg) brightness(92%) contrast(98%);
}

@media (max-width:570px){
    .reachOut p,.followTheSound p{
        padding-inline:40px;
    }
}




/*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;
    margin-top: 100px;
}

@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;
    }
}