:root {
    --navBarColour: #333;
    --navTextColour:#ffffff;
    --navItemHover: #575757;

    --navBarMenuColour: #f9f9f9;
    --navBarMenuTextColour: #333;
    --navBarMenuHoverColour: #eeeeee;
    --navBarMenuBorderrColour: #eeeeee;

    --pageBackgroundColour: #ffffff;

    --formTextBackgroundColour: #ffffff;

    --backgroundColour1: #ffffff;
    --backgroundColour2: lightgray;
    --backgroundColour3: #dfdfdf;

    --textColour:#333;
    --textColourLight:#ffffff;

    --buttonColour1: red;
    --buttonColourHover1: rgb(184, 43, 43);

    --buttonColour2: orange;
    --buttonColourHover2: rgb(172, 121, 28);

    --headingFont1: red;
    --headingFont2: #ffffff;


    --backgroundImage1: linear-gradient(270deg, rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59)), url(images/iSDA-Group.jpeg);
    --backgroundImage2: linear-gradient(270deg, rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59)), url(images/Action-shot-singing-and-dancing.JPG);
    --backgroundImage3: linear-gradient(270deg, rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59)), url(images/Private_singing_lesson_Brackley_warwick_leamington_spa.jpg);

    --backgroundImageMobile1: linear-gradient(270deg, rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59)), url(images/iSDA-Group-Mobile.jpeg);
    --backgroundImageMobile2: linear-gradient(270deg, rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59)), url(images/Action-shot-singing-and-dancing.JPG);
    --backgroundImageMobile3: linear-gradient(270deg, rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59)), url(images/Private_singing_lesson_Brackley_warwick_leamington_spa_mobile.jpeg);
  }

body {
    margin: 0;
    font-family: 'Comic Neue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;;
    color: var(--textColour);
    background-color: var(--pageBackgroundColour);
  }

  footer {
    background-color: var(--navBarColour) ;
    color: var(--navTextColour);
    height: 120px;
    margin-top: 40px;
    align-content: center;
    font-size: 14px;
  }

  .footerContainer {
    display:flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
  }
  .footerContainer a, .footerContainer a:visited {
    color: var(--navTextColour);
    text-decoration: none;
  }



.contentSection{
    width: 100%; 

}


.headlineFont{
    font-family: Satisfy;
}

.headline {
    max-width: 520px;
    font-size: 38px;
    line-height: 1.2;
}

.sectionTitle {
    width:100%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 5px;
}

.sectionTitle h2 {
    font-size: 51px;;
}

.headingFont1 {
    color: var(--headingFont1);
}

.headingFont2 {
    color: var(--headingFont2);
}

.sectionTitle h1, h2, h3, h4 {
    margin: 0;
}

.contentWidth {
    max-Width:1024px;
    margin: auto;
 }

 .fullHeightDiv {
    position: relative;
    min-height: 100vh; /* Full height of the viewport */
    width: 100%; /* Maximum width */
}

.flexColumns{
    
    display: flex;
    align-items: top;
    justify-content: center;
    flex-wrap: wrap;
    gap:40px
    
}

.flexColumn{
    display: flex;
    flex-direction: column;

    justify-content: center;
    gap:50px;


      
}

.scrollList{
    display: flex;
    gap:0px;

    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    /* Hide scrollbar in Firefox */
    scrollbar-width: none;

     /* Hide scrollbar in IE and Edge */
     -ms-overflow-style: none;

     margin: 0px;
     padding: 0px;
}

/* Hide scrollbar in webkit */
.scrollList::-webkit-scrollbar {
    display: none;
}

.list{
    display: flex;
    gap:0px;

    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    /* Hide scrollbar in Firefox */
    scrollbar-width: none;

     /* Hide scrollbar in IE and Edge */
     -ms-overflow-style: none;

     margin: 0px;
     padding: 0px;
}



/* Hide scrollbar in webkit */
.list::-webkit-scrollbar {
    display: none;
}

.scrollItem {
    flex-shrink: 0;
    font-style: italic;
    width: 33.33%;
    scroll-snap-align: center;

}

.item {
    flex-shrink: 0;
    font-style: italic;
    width: 33.33%;
    scroll-snap-align: center;

}

.content {
    padding: 20px;;

  }

.alignLeft {
    text-align: left;
}

.alignRight {
    text-align: right;
}

.alignCenter {
    text-align: center;
}

.column300 {
    max-width: 300px;
    margin:10px;
    width:100%;
}
.column300 img {
    
    max-width: 300px;
    width:100%;
}

.column400HeroImage {
    max-width: 400px;
    margin:10px;
    width:100%;
}

.column400HeroImage img {
    max-width: 300px;
    width:100%;
}

.column400 {
    max-width: 400px;
    margin:10px;
    width:100%;

}

.column840 {
    max-width: 840px;
    margin:5px;
    width:100%;
}

.column400 H1 {
    margin: 0;
}

.column400 img {
    max-width: 400px;
    width:100%;
}


.flexSpaceBetween {
    width:100%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    width:100%;
}

.fiveStars { 
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    width:140px;
}


.buttonPanel {
    display: flex;
    justify-content: center;
    gap:10px;
    margin:auto;
    padding: 2px;
}

.button {
    border: none;
    padding: 14px 18px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;

    border-radius: 4px;  
    width: 190px;

}
.button:hover {
    cursor: pointer;
}

.button1{
    background-color: var(--buttonColour1); 
    color: var(--textColourLight);
}
.button1:hover {
    background-color: var(--buttonColourHover1); 
}

.button2{
    background-color: var(--buttonColour2); 
    color: var(--textColourLight);
}
.button2:hover {
    background-color: var(--buttonColourHover2); 
}

.imageShadow {
    border-radius: 15px;
    box-shadow: 2px 8px 8px rgba(0, 0, 0, 0.4);
}

.backgroundColour1 {
    background-color: var(--backgroundColour1);
}

.backgroundColour2 {
    background-color: var(--backgroundColour2);
}

.backgroundColour3 {
    background-color: var(--backgroundColour3);
}

.textLightColour {
    color: var(--textColourLight);
}

.backgroundImage1 {
    background-image: var(--backgroundImage1);
    height: 100%;
    width: 100%;
    background-blend-mode: darken;
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
}

.backgroundImage2 {
    background-image: var(--backgroundImage2);
    height: 100%;
    width: 100%;
    background-blend-mode: darken;
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
}

.backgroundImage3 {
    background-image: var(--backgroundImage3);
    height: 100%;
    width: 100%;
    background-blend-mode: darken;
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
}


.svgIcon {
    max-width: 16px;
}

.svgStarIcon {
    max-width: 26px;

}

.svgSocialMedia {
    max-width: 36px !important;
}

.svgArrow {
    max-width: 30px !important;
    padding-left: 20px;
    padding-right: 20px;
}

.cursorPointer:hover {
    cursor:pointer;
}



.font-16{
    font-size: 16px;
}

.font-20{
    font-size: 20px;
}

.font-22{
    font-size: 22px;
}

.font-24{
    font-size: 24px;
}

.font-28{
    font-size: 28px;
}

.font-30{
    font-size: 30px;
}

.font-34{
    font-size: 34px;
}

.font-40{
    font-size: 40px;
}

.font-44{
    font-size: 44px;
}

.font-50{
    font-size: 50px;
}




.p-bottom-10 {
    padding-bottom:10px;
}
.p-bottom-40 {
    padding-bottom:40px;
}
.p-bottom-60 {
    padding-bottom:60px;
}



.p-top-10 {
    padding-top:10px;
}
.p-top-20 {
    padding-top:20px;
}
.p-top-30 {
    padding-top:30px;
}
.p-top-40 {
    padding-top:40px;
}
.p-top-60 {
    padding-top:60px;
}

.alignTextCenter {
    text-align: center;
}

.alignContentCenter {
    align-content: center;
}

.alignItemsCenter {
    align-items: center;
}

.positionAbsoluteTop {
    position: absolute;
    top:0;
}

.hr-light {
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    border-style:inset;
    border-width: 0.5px;
    color:#e6e6e6;
    background-color:rgb(255, 255, 255);
  }





/* Email Form */
.form-body {
    border-color: var(--navBarColour);
    border-width: 1px;
    border-style:solid;
    padding-top: 10px;
    padding-bottom: 10px; 
    padding-inline: 30px;
    border-radius: 20px;
    background-color: var(--backgroundColour3);
    margin:6px;
}

.form-field {
    background: var(--formTextBackgroundColour);
    border: none;
    border-radius: 5px;
    color: var(--textColour);
    padding: 10px;
    width: 300px;
    font-size: 18px;
}



.form-group {
    padding-top:20px;
}

.form-label {
 
    font-size: 20px;
    color: var(--textColour);
}

.input-group{
    padding-top: 8px;

}

.textLink {
    color: var(--textColour);
    text-decoration: none;
}

.textLink :hover {
    color: var(--textColour);
    font-weight: bold;
    text-decoration: none;
}

.columnImage{
    max-width: 380px;
    width:100%;

}




/* Nav bar ____________________   */

header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.navbarContainer {
width:100%;
height:60px;
background-color: var(--navBarColour);
color: var(--navTextColour);
}

.navbar {
height:60px;
display:flex;
justify-content: space-between;
align-items: center;
margin-left: 16px;
margin-right: 16px;
}

.navbarLogo {
height: 100%;
max-height: 40px;
padding: 0;
margin: 0;
}

.navbarLogo > img{
height: 40px;
padding: 0;
margin: 0;
}

.nav-links {
list-style: none;
display: flex;
gap: 5px;
}

.nav-links li {
    margin: 0;
    position: relative;
}

.nav-links a {
    text-decoration: none;
    font-size: 18px;
    color: var(--navTextColour);
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.nav-links a img {
    vertical-align:middle;
    
}

.nav-links a:hover {
    background-color: var(--navItemHover);
}

.svgLink {
    padding-right: 10px;
}

.svgToolBarIcon{
    max-width: 24px;
}


/* Dropdown menu styles */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 26px;
    left: 0;
    font-size: 16px;
    background-color: var(--navBarMenuColour);
    border-color: var(--navBarMenuBorderrColour);
    border-width: 1px;
    border-style: solid;
    background-clip: padding-box;
    list-style: none;
    padding:0;
    margin: 0;
    width: 300px;
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--navBarMenuTextColour);
}

.dropdown-menu a:hover {
    background-color: var(--navBarMenuHoverColour);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* Hamburger menu styles */
.hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.hamburger .bar {
    height: 3px;
    width: 25px;
    background-color: white;
    margin: 4px 0;
    transition: all 0.3s ease;
    color: var(--navTextColour);
}

.hamburgerButton {
    background-color: transparent;
    color: var(--navTextColour);
    border-color: var(--navTextColour);
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    
    cursor: pointer;
    height:44px;
    width:44px;
}

.hamburgerButton:hover {
    
    background-color: var(--navBarMenuHoverColour);
    color: var(--navBarColour)
    
}

/* Nav bar end ____________________   */

/* Side Nav _______________________  */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0px; 
    position: fixed; /* Stay in place */
    z-index: 1000; /* Stay on top */
    top: 0; /* Stay at the top */
    right: 0px;
    background-color: var(--navBarMenuColour);
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.6s; /* 0.5 second transition effect to slide in the sidenav */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  /* The navigation menu links */
  .sidenavLink {
    padding: 8px 8px 8px 24px;
    text-decoration: none;
    font-size: 18px;
    color: var(--navBarMenuTextColour);
    display: block;
    width:300px;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    background-color: var(--navBarMenuHoverColour);
  }

  .sidebaveTop {
    display:flex;   
    justify-content: space-between;
    align-items: center;
    margin-left: 10px;
  }

  .sidenavTitle {
    color: var(--headingFont1);
  }
  
  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    font-size: 36px;
    color: var(--navBarMenuTextColour);
    text-decoration: none;
    padding: 10px;
  }




@media only screen and (max-width: 800px) {
    .hideDesktop {
        display:flex;
        flex-direction: row;
        gap:5px;
        
    }
    .svgLink {
        width:30px;
    }

    .hideMobile {
        display:none;
    }

    .flexColumns {
        gap:10px;
    }

    .sidenav {
        display:block;
    }
    .mobileCenter{
        text-align: center;
    }

    .backgroundImage1 {
        background-image: var(--backgroundImageMobile1);
    }

    .backgroundImage2 {
        background-image: var(--backgroundImageMobile2);
    }

    .backgroundImage3 {
        background-image: var(--backgroundImageMobile3);
    }

    .item {
        font-style: italic;
        width: 100%;
    }

    .scrollItem {
        font-style: italic;
        width: 100%;
    }

    .column840 {
        max-width: 400px;
    }

    .column400HeroImage {
        max-width: 400px;
        width:100%;
        text-align: center;

    }
    
    .column400HeroImage img {
        max-width: 250px;
        width:100%;
    }

    .p-top-60{
        padding-top: 40px;

    }

    .p-bottom-40{
        padding-top: 30px;

    }

    .svgToolBarIcon{
    max-width: 30px;
}

  }

  @media only screen and (min-width: 800px) {
    .hideDesktop {
        display:none;
        
    }
    .sidenav {
        display:none;
    }


}