@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.side { grid-area: s; }
.side2 { grid-area: s2; }
.f { grid-area: footer; }
.h { grid-area: header; }
.h1_1 { grid-area: h1_1; }
.h2_2 { grid-area: h2_2; }
.h3_3 { grid-area: h3_3; }
.h4_4 { grid-area: h4_4; }
.h5_5 { grid-area: h5_5; }
.h6_6 { grid-area: h6_6; }
.h7_7 { grid-area: h7_7; }
.h8_8 { grid-area: h8_8; }
.h9_9 { grid-area: h9_9; }
.h10_10 { grid-area: h10_10; }
.h11_11 { grid-area: h11_11; }
.h1 { grid-area: h1; }
.h2 { grid-area: h2; }
.h3 { grid-area: h3; }
.h4 { grid-area: h4; }
.h5 { grid-area: h5; }
.h6 { grid-area: h6; }
.h7 { grid-area: h7; }
.h8 { grid-area: h8; }
.h9 { grid-area: h9; }
.h10 { grid-area: h10; }
.h11 { grid-area: h11; }
.nav { grid-area: navbar; }
.image_1 { grid-area: image_1; }
.image_2 { grid-area: image_2; }
.image_3 { grid-area: image_3; }
.image_4 { grid-area: image_4; }
.image_5 { grid-area: image_5; }
.image_6 { grid-area: image_6; }
.image_7 { grid-area: image_7; }
.image_8 { grid-area: image_8; }
.image_9 { grid-area: image_9; }
.image_10 { grid-area: image_10; }
.image_11 { grid-area: image_11; }
.image_12 { grid-area: image_12; }
.image_13 { grid-area: image_13; }
.image_14 { grid-area: image_14; }
.image_15 { grid-area: image_15; }
.p1 { grid-area: paragraph_1; }
.p2 { grid-area: paragraph_2; }
.p3 { grid-area: paragraph_3; }
.p4 { grid-area: paragraph_4; }
.p5 { grid-area: paragraph_5; }
.p6 { grid-area: paragraph_6; }
.p7 { grid-area: paragraph_7; }
.p8 { grid-area: paragraph_8; }
.p9 { grid-area: paragraph_9; }
.p10 { grid-area: p1paragraph_10; }
.p11 { grid-area: paragraph_11; }
.map { grid-area: Google_Map; }
.Video_1 { grid-area: Video_1; }
.Video_2 { grid-area: Video_2; }
.Video_3 { grid-area: Video_3; }

.grid_container {
    display: grid;
    padding: 10px;
    padding-left: 20px;
    gap: 10px;
    width: 70%;
    background-color: rgba(0, 0, 0, 0.8);
}

.grid_container_home {
    grid-template-areas:
        'header header header'
        'paragraph_1 paragraph_1 paragraph_1'
        'paragraph_2 paragraph_2 paragraph_2'
        'image_1 image_2 image_3'
        'image_4 image_5 image_6'
        'image_7 image_7 image_7'
        'Google_Map Google_Map Google_Map'
        'footer footer footer';
}

.grid_container_Contact_Form {
    grid-template-areas: 
        'header header'
        'paragraph_1 paragraph_1'
        'paragraph_2 paragraph_2'
        'paragraph_3 paragraph_3'
        'paragraph_4 paragraph_4'
        'paragraph_5 paragraph_5'
        'footer footer';
}


.grid_container_Song_List {
    grid-template-areas: 
    'h1 h2'
    'list1 list2'
    'h3 h4'
    'list3 list4'
    'h5 h5'
    'list5 list5'
    'image_1 image_1'
    'image_2 image_2'
    'footer footer';
}

.grid_container_Portfolio {
    grid-template-areas: 
    'header header header'
    'image_1 image_2 image_3'
    'image_4 image_5 image_6'
    'image_7 image_8 image_9'
    'image_10 image_11 image_12'
    'image_13 image_14 image_15'
    'Video_1 Video_1 Video_1'
    'Video_2 Video_2 Video_2'
    'Video_3 Video_3 Video_3'
    'footer footer footer';
}

.grid_container_About_Us {
    grid-template-areas: 
    'image_1 h1'
    'image_1 h1_1'
    'image_1 paragraph_1'
    'image_2 h2'
    'image_2 h2_2'
    'image_2 paragraph_2'
    'image_3 h3'
    'image_3 h3_3'
    'image_3 paragraph_3'
    'image_4 h4_4'
    'image_4 h4_4'
    'image_4 paragraph_4'
    'image_5 h5_5'
    'image_5 h5_5'
    'image_5 paragraph_5'
    'image_6 h5_6'
    'image_6 h5_6'
    'image_6 paragraph_6'
    'image_7 h7'
    'image_7 h7_7'
    'image_7 paragraph_7'
    'image_8 h8'
    'image_8 h8_8'
    'image_8 paragraph_8'
    'image_9 h9_9'
    'image_9 h9_9'
    'image_9 paragraph_9'
    'image_10 h10'
    'image_10 h10_10'
    'image_10 paragraph_10'
    'image_11 h11'
    'image_11 h11_11'
    'image_11 paragraph_11'
    'footer footer';
}

.h,.img,.p,.f,.list {
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: x-large;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.list {
    color: #fff;
}

.imgs1 {
    width: 250PX;
    height: 250PX;
}

.h {
    font-size: xx-large;
}

.dropbtn {
    background-color: #231e60;
    color: #fff;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.show {
    display: block;
}

.nav {
    padding: 20px;
    color: #000;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-content: center;
    justify-content: center;
    justify-content: space-around;
}

.sticky {
    position: sticky;
    top: 0;
}

.side {
    width: 50%;
}

.icon {
    border-radius: 10px;
    width: 30px;
    height: 30px;
}

body {
    background-image: url(../Images/Background.png);
}

a {
    text-decoration: none;
    color: #000;
}

a:hover {
    text-decoration: underline;
}

img {
    width: 335px;
}

main {
    display: flex;
    justify-content: space-between;
    align-content: start;
}

div {
    width: 1%;
}

.Hamburger {
    display: none;
}

@media screen and (min-width: 411px) and (max-width: 1024px) {

}

@media screen and (max-width: 410px) {
    .Hamburger {
        display: contents;
    }
    .Not_Hamburger {
        display: none;
    }
}