@import url('https://fonts.googleapis.com/css2?family=Island+Moments&family=Poppins&display=swap');


* {
    margin: 0;
    padding: 0;
    font-family: poppins, sans-serif;
}

main {
    background-color: var(--grey);
}

:root {
    --grey: #D9D9D9;
    --light-black: #444444;

}

html {
    scroll-behavior: smooth;
    scroll-padding: 79px;
}


/* nav bar */
/* nav bar */

header nav {
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 79px;
    flex-wrap: wrap;
}

header {
    position: sticky;
    top: 0;
    z-index: 2;
    /* box-shadow:  0px 83px 294px 0px rgba(9, 9, 9, 0.87); */
    box-shadow: 0px 35px 44px 19px rgba(36, 35, 35, 0.15);
}

.left a {
    text-decoration: none;
    color: black;
    font-family: "Island Moments", cursive, sans-serif;
    font-size: 45px;

}

.left {
    margin-left: 25px;
}

.right {
    width: 600px;
    margin-left: 25px;
    margin-right: 25px;
}

.right ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.right ul li a {
    text-decoration: none;
    color: black;
}

.right ul li {
    list-style: none;
}

.right ul li a:hover {
    color: #646060;
}

/* home section */
/* home section */

.firstSection {
    height: 650px;
    background-color: var(--light-black);
    background-image: url(/arts/3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: overlay;
    background-position: 50% 29%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    gap: 25px;
}


.firstSection .photo img {
    border-radius: 50%;
    box-shadow: 0 4px 20px var(--light-black),
        0 4px 30px var(--light-black);
}

.firstSection .name {
    font-size: 44px;
    text-align: center;

}

.firstSection .name span {
    color: rgb(233, 234, 220);
    font-weight: 900;
}

.myself {
    font-size: 17px;
    text-align: center;

}

.socialmedia {
    display: flex;
    /* background-color: aliceblue; */
    width: 150px;
    height: 40px;
    justify-content: center;
    gap: 15px;

}

.socialmedia div a img {
    transition: all 0.3s ease;
}

.socialmedia div a img:hover {
    transform: scale(1.09);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.socialmedia div a img {
    border-radius: 50%;
}


/* Gallery section */
/* Gallery section */

.secondSection {
    background-color: var(--grey);
    height: 600px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.secondSection video {
    width: 700px;
    border-radius: 15px;
    border: none;
    box-shadow: 0 4px 20px rgba(19, 18, 18, 0.6),
        0 4px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.secondSection video:hover {
    box-shadow: 0 4px 20px var(--light-black),
        0 4px 30px var(--light-black);
    transform: translateY(-5px) scale(1.05);
}

.btn img {
    height: 20px;

}

.btn {
    background-color: var(--light-black);
    color: white;
    width: 112px;
    height: 35px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(19, 18, 18, 0.6),
        0 4px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;

}

.btn:hover {
    box-shadow: 0 4px 20px var(--light-black),
        0 4px 30px var(--light-black);
    transform: scale(1.01);
}


/* black line */
/* black line */

.lineBreak div {
    height: 2px;
    background-color: black;
    width: 80vw;
}

.lineBreak {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--grey);
    padding-top: 15px;
    padding-bottom: 15px;
}

/* third section */
/* third section */
/* third section */

.thirdSection {
    background-color: var(--grey);
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80vw;
    margin: auto;
    /* height: 450px; */
    gap: 10px;

}

.image-about img {
    height: 500px;
    border-radius: 20px;
}

.text-about {
    text-align: justify;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.thirdSection p {
    width: 90%;
    text-align: justify;
}

/* fourth section */
/* fourth section */
/* fourth section */

.fourthSection {
    background-color: var(--grey);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.fourthSection .form form {
    display: flex;
    flex-direction: column;
}

.contact-form {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* width: 80vw; */
    flex-wrap: wrap;
    margin-bottom: 25px;
    /* background-color: white; */
}

.form form input,
textarea {
    width: 275px;

}

.form form {
    width: 350px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.form {
    background-color: rgba(255, 255, 255, 0.545);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(19, 18, 18, 0.6),
        0 4px 30px rgba(0, 0, 0, 0.1);
}

form input::placeholder {
    text-indent: 10px;
}

.form input,
textarea {
    height: 50px;
    border: none;
    border-radius: 7px;
    text-indent: 10px;
    outline: none;
    box-shadow: 0 4px 20px rgba(90, 86, 86, 0.6),
        0 4px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form input:focus {
    box-shadow: 0 4px 20px var(--light-black),
        0 4px 30px var(--light-black);
    transform: scale(1.02);
    border: none;
}

#msg {
    height: 200px;
    resize: none;
}

#msg:focus {
    box-shadow: 0 4px 20px var(--light-black),
        0 4px 30px var(--light-black);
    transform: scale(1.02);
    border: none;
}

footer {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--light-black);
}

footer div {
    color: white;
}

.foot span a {
    color: white;

}

/* Responsive ness */
/* Responsive ness */
/* Responsive ness */
@media screen and (max-width : 800px) {
    .secondSection video {
        width: 80vw;
    }

    .firstSection .name {
        font-size: 35px;
    }

    .myself {
        font-size: 12px;
    }

    .firstSection .photo img {
        height: 250px;
    }

    .firstSection {
        height: 500px;
    }

    .thirdSection {
        flex-wrap: wrap;
    }

    .image-about {
        display: none;
    }

    header {
        height: auto;
    }

    .thirdSection p {
        font-size: 13px;
    }

    .foot {
        font-size: 13px;
    }
}

@media screen and (max-width : 600px) {
    .secondSection {
        height: 400px;
    }

    .right {
        margin: 4px;
    }
}

@media screen and (max-width : 400px) {
    .form form {
        width: 80vw;
    }

    .photo {
        margin-top: 25px;
    }

    .form form input,
    textarea {
        width: 67vw;
    }

    .foot {
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media screen and (max-width : 395px) {
    .firstSection {
        height: 482px;
    }

    .photo {
        margin-top: 2px;
    }

    .firstSection .photo img {
        height: 240px;
    }

    .firstSection .name {
        font-size: 27px;
    }

    .left {
        margin: 0px;
    }

    .right {
        display: none;
    }

    .secondSection {
        height: 315px;
    }

    .btn {
        font-size: 12px;
    }
}

@media screen and (max-width : 304px) {
    .firstSection .name {
        font-size: 24px;
    }


}


/* bg-style */
/* bg-style */

/* .bg-style{
    position: absolute;
    z-index: 0;
    width: 40vmax;
    height: auto;
    translate: -50%;
}
.bg-style img{
    width: 100%;
    height: auto;

} */