@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Pacifico&family=Roboto:wght@400;700&display=swap');

:root {
    --important-text-color: rgb(132, 32, 32);
    --floating-button-height: 80px;
}


/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", serif;
}


body{
    padding-top: 30px;
}


.background{
    background-image: url(https://cdn.pixabay.com/photo/2017/08/06/05/21/people-2589047_960_720.jpg);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    opacity: 30%;
    top: 0;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Merriweather", serif;
}


/* MENU */

header {
    /*background: rgb(15,15,15);
    background: linear-gradient(90deg, rgba(15,15,15,1) 0%, rgba(206,95,32,1) 79%, rgba(255,153,0,1) 100%);*/
    padding: 1rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100px;
    color: black;
}

header h1{
    font-family: "Pacifico", cursive;
    font-size: 2.5rem;
    background: linear-gradient(90deg, rgba(15,15,15,1) 0%, rgba(206,95,32,1) 79%, rgba(255,153,0,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

header p{
    color: rgb(54, 20, 3);
}

header ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100%;
}

header li {
    display: inline;
    margin: 0 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

header a {
    color: #fff9d5;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

header a:hover {
    color: #00c8ff;
}


/* FLOATING BUTTONS */


.floating_buttons_container{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: -1px;
    height: var(--floating-button-height);
    width: 100vw;
    z-index: 2;
}

.floating_buttons_container div{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    text-align: center;
}

.floating_buttons_container h4{
    font-size: 40px;
}


.floating_buttons_gmail{
    background-color: rgb(164, 39, 39);
    color: white;
    border-right: 1px solid black;
}

.floating_buttons_whatsapp{
    background-color: rgb(3, 99, 3);
    color: white;
}


/* MAIN INFORMATION */


.main_info{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.main_info_title_container{
    font-size: 1.5rem;
}

.main_info_principal_info{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.main_info div{
    margin-top: 10px;
}

.main_info_second_title_container{
    text-align: justify;
    font-size: 1.3rem;
}

.main_info_btn_container{
    margin-bottom: 30px;
}

.main_info_image_container{
    height: 300px;
    width: 250px;
    background-position: center;
    background-size: cover;
}

.main_info_amarre_text{
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main_info_amarre_text h3{
    color: rgb(23, 23, 23);
    margin-top: 20px;
    font-size: 20px;
    text-align: justify;
    font-family: "Roboto", serif;
}

.main_info_services_container{
    text-align: center;
    width: 100%;
    padding: 10px;
    color: rgb(12, 12, 32);
    background: rgb(206,255,251);
    background: linear-gradient(90deg, rgba(206,255,251,1) 0%, rgba(255,231,194,1) 100%);
}

.service_list{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service > img{
    margin-top: 20px;
    margin-bottom: 20px;
}

.service > p{
    text-align: justify;
    font-size: 1.5rem;
}

.service > h3{
    text-align: justify;
    font-size: 2rem;
}

.service_image{
    width: 100%;
    height: 280px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.brujo_image{
    background-image: url(./../assets/images/brujo_main.webp);
    background-size: cover;
    background-position: center;
    border: 2px solid rgb(50, 50, 50);
    width: 80%;
}

.couple_image{
    background-image: url(https://cdn.pixabay.com/photo/2021/08/15/14/47/couple-6548045_1280.jpg);
    width: 350px;
}

.amarre_image{
    background-image: url(./../assets/images/amarre_amor.webp);
}


/* https://www.psicoactiva.com/wp-content/uploads/2018/08/porque-se-rompe-pareja.jpg */
.alejamiento_image{
    background-image: url(./../assets/images/alejamiento_image.webp);
}

.endulzamiento_image{
    background-image: url(./../assets/images/endulzamiento.webp);
}

.brujeria_amor_image{
    background-image: url(./../assets/images/brujeria_amor.webp);
}

.hechizo_amor_image{
    background-image: url(./../assets/images/hechizos_amor.webp);
}

.limpia_brujeria_image{
    background-image: url(./../assets/images/limpia_brujeria.webp);
}

.pacto_amor_image{
    background-image: url(./../assets/images/pacto_amor.webp);
}


/* CONTACT BUTTON */
  
.contact-btn {
    background-color: rgb(18, 99, 34);
    color: #fff;
    padding: 0.8rem;
    font-size: 2rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    animation: colorChanging 1s infinite;
    text-transform: uppercase;
}

.contact-btn:hover {
    filter: brightness(80%);
}

@keyframes colorChanging {
    from {background-color: #00f7ff;}
    to {background-color: rgb(27, 136, 49);}
}


/* FOOTER */

.site-footer {
    background-color: #2c3e50;
    color: white;
    padding: 20px 0;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    flex: 1;
    margin: 0 20px;
}

.footer-section h2 {
    margin-bottom: 10px;
    color: #ffffff;
}

.footer-section p,
.footer-section a {
    color: #ffffff;
    line-height: 1.6;
}

.footer-section a {
    text-decoration: none;
}

.footer-section a:hover {
    color: #e74c3c;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid #34495e;
    padding-top: 10px;
}

.footer-bottom p {
    margin: 0;
}


/* OTHER */

.spacer{
    height: var(--floating-button-height);    
}

.red_subtext{
    color: var(--important-text-color) !important;
}

.no_responsive_title{
    display: none;
}

.main_info_principal_info{
    margin-bottom: 10px;
}

.number_title_container{
    font-size: 1.7rem;
}

.number_title_container a{
    text-decoration: none;
    color: black;
}

/*@media (max-width: 1250px){
    .responsive_title{
        display: initial;
    }

    .no_responsive_title{
        display: none;
    }

    .main_info_principal_info{
        gap: 50px;
        flex-direction: column;
    }
}*/

@media (min-width: 1250px) and (max-width: 4000px) {

    .floating_buttons_container{
        display: none;
    }

    .main_info_principal_info{
        gap: 50px;
        flex-direction: row;
    }
    
    .brujo_image{
        min-width: 400px;
        height: 400px;
    }

    .service_list{
        display: flex;
        flex-direction: row !important;
        gap: 100px;
        flex-wrap: wrap;
    }

    .main_info_services_container{
        margin-top: 80px !important;
    }

    .main_info_services_container h2{
        font-size: 30px;
    }

    .main_info_principal_info{
        width: 70vw;
    }

    .main_info_amarre_text{
        width: 50vw;
    }
    
    .service{
        width: 30vw;
        min-height: 80vh;
        margin-top: 0 !important;
        display: flex;
        justify-content: space-between !important;
        flex-wrap: wrap;
        padding: 10px;
        border-radius: 10px;
    }

    .service h3{
        font-size: 24px;
    }

    .service_image{
        height: 300px !important;
    }

    .spacer{
        display: none;
    }

    .responsive_title{
        display: none;
    }

    .no_responsive_title{
        display: initial;
    }

    .couple_image{
        width: 30vw !important;
    }

    header h1{
        font-size: 2.5rem;
    }

}


@media (min-width: 600px) and (max-width: 1250px) {

    .floating_buttons_container{
        display: none;
    }
    
    .brujo_image{
        min-width: 400px;
    }

    .service_list{
        display: flex;
        flex-direction: row !important;
        gap: 100px;
        flex-wrap: wrap;
    }

    .main_info_services_container{
        margin-top: 80px !important;
    }

    .main_info_services_container h2{
        font-size: 30px;
    }

    .main_info_principal_info{
        width: 70vw;
    }

    .main_info_amarre_text{
        width: 50vw;
    }
    
    .service{
        width: 45vw;
        min-height: 80vh;
        margin-top: 0 !important;
        justify-content: space-between !important;
        flex-wrap: wrap;
        padding: 10px;
        border-radius: 10px;
    }

    .service h3{
        font-size: 24px;
    }

    .service_image{
        height: 200px !important;
    }

    .spacer{
        display: none;
    }

    .responsive_title{
        display: none;
    }

    .no_responsive_title{
        display: initial;
    }

    .couple_image{
        width: 30vw !important;
    }

    header h1{
        font-size: 2.5rem;
    }

}