/*
   ___ ___ _  _ ___ ___    _   _
  / __| __| \| | __| _ \  /_\ | |
 | (_ | _|| .` | _||   / / _ \| |__
  \___|___|_|\_|___|_|_\/_/ \_\____|

 */


:root {
    /* Intermediate font sizes */
    --font-size-xs: 1rem;     /* Extra small */
    --font-size-sm: 1.25rem;  /* Small */
    --font-size-md: 1.5rem;   /* Medium */
    --font-size-lg: 1.75rem;  /* Large */
    --font-size-xl: 2rem;     /* Extra large */
    --font-size-xxl: 2.25rem; /* Extra extra large */
    --font-size-xxxl: 2.75rem;/* Extra extra extra large */

    /* Base line height */
    --line-height: 1.25; /* Slightly increased line height for readability */
}


.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-lg { font-size: var(--font-size-lg); }
.font-xl { font-size: var(--font-size-xl); }
.font-xxl { font-size: var(--font-size-xxl); }
.font-xxxl { font-size: var(--font-size-xxxl); }

h1 { font-size: var(--font-size-xxxl); line-height: var(--line-height); }
h2 { font-size: var(--font-size-xxl); line-height: var(--line-height); }
h3 { font-size: var(--font-size-xl); line-height: var(--line-height); }
h4 { font-size: var(--font-size-lg); line-height: var(--line-height); }
h5 { font-size: var(--font-size-md); line-height: var(--line-height); }
h6 { font-size: var(--font-size-sm); line-height: var(--line-height); }
p { font-size: var(--font-size-md); line-height: var(--line-height); }

@media (max-width: 768px) {
    :root {
        --font-size-xs: 0.75rem;
        --font-size-sm: 0.85rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.2rem;
        --font-size-xl: 1.5rem;
        --font-size-xxl: 1.8rem;
        --font-size-xxxl: 2rem;
    }
}

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Condensed", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 500;
}

p, li {
    font-family: 'Calibri', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
}
td {
    width:25%;
}
.accent_word {
    color:#cd0914;
}

.section_title {
    color:#cd0914;
}

.alert{
	display: none;
	color: #ffffff;
	background-color: #cd0914 !important;
	font-size: 12px;
	line-height: 1em;
}

.cookie_icon {
    position: absolute;
    width: 125px;
    top: -7.5%;
    left: 45%;
    transform: translateX(-50%);
}
@media (max-width: 556px) {
    .cookie_icon {
        left: 35% !important;
    }
}

.bg_image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 110%;
    z-index: -1;
}
.bg_image_icon {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    max-width: 60%;
}
.bg_image_container {
    position: relative;
    overflow: visible;
    padding: 0;
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}
.shiner {
    background-color: #cd0914; /* Base color */
    background-image: linear-gradient(-75deg, rgba(255,255,255,0.15) 50%, rgba(255,255,255,.25), rgba(255,255,255,0.15) 65%);
    background-size: 200% 100%;
    animation: shine 2s linear infinite;
    transition: all 0.01s;
}

@keyframes shine {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}



/*
 ___  ___  ___ _   _ ___  ___
| _ \/ _ \| _ \ | | | _ \/ __|
|  _/ (_) |  _/ |_| |  _/\__ \
|_|  \___/|_|  \___/|_|  |___/

 */

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup {
    position: fixed;
    top: 50%;
    width: 75vw;
    max-height: 75vh;
    background: #2C2B2B;
    transform: translate(-50%, -50%);
    opacity: 0;
    border-radius: 15px;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 3;
    overflow: auto;
}


.popup.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    z-index: 3;
    left: 50%;
}

#overlay.show {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.close_popup {
    color: #ffffff;
    background: #cd0914 !important;
    border: none;
    height: 30px !important;
    width: 30px !important;
    cursor: pointer;
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;

    i{
        transform: scaleY(.85);
    }
}
#fade_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    transition: opacity 1s ease-out;
}



/*
 ___  ___   ___ _____ ___ _____ ___    _   ___    _____   _____ ___ ___ ___ ___  ___ ___
| _ )/ _ \ / _ \_   _/ __|_   _| _ \  /_\ | _ \  / _ \ \ / / __| _ \ _ \_ _|   \| __/ __|
| _ \ (_) | (_) || | \__ \ | | |   / / _ \|  _/ | (_) \ V /| _||   /   /| || |) | _|\__ \
|___/\___/ \___/ |_| |___/ |_| |_|_\/_/ \_\_|    \___/ \_/ |___|_|_\_|_\___|___/|___|___/

 */

.text-danger{
    color: #cd0914 !important;
}
.text-black, .bg-black{
    color: #111111 !important;
}
.section_dark{
    background-color: #111111 !important;
    .section_title {
        color: #ffffff !important;
        i {
            color:#cd0914 !important;
        }
    }

}
.btn-danger{
    background-color: #cd0914;
}
.btn-secondary{
    background-color: #353232;
}
.btn-danger:hover{
    background-color: #ff3e48 !important;
}

a, .law_link {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.05s ease-in-out;
    span{
        transition: all 0.05s ease-in-out;
    }
}
a:hover, .law_link:hover {
    color: #cd0914;
    text-decoration: none;
    span {
        color:#ffffff !important;
    }
}
.see_more_link:hover {
    color: #cd0914 !important;
    text-decoration: none;
    span {
        color:#ffffff !important;
    }
}
.btn, button {
    color: #ffffff;
    top: 0px;
    border:none;
    font-family: "Roboto Condensed", sans-serif !important;
    font-optical-sizing: auto;
    font-size: 1.1rem;
}
.close_popup:hover, .btn:hover {
    color: #ffffff;
    transition: all 0.15s ease-in-out;
    position: relative;
    top: -2.5px;
    background-color: dimgray !important;
}


/*
 _  _ ___   _   ___  ___ ___
| || | __| /_\ |   \| __| _ \
| __ | _| / _ \| |) | _||   /
|_||_|___/_/ \_\___/|___|_|_\

 */

header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    z-index: 2;
}

.menu {
    display: flex;
    position: relative;
    transition: max-height 0.3s ease-out;
    justify-content: end;

    .btn{
        border-radius: 0 !important;
        height: calc(3.75rem + 5px);
        text-align: center;
        align-items:center;
        justify-content:center;
        display: flex;
        transition: all 0.15s ease-in-out;
        background-color: #ff000000 !important;
    }
    .btn:hover{
        background-color: #ff000000 !important;
        top: 0 !important;
    }
    .underlined{
        margin-right: 2px;
        transition: all 0.15s ease-in-out;
    }
    .underlined::before {
        content: '';
        display: block;
        position: relative;
        bottom: -67px;
        background-color : gray;
        width: 100%;
        height: 5px;
        z-index: 1000;
    }
    .underlined.btn-danger::before {
        background-color : #ffffff;
    }
    .underlined.btn-secondary:hover {
        color: #ffffff;
        transition: all 0.15s ease-in-out;
        position: relative;
        top: -2.5px !important;
        background-color: dimgray !important;
    }
    .underlined.btn-danger:hover {
        background-color : #c02a32 !important;
        transition: all 0.15s ease-in-out;
        position: relative;
        top: -2.5px !important;
        .btn{
            background-color : #c02a32 !important;
            transition: all 0.15s ease-in-out;
        }
    }
    @media (max-width: 991px) {
        .underlined::before {
            bottom: -40px;
        }
        .btn, .lang_btn{
            border-radius: 0 !important;
            height: calc(1.75rem + 5px);
            text-align: right !important;
            align-items:center !important;
            justify-content:end !important;

        }

    }

}

.menu.show {
    position: absolute;
    flex-direction: column;
    top: 60px;
    right: 0;
    background-color: #111111;
    width: 100%;
    padding: 10px;
    overflow: hidden;

}

.menu a {
    text-decoration: none;
    text-align: right;
}

@media (min-width: 991px) {

    .menu {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        max-height: none;
        align-items: center;
    }

}

.navbar_toggler {
    display: none;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
}

@media (max-width: 991px) {
    .navbar_toggler {
        display: block;
    }

    .menu {
        display: none;
        max-height: 0px ;
    }

    .menu.show {
        display: flex;
    }
    .popup {
        width: 90vw !important;
    }
}



/*
   ___   _   ___ ___  ___
  / __| /_\ | _ \   \/ __|
 | (__ / _ \|   / |) \__ \
  \___/_/ \_\_|_\___/|___/

*/

.card{
    transition: transform 0.25s ease;
    background-color:rgb(172, 172, 172);
}
.card:hover{
    transform: scale(1.025);
    z-index: 1000;
    filter: drop-shadow(0 0 0.75rem #111111);
}

/*
  ___ ___ _____   _____ ___ ___   ___  ___ ___  ___ ___ ___ ___ _____ ___ ___  _  _
 / __| __| _ \ \ / /_ _/ __| __| |   \| __/ __|/ __| _ \_ _| _ \_   _|_ _/ _ \| \| |
 \__ \ _||   /\ V / | | (__| _|  | |) | _|\__ \ (__|   /| ||  _/ | |  | | (_) | .` |
 |___/___|_|_\ \_/ |___\___|___| |___/|___|___/\___|_|_\___|_|   |_| |___\___/|_|\_|

*/

.description_div {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 92.5%, 0% 0%);
}


/*
    _   _____   ___   _  _ _____ _   ___ ___ ___
   /_\ |   \ \ / /_\ | \| |_   _/_\ / __| __/ __|
  / _ \| |) \ V / _ \| .` | | |/ _ \ (_ | _|\__ \
 /_/ \_\___/ \_/_/ \_\_|\_| |_/_/ \_\___|___|___/

*/
.advantage_card {
    background-color: rgb(50, 50, 50, 0.5);
    border:none;
}
.advantage_card:hover {
    background-color: rgb(51, 51, 51,1);
}
.advantage_card h4 {
    color: #cd0914 !important;
}
.advantages_div {
    background-color: #111111;
    clip-path: polygon(0% 0%, 100% 7.5%, 100% 100%, 0% 93.5%, 0% 0%);
}

/*
 __      ___  ___   __  _   _ ___
 \ \    / / || \ \ / / | | | / __|
  \ \/\/ /| __ |\ V /  | |_| \__ \
   \_/\_/ |_||_| |_|    \___/|___/

*/

.parallax_container {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: url('/images/team2.jpg') no-repeat center center;
    background-size: cover;
    will-change: background-position;
    background-attachment: fixed;
    background-position: 15vw 45% ;
    margin-left: 2rem;
    clip-path: polygon(0% 0%, 100% 15%, 100% 90%, 0% 100%,  0% 0%);
    transition: all .25s ease;
}
div:hover > .parallax_container {
    clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 10% 100%,  0% 10%);
    height: 120%;
}
@media (max-width: 990px) {
    .parallax_container {
        background-position: -500px 100px  !important;
        margin-left: 0rem !important;
        height:300px !important;
    }
}
/*
  ___  ___  ___  ___ ___   _____      ___  _
 |   \| _ \/ _ \| _ \   \ / _ \ \    / / \| |
 | |) |   / (_) |  _/ |) | (_) \ \/\/ /| .` |
 |___/|_|_\\___/|_| |___/ \___/ \_/\_/ |_|\_|

*/

.dropdown{
    transition: all 0.25s ease-in-out;
    background-color: rgba(0, 0, 0, 0.025);
    cursor: pointer;
    a {
        color: rgb(238, 51, 51);
    }
    i {
        font-size:2rem;
    }

}
.dropdown:hover {
    background-color: #353232;
    a, i {
        color: #ffffff !important;
    }
}

.dropdown i {
    transition: transform 0.3s ease;
}

.dropdown_content {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.dropdown_content.show {
    max-height: 1500px;
    margin: 1.5rem 0;
    opacity: 1;
}

/*
  ___ ___ ___ ___ ___ ___
 | _ \ _ \_ _/ __| __/ __|
 |  _/   /| | (__| _|\__ \
 |_| |_|_\___\___|___|___/

*/

.price_card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-between;
    padding: 1em;
    height:100%;


}
.price_card:hover{
    background-color: rgb(187, 187, 187);
}
.price_card h4, .price_card .description {
    color: #ffffff;
    margin-bottom:.5em;
}
.price_card .description{
    padding-top: .25em;
    border-top: 2px #ffffff solid;
    font-size: 1rem;
}
.price_card ul{
    padding: 0;
    height:100%;
    align-items: start;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.price_card li{
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: .5em;
    width: 100%;
}
.price_card li p{
    margin: 0 1em 0 0;
    font-size: 1rem;
    font-family: 'Roboto' !important;
}
.price_card .fa-check, .price_card .fa-x{
    font-size: 1.5rem;
}
.price_card .fa-check{
    color: #ffffff;
}
.price_card .fa-x{
    color: #cd0914 !important;
}
.plans_div {
    background-color: #111111;
    clip-path: polygon(0% 0%, 50% 10%, 100% 0%, 100% 90%, 50% 100%, 0% 90%, 0% 0%);
}
@media (max-width: 991px) {
    .plans_div {
        background-color: #111111;
        clip-path: polygon(0% 0%, 50% 5%, 100% 0%, 100% 95%, 50% 100%, 0% 95%, 0% 0%);
    }
}

@media (max-width: 550px) {
    .plans_div {
        background-color: #111111;
        clip-path: polygon(0% 0%, 50% 2.5%, 100% 0%, 100% 97.5%, 50% 100%, 0% 97.5%, 0% 0%);
    }

}

/*
   ___ ___  _  _ _____ _   ___ _____ ___
  / __/ _ \| \| |_   _/_\ / __|_   _/ __|
 | (_| (_) | .` | | |/ _ \ (__  | | \__ \
  \___\___/|_|\_| |_/_/ \_\___| |_| |___/

*/
.contact_form_field{
    display: flex;
    flex-direction: column;
    padding-top: 1em;

    input, textarea{
        background-color: rgb(238, 238, 238);
        border: none;
        border: 2px solid #ff000000;
    }
    textarea:focus , input:focus {
        border: 2px solid #cd0914 !important;
        outline:none;
    }
}