:root {
    --darkBlue: #0d4263;
    --orange: #ff7800;
    --green: #64c11b;
    --orangeBright: #ffa300; 

}



body {  color:#222;  font-weight:400;}
.callout { background:#fff; margin:40px 0; box-shadow:0 0 20px rgba(0,0,0,0.1); border-radius:10px; padding:40px; }
.callout a { color:inherit; }



/* ========================== FORMS ======================= */



form { max-width:600px; margin:0 auto; }
label { display:block; margin-bottom:3px; font-size:16px; }
input[type="text"], textarea { -webkit-appearance: none; border-radius:5px;  outline: none; width:100%; padding:10px; border:none; background:#efefef; margin-bottom:20px; }
.error { color:red; }

input.btn {  padding:12px 24px; cursor:pointer; border:none; }




/* ===== ALT NEW BURGER ===================== */



.burger-menu { display:none; }

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

    /* Burger Menu Styles */
    .burger-menu {
        transition:all 0.3s ease;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 30px; /* Adjust height as needed */
        width: 35px; /* Adjust width as needed */
        padding: 0;
        position: fixed; right:20px;
        z-index: 1000; /* Ensure it's above other content */
        margin: 20px; /* Example positioning */
        outline: none; /* Remove outline on focus */
    }
    
    .line {
        display: block;
        width: 100%;
        height: 3px; /* Thickness of the lines */
        background: var(--orange); /* Color of the lines */
        border-radius: 5px;
        transition: all 0.3s ease; /* Smooth transition for all properties */
    }
    
    /* Off-screen Menu Styles */
    .off-screen-menu {
        position: fixed;
        top: 0;
        left: -100%; /* Start off-screen to the left */
        width: 100%; /* Or a fixed width like 300px */
        height: 100%;
        background-color: var(--darkBlue); /* Menu background */
        color: #fff;
        transition: left 0.3s ease; /* Smooth transition for sliding */
        z-index: 50; /* Below the burger icon */
    }
    
    .off-screen-menu.active {
        left: 0; /* Slide in when active */
    }
    
    .off-screen-menu ul {
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        list-style: none;
        padding: 0;
        margin: 0; height:100%;
        text-align: center;
    }
    
    .off-screen-menu li {
        margin: 10px 0;
    }
    
    .off-screen-menu a {
        color: #fff;
        text-decoration: none;
        font-size: 24px;
        padding: 10px 20px;
        display: block;
        transition: background-color 0.2s ease;
    }
    
    .off-screen-menu a:hover {
        background-color: #555;
        border-radius: 5px;
    }
    
    /* Burger to Cross Animation */
    .burger-menu.open { right:10px; }
    .burger-menu.open .line-1 {
        transform: translateY(9px) rotate(45deg); /* Move down and rotate */
    }
    
    .burger-menu.open .line-2 {
        opacity: 0; /* Fade out middle line */
    }
    
    .burger-menu.open .line-3 {
        transform: translateY(-11.5px) rotate(-45deg); /* Move up and rotate */
    }

}



/* ========================== BACKGROUND HEROS ================== */

.hero { content:"";  width:100%; height:100%; background:var(--darkBlue); position:fixed;left:0; top:0; }
.hero img { mix-blend-mode: multiply; opacity:0.8; width:100%; height:100%; position:fixed; top:0; left:0;  object-fit:cover; display:block; }


/* ========================== HEADER ======================== */



header { box-shadow:0 0 20px rgba(0,0,0,0.2); z-index:100; height:70px; width:100%; background:#fff; position:fixed; top:0; left:0; }



/* === home page header removal ==== */

header nav li a:hover { color:var(--orange); }
.template-3 h1 { color:var(--darkBlue); }
.template-3 h2 { color:#222; }

.headerLogo { display:block; z-index:20; }

.headerLogo img { width:160px; height:auto; }

@media screen and (min-width:768px) {
    .headerNav { z-index:200; position:fixed;top:40px; right:20px; }
    .headerNav ul { display:flex; flex-direction:row;justify-content:flex-end; }
    .headerNav li a { color:var(--darkBlue); text-decoration:none;font-size:16px; padding:0 12px;}
     .headerNav li a:hover { color:var(--orange); }
   .headerLogo img { width:360px; height:auto; }
    header { height:100px;  padding:20px 40px; display:flex; align-items:center; justify-content:space-between;}
        
}

@media screen and (min-width:1024px) {
   .headerLogo img { width:180px; height:auto; }


}

@media screen and (min-width:1280px) {
    
}


/* ========================== STRUCTURE ======================== */





main { position:relative;  padding-top:100px; }
.content { max-width:1400px; margin:0 auto; padding:20px; min-height:400px; }
.btn { text-align:center;cursor:pointer; background:var(--orange); font-size:16px;  font-family: "Sansation", sans-serif;  border:1px solid var(--orange); color:#fff; display:inline-block; padding:12px 24px; border-radius:40px; text-decoration:none; }
.btn:hover { background:var(--orangeBright);  }


.btnSecondary { background:#fff; color:var(--orange); border:1px solid var(--orange); display:inline-block; padding:12px 24px; border-radius:40px; text-decoration:none; }
.btnSecondary:hover { color:#fff;  }



@media screen and (min-width:768px) {
main {  padding-top:140px; }

}

@media screen and (min-width:1024px) {
    .content { padding:40px;}

}
@media screen and (min-width:1280px) {
    
}


/* =================== BREADCRUMBS =========================== */


.B_crumbBox { display:flex; font-size:14px; margin-bottom:30px;  }
.B_crumbBox li  { padding:0 2px; }
.B_crumbBox a { color:inherit; }




/* ========================== FONTS ======================== */

h1 { font-size:36px;line-height:110%; color:var(--darkBlue); }
h2 { font-size:24px; line-height:140%; color:var(--darkBlue);}
h3 { font-size:18px;  }
p { font-size:16px; margin-bottom:12px; line-height:140%; }

@media screen and (min-width:768px) {

h1 { font-size:48px; }


}

@media screen and (min-width:1024px) {
    
}
@media screen and (min-width:1280px) {
    
}





/* ========================== cards ======================== */



.cards { text-align:center; display:grid; gap:20px;grid-template-columns: 1fr; padding-bottom:40px; }
.cards li { }
.cards li a { display:flex; flex-direction:column; height:100%;position:relative; bottom:0; transition:all 0.3s ease;text-decoration:none; padding:20px; border-radius:24px; color:inherit; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.1); }
.cards li a h3 { font-size:18px; margin:0 0 12px 0; }
.cards li a p { margin:0 0 20px 0; }
.cards li a img { width:100%; height:100px; object-fit:contain; }

.cards li a:hover { box-shadow:0 5px 20px rgba(0,0,0,0.2); bottom:4px;  }
.cards li a .btn { margin-top:auto; }



@media screen and (min-width:501px) {
    .cards { grid-template-columns: 1fr 1fr}

}


@media screen and (min-width:768px) {
    .cards { grid-template-columns: 1fr 1fr 1fr;}

}
@media screen and (min-width:1024px) {
    .cards { grid-template-columns: 1fr 1fr 1fr 1fr; }

    
}









/* ========================== FOOTER ======================== */

footer { background:var(--orange); color:#fff; text-align:center; position:relative; padding:40px; }
footer img { max-width:190px; margin-bottom:30px; }
footer ul { display:flex; align-items:center; justify-content:center; }
footer li { padding:0 10px; }
footer a { color:#fff; padding:10px 0; text-decoration:none;}
footer li a:hover { border-bottom:1px solid #fff; }