html {
    height: 100%;
}

body {
    background-color: rgb(55, 54, 54);
}

.container {
    background-color: rgb(26, 26, 25);
    margin-left: auto;
    margin-right: auto;
    width: 1900 x 629px;
    font-family: Arial, Helvetica, sans-serif;
}

/*NAV SECTION*/

nav {
    background-color: rgb(0, 0, 0);
    text-align: right;
    padding-top: 14px;
    padding-bottom: 59px;
    padding-right: 50px;
    letter-spacing: .25em;
}

nav a {
    text-decoration: none;
    font-size: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    padding-right: 25px;
    color: white;
}

nav a:hover {
    color: blue;
}

.logo {
    float: left;
    margin-left: 80px;
    margin-top: 15px;
}

.box1 {
    height: 25px;
    padding-bottom: 10px;
    background-color: black;
}

/*HEADER SECTION*/

header {
    background-color: rgb(55, 54, 54);
    padding: auto;
    height: 500px;
    text-align: center;
    padding-top: 30px; /*fixed issue on top border*/
    background-image: url(images/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

header span {
    display: inline-block;
    border: white solid 15px;
    padding: .55em;
}

header h1 {
    font-size: 100px;
    padding-top: 30px;
    text-align: center;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 3px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

header h2 {
    color: white;
    font-size: 25px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .25em;
}

/*MAIN SECTION*/

main {
    background-color: rgb(0, 0, 0);
    height: 450px;
    text-align: center;
    padding-top: 40px;
    display: flex;
}

        /* Contact */

.contact {
    background-color: rgb(47, 47, 47);
    width: 1550px;
    height: 600px;
    margin-left: 3%;
    margin-right: 1%;
    display: inline-block;
    border-radius: 10%;
    border-color: rgb(250, 202, 138) solid 45px;
}

    .contact h2 {
        color: white;
        font-size: 35px;
        text-align: center;
        margin-bottom: 65px;
    }

    .contact-info h3 {
        color: white;
        font-size: 25px;
    }

    .contact h2 span {
        display: inline-block;
        border-bottom: rgb(250, 202, 138) dashed 5px;
    }

    .contact a{
        text-decoration: underline;
        color: white;
        margin-left: 15px;
    }

        .contact-info-phone {
            background-color: rgb(47, 47, 47);
            height: 10%;
            width: 75%;
            margin-left: 15px;
            display: flex;
            text-align: center; 
            justify-content: left;
            align-items: center;
            color: white;
         }

         .contact-info-phone a {
            margin-left: 60px;
         }

            .contact-info-mail {
                background-color: rgb(47, 47, 47);
                height: 10%;
                width: 75%;
                margin-left: 13%;
                margin-top: 5px;
                display: flex;
                text-align: center; 
                justify-content: center;
                align-items: center;
                color: white;
                font-size: 15px;
            }

                .contact-info-hours {
                    background-color: rgb(47, 47, 47);
                    height: 26%;
                    width: 75%;
                    display: flex;
                    text-align: center; 
                    justify-content: center;
                    align-items: center;
                    color: white;
                    padding-left: 15px;
                }

                .contact-info-hours .hours {
                    margin-left: 27px;
                  }

                    .contact-info-location {
                        background-color: rgb(47, 47, 47);
                        height: 10%;
                        width: 75%;
                        display: flex;
                        text-align: center; 
                        justify-content: center;
                        align-items: center;
                        color: white;
                        padding-left: 20px;
                        margin-top: 10px;
                    }

                    .contact-info-location .location {
                        padding-left: 20px;
                    }

    .material-symbols-outlined {
    font-variation-settings:
    'FILL' 100,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    color: white;
    font-size: 25px;
}

        /* Testimony*/

.testimony {
    background-color: rgb(47, 47, 47);
    width: 1550px;
    height: 600px;
    margin-left: 1%;
    margin-right: 3%;
    border-radius: 10%;
}

.testimony h2 {
    color: white;
    text-align: center;
    font-size: 25px;
}

.testimony h2 span {
    display: inline-block;
    border-bottom: rgb(250, 202, 138) dashed 5px;
    padding: .2rem;
    width: 170px;
}
    
.testimonies {
    background-color: rgb(36, 35, 35);
    height: 450px;
    width: 300px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    /* overflow: hidden; */
}

.testimonies .name {
    display: flex;
    height: 30px;
    padding-top: 5px;
}

.testimonies .name p{
    height: 20px;
    width: auto;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    font-size: 20px;
    color: white;
}

.testimonies .review {
    height: 15px;
    width: 105px;
    display: inline;
}

.testimonies .review p {
    height: 15px;
    width: 105px;
    color: orange;
    margin-right: 100%;
    font-size: 15px;
    padding-top: 3px;
}

.testimonies .message {
    display: flex;
    align-items: center;
    justify-content: center;    
    margin-right: 100%;
    width: 100%;
}

.testimonies .message p {
    height: auto;
    width: 500px;
    font-size: 15px;
    margin: 0;
    color: white;
}

.testimonies .message p .bx {
    color: orange;
}
.testimonies p .bx {
    color: orange;
}
.testimonies p .bx-star {
    color: white;
}



        /* About us */

.main {
    background-color: rgb(0, 0, 0);
}

.main h2 {
    text-align: center;
    margin-top: 5px;
    font-size: 60px;
    color: white;
}

.main h2 span {
    display: inline-block;
    border-bottom: rgb(250, 202, 138) dashed 5px;
    padding: .2em;
    width: 600px;
}

.main .dot1 {
    height: 50px;
    width: 50px;
    background-color: grey;
    background-image: url(images/Sky\ profile.jpg);
    border-radius: 50%;
    display: inline-block;
    padding: 10px;
    margin-right: 35px;
    background-position: center;
    background-size: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 1);
    border: 3px solid white;
}

.main .dot2 {
    height: 62.5px;
    width: 62.5px;
    background-color: grey;
    border-radius: 50%;
    display: inline-block;
    padding: 10px;
    margin-right: 35px;
    background-image: url(images/Sky\ profile.jpg);
    background-position: center;
    background-size: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 1);
    border: 3px solid white;
}

.main .dot3 {
    height: 75px;
    width: 75px;
    background-color: grey;
    border-radius: 50%;
    display: inline-block;
    padding: 10px;
    background-image: url(images/eric\ profile.jpg);
    background-position: center;
    background-size: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 1);
    border: 3px solid white;
}

.main .dot4 {
    height: 62.5px;
    width: 62.5px;
    background-color: grey;
    border-radius: 50%;
    display: inline-block;
    padding: 10px;
    margin-left: 35px;
    background-image: url(images/Sky\ profile.jpg);
    background-position: center;
    background-size: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 1);
    border: 3px solid white;
}

.main .dot5 {
    height: 50px;
    width: 50px;
    background-color: grey;
    border-radius: 50%;
    display: inline-block;
    padding: 10px;
    margin-left: 35px;
    background-image: url(images/Sky\ profile.jpg);
    background-position: center;
    background-size: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 1);
    border: 3px solid white;
}

.main p {
    font-size: 25px;
    padding-left: 165px;
    padding-right: 165px;
    padding-bottom: 5px;
    text-align: center;
    color: white;
}

/* ARTIST PROFILES */

.artist-main {
    background-color: rgb(0, 0, 0);
    height: 900px;
    padding-top: 25px;
    text-align: center;
    font-size: 50px;
    color: white;
    padding-bottom: 550px;
}

.artist-main span {
    display: inline-block;
    border-bottom: rgb(250, 202, 138) dashed 5px;
    padding: .2em;
    width: 600px;
}

.text-data span {
    display: inline-block;
    border-bottom: none;
}

.artist {
    background-color: rgb(47, 47, 47);
    height: 130vh;
    width: 95%;
    display: inline-block;
    align-items: center;
    justify-content: space-evenly;
    margin-left: 50px;
    padding-top: 20px;
}

.profile-card {
    display: inline-block;
    flex-direction: column;
    align-items: center;
    max-width: 370px;
    width: 100%;
    background: rgb(154, 129, 62);
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 1);
    margin-bottom: 10px;
    margin-top: 25px;
}

.profile-card .p {
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
}

.img {
    position: relative;
    display: inline-block;
    flex-direction: column;
    align-items: center;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color:#4070f4;
    padding: 3px;
}

.img .profile-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-sizing: border-box;
}

.profile-card .text-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(255, 253, 253);
}

.text-data .name {
    font-size: 32px;
    font-weight: 500;
}

.text-data .job {
    font-size: 20px;
    font-weight: 400;
}

.profile-card .media-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

.media-buttons .link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    margin: 0 8px;
    background-color: #4070f4;
    text-decoration: none;
}

.profile-card .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.buttons .button1 {
    color: white;
    font-size: 25px;
    font-weight: 400;
    border: none;
    border-radius: 24px;
    margin: 0 10px;
    padding: 0 24px;
    background-color: #515151;
    cursor: pointer;
    transition: all 0.3s ease;
}

.buttons .button2 {
    color: white;
    font-size: 25px;
    font-weight: 400;
    border: none;
    border-radius: 24px;
    margin: 0 10px;
    padding: 0 24px;
    background-color: #ff0505;
    cursor: pointer;
    transition: all 0.3s ease;
}

.buttons .button1:hover {
    background-color: blue;
}
.buttons .button2:hover {
    background-color: blue;
}




/*SECTION GALLERY*/


.gallery-header {
    height: 245.5px;
    width: 100%;
    background-color: rgb(0, 0, 0);
    padding-top: 5px;
    margin-bottom: 890px;
}

.gallery-header .g-h2 {
     text-align: center;
     font-size: 50px;
     color: white;
     padding-bottom: 0;
}

.gallery-header .g-h2 span {
    display: inline-block;
    border-bottom: rgb(250, 202, 138) dashed 5px;
    padding: .2em;
    width: 600px;
}

/* images */
.row {
    display: flex;
    background-color: black;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 10px;
  }
  
.column {
    flex: 33.33%;
    padding-left: 20px;
  }
.gallery div .column {
    border: 5px solid white;
  }

/* button */
.gallery-button {
    font-size: 26px;
    background-color: black;
    text-align: center;
    color: white;
    text-decoration: none;
    height: 65px;
    padding-top: 20px;
}

.gallery-button button {
     display: inline-block;
     width: 15%;
     border: none;
    background-color: #3f3f3f;
     padding: 14px 28px;
     font-size: 26px;
     cursor: pointer;
     text-align: center;
     color: white;
}

.gallery-button button:hover {
    background-color: blue;
}





/*FOOTER SECTION*/

footer {
    background-color: rgba(0, 0, 0, 0.433);
    height: 70px;
    text-align: center;
    text-decoration: none;
    font-size: 45px;
    padding-top: 12px;
    margin-top: 0px;
    padding-left: 25px;
    padding-right: 25px;
}

footer p {
    float: right;
    color: white;
    font-size: 18px;
}

footer p .social {
    float: left;
    text-align: center;
}

footer a {
    font-size: 15px;
    text-align: center;
    color: white;
    padding-right: 35px;
    padding-left: 35px;
}

footer a:hover {
    color: blue;
}

/* Style all font awesome icons */
footer .fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: left;
    text-decoration: none;
    border-radius: 50%;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }