/*
Theme Name: Possible
Theme URI: 
Description: OceanWP WordPress theme. Sample child theme.
Author: CodePhenix
Author URI: https://codephenix.fr/
Template: oceanwp
Version: 1.0
*/
:root {
    --green-carousel: #00b899;
    --black: black;
    --yellow: #ffec00;
    --yellow-bar: #ffec00d4;
    --white: white;
    --white-menu: #fffffff5;
    --grey: #ccc;
    --grey-100: #fcfcfc;
    --grey-100-menu: #fcfcfc7a;
    --grey-100-text-menu: #fcfcfcc4;
    --grey-200: #ebebeb;
    --grey-300: #f5f5f5;
    --grey-400: #f7f7f7;
    --grey-500: #f8f8f8;
    --grey-600: #181616;
    --grey-650: #5b6170;
    --grey-700: #686f80;
    --grey-750: #707070;
    --grey-800: #777777;
    --grey-900: #979292cc;
    --green-text: #009e83;
    --light-green-text: #b2ece3;
    --red-text: #ee5c82;
    --red-icon: #ed3841;
    --blue-icon-light: #85C0FF;
    --blue-icon: #003269;
    --font-size-52: 50px;
    --font-size-50: 48px;
    --font-size-48: 46px;
    --font-size-46: 44px;
    --font-size-42: 40px;
    --font-size-38: 36px;
    --font-size-36: 34px;
    --font-size-34: 32px;
    --font-size-33: 31px;
    --font-size-32: 30px;
    --font-size-31: 29px;
    --font-size-30: 28px;
    --font-size-28: 26px;
    --font-size-26: 24px;
    --font-size-24: 22px;
    --font-size-22: 20px;
    --font-size-21: 19px;
    --font-size-20: 18px;
    --font-size-18: 16px;
    --font-size-17: 15px;
    --font-size-16: 14px;
    --font-size-14: 12px;
    --font-size-12: 10px;
}

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

body {
    font-family: "Barlow";
    font-size: var(--font-size-16);
    line-height: 18px;
}

h1,
h2 {
    font-weight: 700;
}

p {
    line-height: 25px;
    font-size: 16px;
    font-family: "Barlow", "Roboto", sans-serif;
    /* color: var black(--grey-600); */

}

.page-header {
    display: none;
}

/* Parent stylesheet should be loaded from functions.php not using @import */
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

body .container {
    width: auto;
    max-width: none;
}

a:hover {
    text-decoration: none;
    color: var(--green-text);
}

a:focus {
    outline: none !important;
}

#content-wrap .full-width,
#content-wrap .full-width-no-padding {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

#content-wrap .full-width-no-padding>.e-con-inner {
    max-width: none !important;
    margin: 0;
}

.container-gray {
    background-color: var(--grey-100);
    font-family: "Barlow";
}

.history-container-gray {
    background-color: var(--grey-700);
}

.elementor-element.e-con-full {
    padding: 0;
}

.with-line-before {
    display: flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Vertically align the line with the text */
}

.with-line-before::before {
    content: "";
    display: block;
    width: 30px;
    /* Length of the line */
    height: 2px;
    /* Thickness of the line */
    background-color: var(--grey);
    /* Line color (light gray) */
    margin-right: 10px;
    /* Space between the line and text */
    border-radius: 20px;
}



div[data-element_type="container"] {
    padding-left: 10%;
    padding-right: 10%;
}

.left-window-border img,
img.left-window-border {
    width: calc(100% + var(--container-default-padding-left, 10vw)) !important;
    max-width: calc(100% + var(--container-default-padding-left, 10vw)) !important;
    height: auto;
    transform: translateX(calc(-1 * var(--container-default-padding-left, 10vw)));
}

.right-window-border img,
img.right-window-border {
    width: calc(100% + var(--container-default-padding-left, 10vw)) !important;
    max-width: calc(100% + var(--container-default-padding-left, 10vw)) !important;
    height: auto;
    transform: translateX(calc(var(--container-default-padding-left, 10vw)));
}

/* Full width video */
#full-video-container,
#full-video-container iframe,
#full-video-container video {
    height: 45vw;
}


#full-video-container .e-con-inner {
    max-width: none;
}

.elementor-widget-container {
    margin-left: 0;
}


#content .title-with-hyphen {
    display: flex;
    align-items: center;
    font-size: 30px;
    color: var(--grey-700);
    justify-content: left;
    margin: 1em 0;
    margin-top: -30px;
    ;
}

#content .title-with-hyphen::before {
    content: "";
    display: block;
    width: 33px;
    height: 2px;
    background-color: var(--grey-700);
    border-radius: 20px;
    margin-right: 10px;
}



.tag-item {
    background-color: var(--grey-200);
    color: var(--grey-600);
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: var(--font-size-14);
}

.tag-item:not(.tag-disabled):hover {
    background-color: var(--grey-600);
    color: white;
}

.tag-item.active {
    background-color: var(--green-text);
    color: white !important;
    font-weight: 600;
}

/* Disabled tag styling */
.tag-disabled {
    cursor: default !important;
    pointer-events: none;
}

@media (min-width: 768px) {
    div[data-element_type="container"] {
        padding-left: 10%;
        padding-right: 10%;
    }
}

@media (min-width: 1024px) {
    #content .title-with-hyphen {
        font-size: 30px;
        font-weight: 600;
        font-family: "Inter", Sans-serif;
        color: var(--grey-700);
    }

    #content .title-with-hyphen::before {
        width: 66px;
        margin-right: 20px;
    }

}