/* font-family: "Salsa", cursive; */
@import url('https://fonts.googleapis.com/css2?family=Salsa&display=swap');

/* font-family: "Style Script", cursive; */
@import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Salsa", cursive;
}

html {
    font-size: 62.5%;
}

html, body {
    width: 100%;
    height: 100%;
}

#main {
    width: 100%;
    min-height: 100%;
    background-color: #F99501;
    overflow-x: hidden;
}

.hero {
    min-height: 100vh;
    background-image: url("./images/hero-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero .jhalar {
    width: 250px;
    object-fit: cover;
}

.para_audio {
    width: fit-content;
    margin-left: 15vw;
}

.para_audio .para {
    font-size: 3rem;
}

.audio_container {
    margin-top: 1em;
    display: flex;
    align-items: center;
    background-color: #FBD8A4;
    border-radius: 10rem;
}

.audio_details {
    padding-left: 1.5em;
    display: flex;
    align-items: center;
    gap: 1em;
}

.audio_details .music {
    width: 2em;
}

.audio_container p {
    font-size: 1.5rem;
}

.audio_container audio::-webkit-media-controls-panel {
    background-color: #FBD8A4;
}

.deepak {
    width: 300px;
}

/* section_two styling */
.section_two {
    height: 100vh;
    padding: 2em 5em;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.lines_dot {
    width: 80%;
    display: flex;
    align-items: center;
    gap: 2em;
}


.lines_dot .line {
    flex: 1;
    height: 3px;
    background-color: #FBD8A4;
}

.lines_dot .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #FBD8A4;
}

.section_two .img {
    width: 90%;
}

.section_two .img img {
    width: 100%;
}

.section_two .para {
    font-size: 5rem;
    font-family: "Style Script", cursive;
}

/* section three styling */
.section_three {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section_three .para_container {
    width: 600px;
    padding: 10em 8em;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 3em;
    position: relative;
}

.section_three .para {
    font-size: 3rem;
}

.section_three .img {
    width: 300px;
    position: absolute;
    right: -35%;
    top: -15%;
}

/* section four styling */
.section_four {
    height: 100vh;
    padding: 2em 5em;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.section_four .img {
    width: 1200px;
}

.section_four .para_container {
    width: 90%;
    display: flex;
    flex-direction: column;
}

.section_four .small_para {
    align-self: flex-start;
    font-size: 2rem;
}

.section_four .para {
    align-self: flex-start;
    font-size: 5rem;
    font-family: "Style Script", cursive;
}

.section_four .made_by {
    align-self: flex-end;
    font-size: 1.5rem;
}

@media screen and (min-width: 421px) and (max-width: 800px) {    
    .para_audio {
        margin: auto;
    }
}

@media screen and (max-width: 530px) {
   .para_audio {
        margin: auto;
    }

    .para_audio .para {
        font-size: 2rem;
    }

    .audio_container audio {
        width: 250px;
    }

    .audio_details .music {
        width: 1.7rem;
    }

    .audio_details .name {
        display: none;
    }

    .audio_details .equalizer {
        display: none;
    }

    .audio_container audio::-webkit-media-controls-panel {
        width: 280px;
    }

    .deepak {
        width: 250px;
    }

    .deepak:nth-child(2) {
        display: none;
    }

    .section_two {
        padding: 5rem 1rem;
        height: 50vh;
    }

    .section_two .img {
        width: 99%;
    }

    .section_two .para {
        font-size: 2rem;
    }

    .section_three {
        height: 50vh;
    }

    .section_three .para_container {
        padding: 5rem 3rem;
        width: 70%;
        gap: 2rem;
    }

    .section_three .para {
        font-size: 1rem;
    }

    .section_three .img {
        width: 120px;
        right: -25%;
        top: -20%;
    }

    .section_four {
        height: 60vh;
        padding: 5rem 1rem;
        gap: 2rem;
    }

    .section_four .img {
        width: 99%;
    }

    .section_four .para_container {
        gap: 1.5rem;
    }

    .section_four .small_para {
        font-size: 1.5rem;
    }

    .section_four .para {
        font-size: 3rem;
    }

    .section_four .made_by {
        font-size: 1.5rem;
    }
}