*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Playfair Display", serif;
}

:root{
    --color-red-default: #DC0400;
    --color-pink-light: #e7ada8;
    --color-red-dark: #85110E;

    --color-black-default: #111111;
    --color-black-light: #1A1A1A;
    --color-gray-default: #353535;

    --color-white-default: #FFFFFF;
    --color-white-primary: #FBF2EB;
    --color-white-light: #F9F9F9;
    --color-blue-default: #2F2B3D;

    --color-green-default: rgba(40, 199, 111, 1);
    --color-background-modal: rgba(118, 118, 119, 0.70);

    --border-radius-default: 6px;

    --border-radius-small: 6px;
}

.container{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.flex{
    display: flex;
}

.justify_center{
    justify-content: center;
}

.justify_end{
    justify-content: flex-end;
}

.justify_between{
    justify-content: space-between;
}

.align_start{
    align-items: flex-start;
}

.align_center{
    align-items: center;
}

.align_end{
    align-items: flex-end;
}

.text_left{
    text-align: left !important;
}

.w100{
    width: 100%;
}

.w80{
    width: 80%;
}

.w75{
    width: 75%;
}

.w70{
    width: 70%;
}

.w60{
    width: 60%;
}

.w50{
    width: 50%;
}

.box_50{
    width: calc(50% - 20px);
    margin: 0 10px;
}

.w40{
    width: 40% !important;
}

.w30{
    width: 30% !important; 
}

.w25{
   width: 25% !important; 
}

.wrap{
    flex-wrap: wrap;
}

.pointer{
    cursor: pointer;
}

.radius-50{
    border-radius: 50% !important;
}

/* .desktop{
    display: block;
} */

html {
    scroll-behavior: smooth;
}

.desktop_flex{
    display: flex;
}

.mobile{
    display: none;
}

.hidden{
    display: none;
}

.mobile_flex{
    display: none;
}

.border_white{
    border: 1px solid var(--color-white-light);
    border-radius: var(--border-radius-default);
}

.relative{
    position: relative;
}

.btn_pink_light{
    background-color: var(--color-pink-light);
    padding: 10px;
}

.border_radius_small{
    border-radius: 10px;
}

@media screen and (max-width: 1024px){
    .desktop{
        display: none;
    }

    .mobile{
        display: block;
    }

    .desktop_flex{
        display: none;
    }

    .mobile_flex{
        display: flex;
    }
}

@media screen and (max-width: 724px){

    .w100{
        width: 100%;
    }

    .w80{
        width: 100%;
    }

    .w75{
        width: 100%;
    }

    .w70{
        width: 100%;
    }

    .w60{
        width: 100%;
    }

    .w50{
        width: 100%;
    }

    .w30{
        width: 100% !important; 
    }

    .w25{
        width: 100%; 
    }
}