/*General*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-image: url('../images/background.jpg'); /* Replace 'path/to/your/image.jpg' with the actual path to your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: Keeps the background image fixed while scrolling */
}


.no-padding {
    padding-left: 0;
    padding-right: 0;
}

section {
    background-image: url('../images/bg-topo.png');
    background-size: cover;
    background-position: center;
    height: 189px; /* Ajuste a altura conforme necessário */
}

.logo {
    margin-top: 33px;
}

.banner-topo {
    float: right;
    margin-right: 200px;
    padding-right: 20px !important;
    width:530px!important;
    }
   

.capa-musica {
    margin-left: 5%;
    width: 400px;
    height: 400px;
    border: 4px solid #474747;
    padding: 0px;
    margin-right: 20px;
    border-radius: 50%; /* Make it a circle */
    overflow: hidden; /* Ensure content stays within circle */
}

#sonic_art_full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




/* Add !important to the CSS rules */
#sonic_art_full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


.titulo-musica {
    font-size: 2.5rem;
    color: #ED0000;
margin-bottom:-5px;
font-weight:700;
}

.sub-titulo-musica {
    font-size: 2.0rem;
    color: #ED0000;
    line-height: 1.2em
       }

.sub-titulo-musica span {
    font-size: 1.5rem;
    color: #ED0000;
    font-weight:400;
     }
     
     .text-white{
           font-size:1.5rem;
       }

.icons-musicas {
    width: 24%;
    padding-top:10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

/* Increase the size of the player and remove the round corners */
.player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Adjust the height as needed to make it bigger */
    background-color: #ED0000;
    /* Remove border-radius to eliminate round corners */
    z-index: 998;
}



/* Adjust the size of the icons within the "row mt-3" */
.row.mt-3 img {
    max-width: 140px; /* Adjust the maximum width as needed */
   
}

/* Make the social network container a flex container */
.social-icons-container {
    display: flex;
    justify-content: center; /* Horizontally center the icons */
    align-items: center; /* Vertically center the icons */
    padding-top: 10px !important;
    padding-left: 30px;
}

/* Make the social network icons smaller */
.social-icons-container img {
    max-width: 80% !important; /* Adjust the maximum width as needed */
    padding: 5px; /* Add padding around the icons for spacing */
}


/* Increase the size of the audio player and its controls */
audio {
    display: block;
    width: 100%;
    height: 100px; /* Adjust the height as needed to make it bigger */
    background-color: #ED0000;
    padding-bottom:10px;
}

audio::-webkit-media-controls-panel {
    background-color: #ED0000;
    outline: none;
}


#btn-whatsApp {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10%;
    position: fixed;
    right: 50px;
    z-index: 999;
    cursor: pointer;
}

.circle {
    border-radius: 50%;
    background-color: #00e676;
    width: 70px;
    height: 70px;
    position: absolute;
    opacity: 0;
    animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}

@keyframes scaleIn {
    from {
        transform: scale(.5, .5);
        opacity: .5;
    }
    to {
        transform: scale(2, 2);
        opacity: 0;
    }
}

.zap {
    z-index: 100;
    padding: 5px;
}

.zap img {
    width: 70px;
}



/*Laptop L*/

@media (min-width: 1440px) AND (max-width: 1920px) {
    
    section {
        background-image: url('../images/bg-topo.png');
        background-size: cover;
        background-position: top;
        height: 120px; /* Ajuste a altura conforme necessário */
    }

    p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .logo {
        margin-top: 20px;
    }

    .logo img {
        height: 70px;
    }
    
    .banner-topo {
        float: right;
    margin-right: 200px;
    padding-right: 0px !important;
    width: 324px!important;
    }
   
   .icons-musicas {
    width: 22%;
    padding-top:10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
   
    .capa-musica {
        width: 20%;
        height: 20%;
        border: 3px solid #474747;
        padding: 0px;
        
            }
            
            /* Add !important to the CSS rules */
#sonic_art_full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

    .titulo-musica {
         font-size: 1.8rem;
       
    }
    
    .sub-titulo-musica {
    font-size: 1.4rem;
    
    line-height: 1.4em
       }
       
       .sub-titulo-musica span {
    font-size: 1.2rem;
    
     }
     
     .text-white{
           font-size:1.2rem;
       }
       
       /* Adjust the size of the icons within the "row mt-3" */
.row.mt-3 img {
    max-width: 120px; /* Adjust the maximum width as needed */
    padding-top: 10px;
}

/* Make the social network container a flex container */
.social-icons-container {
    display: flex;
    justify-content: center; /* Horizontally center the icons */
    align-items: center; /* Vertically center the icons */
    padding-top: 10px !important;
    padding-left: 30px;
}

/* Make the social network icons smaller */
.social-icons-container img {
    max-width: 80% !important; /* Adjust the maximum width as needed */
    padding: 5px; /* Add padding around the icons for spacing */
}


       
    .player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:80px; /* Adjust the height as needed to make it bigger */
   
    /* Remove border-radius to eliminate round corners */
    z-index: 998;
}

/* Increase the size of the audio player and its controls */
audio {
    display: block;
    width: 100%;
    height: 100px; /* Adjust the height as needed to make it bigger */
    
    padding-bottom:33px;
}

}



/*Laptop*/

@media (min-width: 1024px) AND (max-width: 1440px) {
    
    section {
        background-image: url('../images/bg-topo.png');
        background-size: cover;
        background-position: top;
        height: 80px; /* Ajuste a altura conforme necessário */
    }

    p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .logo {
        margin-top: 3px;
    }

    .logo img {
        height: 70px;
    }
    
    .banner-topo {
    float: right;
    margin-right: 200px;
    padding-right: 0px !important;
    width:220px!important;
    }
   
   .icons-musicas {
    width: 25%;
    padding-top:10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
   
    .capa-musica {
        width: 25%;
        height: 25%;
        border: 3px solid #474747;
        padding: 0px;
        
            }
            
            /* Add !important to the CSS rules */
#sonic_art_full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

    .titulo-musica {
         font-size: 1.6rem;
       
    }
    
    .sub-titulo-musica {
    font-size: 1.2rem;
    
    line-height: 1.2em
       }
       
       .sub-titulo-musica span {
    font-size: 1.0rem;
    
     }
     
     .text-white{
           font-size:1.0rem;
       }
       
       /* Adjust the size of the icons within the "row mt-3" */
.row.mt-3 img {
    max-width: 120px; /* Adjust the maximum width as needed */
    padding-top: 10px;
}

/* Make the social network container a flex container */
.social-icons-container {
    display: flex;
    justify-content: center; /* Horizontally center the icons */
    align-items: center; /* Vertically center the icons */
    padding-top: 10px !important;
    padding-left: 30px;
}

/* Make the social network icons smaller */
.social-icons-container img {
    max-width: 80% !important; /* Adjust the maximum width as needed */
    padding: 5px; /* Add padding around the icons for spacing */
}

       
    .player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:60px; /* Adjust the height as needed to make it bigger */
    
    /* Remove border-radius to eliminate round corners */
    z-index: 998;
}

/* Increase the size of the audio player and its controls */
audio {
    display: block;
    width: 100%;
    height: 100px; /* Adjust the height as needed to make it bigger */
    
    padding-bottom:40px;
}
}


/*Tablet*/

@media (min-width: 576px) AND (max-width: 1023.99px) {
    
    section {
        background-image: url('../images/bg-topo.png');
        background-size: cover;
        background-position: top;
        height: 80px; /* Ajuste a altura conforme necessário */
    }

    p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .logo {
        margin-top: 3px;
    }

    .logo img {
        height: 70px;
    }
    
    .banner-topo {
        float: right;
    margin-right: 200px;
    padding-right: 0px !important;
    width:220px!important;
    }
   
   .icons-musicas {
    width: 25%;
    padding-top:10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
   
    .capa-musica {
        width: 25%;
        height: 25%;
        border: 3px solid #474747;
        padding: 0px;
        margin: auto;
        
            }
            
            /* Add !important to the CSS rules */
#sonic_art_full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

    .titulo-musica {
         font-size: 1.6rem;
       
    }
    
    .sub-titulo-musica {
    font-size: 1.2rem;
   
    line-height: 1.2em;
    
       }
       
       .sub-titulo-musica span {
    font-size: 1.0rem;
    
    
     }
     
     .text-white{
           font-size:1.0rem;
           
       }
       
       
       /* Adjust the size of the icons within the "row mt-3" */
.row.mt-3 img {
    max-width: 120px; /* Adjust the maximum width as needed */
    padding-top: 10px;
}

/* Make the social network container a flex container */
.social-icons-container {
    display: flex;
    justify-content: center; /* Horizontally center the icons */
    align-items: center; /* Vertically center the icons */
    padding-top: 10px !important;
    padding-left: 40px;
}

/* Make the social network icons smaller */
.social-icons-container img {
    max-width: 80% !important; /* Adjust the maximum width as needed */
    padding: 5px; /* Add padding around the icons for spacing */
}

       
    .player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:60px; /* Adjust the height as needed to make it bigger */
    
    /* Remove border-radius to eliminate round corners */
    z-index: 998;
}

/* Increase the size of the audio player and its controls */
audio {
    display: block;
    width: 100%;
    height: 100px; /* Adjust the height as needed to make it bigger */
   
    padding-bottom:40px;
}
}


/*Mobile*/

@media (max-width: 575.99px) { 
    section {
        background-image: url('../images/bg-topo2.png');
        background-size: cover;
        height: 70px; /* Ajuste a altura conforme necessário */
            }

    p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .logo {
        margin-top: 3px;
    }

    .logo img {
        height: 60px;
        margin-top:5px;
        margin-bottom:5px;
    }
    
    .banner-topo {
        float:none;
        padding-right: 0px !important;
        margin: auto;
        width:200px!important;
    }

    .capa-musica {
        width: 130px;
        height: 130px;
        border: 3px solid #474747;
        padding: 0px;
        margin: auto;
        
    }
    

/* Add !important to the CSS rules */
#sonic_art_full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

    .titulo-musica {
         font-size: 1.2rem;
        text-align: center;
        
    }
    
    .sub-titulo-musica {
    font-size: 1.2rem;
    
    line-height: 1.2em;
    text-align:center;
       }
       
       .sub-titulo-musica span {
    font-size: 1.0rem;
    
     }
       
       .text-white{
           font-size:1.0rem;
           text-align:center;
           padding-top:10px;
       }

    .box-icones-musicas {
        margin-left: 0;
        text-align: center;
        padding-top:10px;
    }

    .icons-musicas {
        width: 45px;
    }

    .icons-lojas {
        max-width: 120px;
    }


    #btn-whatsApp {
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 90px;
        position: fixed;
        right: 20px;
        z-index: 999;
        cursor: pointer;
    }

    .zap {
        z-index: 100;
        padding: 5px;
    }
    
    .zap img {
        width: 60px;
    }
    /* Adjust the positioning of the player */
    .player {
        position: fixed;
        left: 0;
        width: 100%;
        height: 80px; /* Adjust the height as needed */
        
        z-index: 998;
    }

/* Make the social network container a flex container */
.social-icons-container {
    display: flex;
    justify-content: center; /* Horizontally center the icons */
    align-items: center; /* Vertically center the icons */
    padding-top: 10px !important;
    padding-left:40px;
}

/* Make the social network icons smaller */
.social-icons-container img {
    max-width: 60% !important; /* Adjust the maximum width as needed */
    padding: 0px; /* Add padding around the icons for spacing */
}

/* Adjust the size of the icons within the "row mt-3" */
.row.mt-3 img {
    max-width: 80px; /* Adjust the maximum width as needed */
    padding-top: 0px;
    
}

/* Increase the size of the audio player and its controls */
audio {
    display: block;
    width: 100%;
    height: 100px; /* Adjust the height as needed to make it bigger */
   
    padding-bottom:32px;
}

.col-md-4.box-icones-musicas a:last-child {
            display: none;
        }
}