/***********************************************
************************************************
                PUBLIC STYLES
************************************************
***********************************************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    font-family: inherit;
    line-height: 1.5;
}

:root {
    --main-dark-color: #a83028;
    --main-normal-color: #a83028;
    --main-light-color: #ff9088;
    --main-dark-opacity-color: #a83128a9;
    --main-opacity-color: #51719ab0;
    --main-light-opacity-color: #fee0b2af;
    --grey-light-color: #f4f4f4;
    --grey-dark-color: #dadada;
    --bg-gradient-grey: linear-gradient(#fff, #ddd 20%, #ddd 80%, #fff);
    --bg-gradient-main: linear-gradient(#fff, var(--main-dark-color) 20%, var(--main-dark-color) 80%, #fff);
    --transition: .3s ease-in-out all;
    font-size: 15px;
    scroll-behavior: smooth;
}

::selection {
    background-color: var(--main-dark-color);
    color: #fff;
}

@font-face {
    font-family: Cairo;
    src: url(../fonts/Cairo/Cairo-VariableFont_wght.ttf);
}

body {
    text-align: start;
    font-family: Cairo;
    overflow-x: hidden;
    width: 100vw;
}


body.rtl {
    direction: rtl;
}

a {
    display: inline-block;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

a,
a:hover {
    color: inherit;
    text-decoration: none;
}

input {
    font-family: inherit;
    outline: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

img {
    max-width: 100%;
    object-fit: cover;
}