/* Colors */
    :root{
        --bs-background: url('/img/brown-bg.jpg') !important;
        --bg-01: url('/img/bg-01.jpg') !important;
        --bg-02: url('/img/bg-02.jpg') !important;
        --bg:var(--bg-01) !important;
        --bg-color-01: #d3bfb1ff !important;
        --bg-color-02: #baa693ff !important;
        --bg-color: var(--bg-color-01) !important;
        --bs-bgcolor: #fffaecff !important; 

        --bs-dark: #000000 !important;
        --bs-lightpurple:rgb(192, 115, 255) !important;
        --bs-purple: #6c41aaff !important;
        --bs-darkpurple: #4d3d79ff !important;
        --bs-lightblue: rgb(86, 91, 255) !important;
        --bs-mediumblue: rgb(0, 7, 212) !important;
        --bs-blue: rgb(20, 24, 127) !important;
        
        --bs-red:#ff0000 !important;
        --bs-pink:#ff00b7 !important;
        --bs-orange:#f16739ff !important;
        --bs-mediumorange: rgb(255, 169, 32) !important;
        --bs-lightorange: rgb(255, 198, 66) !important;
        --bs-yellow: rgb(238, 255, 0) !important;
        --viva-red: #cb3024 !important;
        --viva-orange: #f16439 !important;
        --viva-blue:#1f7f95 !important;
        --viva-yellow:#fab930 !important;
        --viva-purple:#6a42a8 !important;
 
        --bs-lightgreen:#17ce51 !important;
        --bs-mediumgreen: #2ba92b !important;
        --bs-green: #00a900 !important;
        --bs-logo-green: #218f84ff !important;

        --bs-primary: var(--bs-purple) !important;
        --bs-secondary: var(--bs-orange) !important;
        --viva-home-h1: 5rem !important;
        --viva-bgcolor: #e8d7c5 !important;
    
        
    }
    .big{
        font-size: 1.4rem;
        
    }
    .fullHeight{
        min-height: 100% !important;
    }
    .bs-dark{
        color:var(--bs-dark) !important;
    }
    .viva-home-h1{
        font-size: var(--viva-home-h1);
    }
    .viva-red{
        color:var(--viva-red) !important;
    }
    .viva-orange{
        color:var(--viva-orange) !important;
    }
    .viva-blue{
        color:var(--viva-blue) !important;
    }
    .viva-yellow{
        color:var(--viva-yellow) !important;
    }
    .viva-purple{
        color:var(--viva-purple) !important;
    }
    .viva-menu{
        background-color: var(--viva-bgcolor) !important;
        color:var(--viva-orange) !important;
        font-size:3rem !important;
        font-weight:bold !important;
        
    }
    
    @font-face {
        font-family: 'ArimoVariable'; /* Give your font a descriptive name */
        src: url('/font/Arimo-Variable.ttf') format('truetype');
        font-weight: lighter;
        font-style: normal;
        font-display: swap; /* Optional but recommended for better user experience */
    }
    @font-face {
        font-family: 'BodyGrotesqueRegular'; /* Give your font a descriptive name */
        src: url('/font/Body-Grotesque-Regular.ttf') format('truetype');
        font-weight: lighter;
        font-style: normal;
        font-display: swap; /* Optional but recommended for better user experience */
    }  
    @font-face {
        font-family: 'BodyGrotesqueBold'; /* Give your font a descriptive name */
        src: url('/font/Body-Grotesque-Bold.ttf') format('truetype');
        font-weight: lighter;
        font-style: normal;
        font-display: swap; /* Optional but recommended for better user experience */
    }   
    @font-face {
        font-family: 'RubikBubbles'; /* Give your font a descriptive name */
        src: url('/font/RubikBubblesRegular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap; /* Optional but recommended for better user experience */
    }  
    a.big-links,
    .big-links{
        font-size:1.5rem;
        text-decoration: none !important;
        color:var(--bs-dark) !important;
    }
    .numbers-big-links{
        font-family: 'ArimoVariable', Arial, Helvetica, sans-serif !important;
        font-size:1.5rem;
    }
    /* Fonts */
    .numbers{
        font-family: 'ArimoVariable', Arial, Helvetica, sans-serif !important;
    }
    .fw-d{
        font-weight:900;
    }
    .text-black{
        color: #000000 !important;
    }
    .text-lightpurple{
        color: var(--bs-lightpurple);
    }
    .text-blue{
        color: var(--bs-blue);
    }
    .text-lightblue{
        color: var(--bs-lightblue);
    }
    .text-mediumblue{
        color: var(--bs-mediumblue);
    }
    .text-mediumpurple{
        color: var(--bs-mediumpurple);
    }
    .text-lightpurple{
        color: var(--bs-lightpurple);
    }
    .text-darkpurple{
        color: var(--bs-darkpurple);
    }
    .text-purple{
        color: var(--bs-purple);
    }
    .text-pink{
        color: var(--bs-pink);
    }
    .text-orange{
        color: var(--bs-orange);
    }
    .text-mediumorange{
        color: var(--bs-mediumorange);
    }
    .text-lightorange{
        color: var(--bs-lightorange);
    }
    .text-yellow{
        color: var(--bs-yellow);
    }
    .text-lightgreen{
        color: var(--bs-lightgreen);
    }
    .text-mediumgreen{
        color: var(--bs-mediumgreen);
    }
    .text-green{
        color: var(--bs-green);
    }
    .text-red{
        color: var(--bs-red);
    }
    .btn-form{
        background-color: var(--bs-mediumorange) !important;
    }
    .nav-link{
        font-size:1.4rem;
    }
    .contact-links a{
        text-decoration: none !important;
    }
    #contact a li.bi{
        color:var(--bs-orange) !important;
    }
    .bg-orange{
            background:var(--bs-orange) !important;
    }
    .bg-color{
            background:var(--bs-bgcolor) !important;
            background-color:var(--bs-bgcolor) !important;
    }
    
    
    /* Basic responsive styles can be added here */
    .bg-image{
        background-color: var(--bg-color) !important;
        background: var(--bg-color) !important;
        background-image: var(--bg) !important;
    }
    body { 
        margin: 0;
        font-family: var(--bs-font-sans-serif);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: var(--viva-bgcolor);
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        background: var(--bg-color) !important;
        font-family: 'BodyGrotesqueRegular', arial, sans-serif !important;
        margin: 0;
        padding: 0;
        background-color: var(--bg-color) !important;
        background-image: var(--bg) !important;
        background: 
            url('/img/bg-top-left.png') top left no-repeat, 
            url('/img/bg-top-right.png') top right no-repeat,
            url('/img/bg-bottom-right.png') bottom right no-repeat,
            url('/img/bg-bottom-left.png') bottom left no-repeat,
            var(--bg) repeat !important;
        background-size:
            75px auto, /* top left */
            auto 75px,/* top right */
            auto 75px, /* bottom left */
            auto 75px, /* bottom lright */
            auto auto !important;

        background-attachment: 
            auto, 
            auto, 
            auto, 
            auto, 
            auto !important;
    } 
    
    .container {
        max-width: 1200px; /* Example max-width for content */
        margin: 0 auto; /* Center the container */
        padding: 20px;
    } 
    h1{
        font-family:'RubikBubbles', 'Arial Rounded', Helvetica, sans-serif !important;
        color:var(--viva-blue);
        font-size:1.6rem;
    }
    h2{
        font-family:'RubikBubbles', 'Arial Rounded', Helvetica, sans-serif !important;
        color:var(--viva-blue);
        font-size:2rem;
    }
    h3{
        font-family:'RubikBubbles', 'Arial Rounded', Helvetica, sans-serif !important;
        color:var(--viva-blue);
        font-size:1.8rem;
    }
    h4{
        font-family:'RubikBubbles', 'Arial Rounded', Helvetica, sans-serif !important;
        color:var(--viva-blue);
        font-size:1.6rem;
    }
    h5{
        font-family:'RubikBubbles', 'Arial Rounded', Helvetica, sans-serif !important;
        color:var(--bs-blue);
        font-size:1.4rem;
    }
    h6{
        font-family:'RubikBubbles', 'Arial Rounded', Helvetica, sans-serif !important;
        color:var(--viva-blue);
        font-size:1.1rem;
    }
    b{
        font-family: 'BodyGrotesqueRegular', Arial, Helvetica, sans-serif !important;
        color:var(--bs-dark) !important;
        font-weight: darker;
    }
    strong{
        font-family: 'BodyGrotesqueRegular', Arial, Helvetica, sans-serif !important;
        color:var(--bs-dark) !important;
        font-weight: darker;
    }
    span.number{
        font-family: 'BodyGrotesqueRegular', arial, sans-serif !important;
    }
    a{
        
        font-family: 'BodyGrotesqueRegular', arial, sans-serif !important;
        color:var(--bs-dark) !important;
        text-decoration: none;
    
    }
    li{
        font-size:1rem;
    }
    p{
        font-family: 'BodyGrotesqueRegular', arial, sans-serif !important;
        font-size:1rem;
    }
    .breadcrumb-item{
        padding-bottom:16px;
    }
    .breadcrumb-item,
    .breadcrumb-item a {
        font-family: 'BodyGrotesqueRegular', arial, sans-serif !important;
        text-decoration: none;
    }
    a:hover {
        color:var(--bs-orange) !important;
    }
    .badge{
        background-color:var(--bs-orange) !important;
        background:none var(--bs-orange) !important;
    }
    .bg-primary {
        background-color: var(--bs-bgcolor) !important
    }
    button{
        padding:5px;
        letter-spacing: 0.1em !important
    }
    button:hover{
        border: 2px solid var(--bs-dark) !important;
    }
    button.btn-form:hover{
        color:var(--bs-bgcolor) !important;
    }
    button.orange{
        background:var(--bs-orange);
        color:var(--bs-light);
        font-family:'simplyrounded', 'Arial Rounded', Helvetica, sans-serif !important;
        font-size:1rem;
        cursor:pointer;
    }
    button.orange:hover{
        background:var(--bs-mediumorange);
        color:var(--bs-light);
    }
    button.purple{
        background:var(--bs-darkpurple);
        color:var(--bs-light);
        font-family:'Arial Rounded', Helvetica, sans-serif !important;
        font-size:1rem;
        cursor:pointer;
    }
    button.purple:hover{
        background:var(--bs-purple);
        color:var(--bs-light);
    }
    .badge{
        letter-spacing: 0.1em !important;
        font-weight:lighter !important;
    }
    .rounded-pill{
        letter-spacing: 0.1em !important
    }
    .breadcrumb-item a{
        text-decoration: none !important;
        font-size:1rem;
    }
    .bg-orange{
        background:var(--bs-orange); 
        color:var(--bs-orange) !important;
    }
    .bg-lightorange{
        background:var(--bs-lightorange) !important;
    }
    .bg-mediumorange{
        background:var(--bs-mediumorange) !important;
    }
    .bg-mediumorange{
        background:var(--bs-mediumorange) !important;
    }
    .bg-lightpurple{
        background:var(--bg-lightpurple) !important;  
    } 
    .bg-lightgreen{
        background:var(--bs-teal) !important;
    }
    .font{
        font-family:'roundedvale', Arial, Helvetica, sans-serif !important;
        color:var(--bs-dark);
        font-size: 1rem;
        font-weight: lighter !important;;
        /* font-weight:lighter; */
    }
    ul{
        list-style-type: none
    }
    /* Media queries for different screen sizes */
    @media (max-width: 768px) {
        .container {
            padding: 10px;
        }
    }

    #warnName, #warnEmail, #warnTel{
        display:none;
        opacity: 0;
        transition: display 1s, color 1s;
    }

    .hide{
        display:none;
        opacity: 0;
        opacity: 0;
        scale: 0;
        height: 0;
        transition: display 0s, color 800ms, height 200ms;
    } 
    .show{
        opacity: 1;
        height: 36px;
        aspect-ratio: 1/1;
        display: block;
        position: relative;
        transition: all 0.25s;
        transition-behavior: allow-discrete;
        opacity: 1;
        scale: 1;
        color:var(--bs-red);
    } 
    .ratio-10{
        width:10%;
    }
    .ratio-90{
        width:90%;
    }
    .ratio-20{
        width:20%;
    }
    .ratio-80{
        width:80%;
    }

    li.breadcrumb-item.active,
    a.nav-link.active{
        color:var(--bs-orange) !important;
    }

    a.nav-link:hover{
        color:var(--bs-mediumorange) !important;
        /* border-bottom: var(--bs-mediumorange) 2px solid !important; */
        transition:all 0.3s ease-in;
        transform: translateX(0);
    }
    a.nav-link{
        /* border-bottom: rgba(255,255,255,0) 2px solid !important; */
        transition: all 0.3s ease-out;
        transform: translateX(1);
        padding-bottom:2px;
    }
    .myNavOpen{
          position: absolute; /* Changed from absolute to fixed */
          top: 0px; /* This will always be at the top of viewport */
          left: 0; /* Add this to ensure it spans full width from left */
          width: 100%;
          height: 220px;
          background: var(--bg) !important;
          transform: translateY();
          transition: all 0.50s ease-out;
          z-index: 999; /* Ensure it's below hamburger but above content */
        }
        #hamburger{
        
        cursor: pointer;
        position:absolute;
        top: 15px; /* Adjust the distance from the top */
        right: 15px; /* Adjust the distance from the right */
        z-index: 10000; /* Ensures the button stays on top of other content */
        width:48px !important;
        height:48px !important;
        }
        #hamburger:hover{
            filter: sepia(100%);
        }
        #menuArea{
          background:var(--bg) !important;
          border-bottom:2px solid black;
          box-shadow: rgba(0, 0, 0, 0.5) 2px 6px 8px 1px;
        }