@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

/* bebas-neue-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Bebas Neue - New';
  font-style: normal;
  font-weight: 400;
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  src: url('fonts/bebas-neue-v16-latin-regular.woff2') format('woff2'); 
}

:root {
  /* We support both light and dark schemes */
  color-scheme: light dark;
  --primary-color: light-dark(#333333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #181818);

  --highlight-color: light-dark(hotpink, lime);
  --font-shadow: light-dark(#FFFFFF, rgba(255, 255, 255, 0.2));
  --font-shadow2: light-dark(#181818, rgba(0, 0, 0, 0.5));
  --dark-red-background: light-dark(#993333, #25181B);
  --dark-red-header: light-dark(#993333, #D46761);
}

/* fixme: use css prefers-color-scheme instead? */
:root {
  &:has(input[name="color-scheme"][value="light"]:checked) {
    color-scheme: light;
  }
  &:has(input[name="color-scheme"][value="dark"]:checked) {
    color-scheme: dark;
  }
}

/* Debug */
/*
:root {
    color-scheme: dark;
}
*/

html{
    /* Add smooth scrolling behavior globally */
    scroll-behavior: smooth;
}

/* Default styles (light mode) */
body{
    color: var(--primary-color);
    background-color: var(--primary-background);
    transition: color 0.4s, background-color 0.4s;
    font-family:'Noto Sans',Arial,Helvetica,sans-serif;
    font-size: 1rem;
    /* line-height: 1.5; */
}

/*
 ============================================
       Mobile Styles (max-width: 40em)
 ============================================
*/

@media (max-width: 40em) {
    html{
        /* we need additional offset due to menu fixed position (#welcome) */
        [id] { scroll-margin-top: 70px;}
    }

    h1 {
        /* font-family:'Noto Sans',Arial,Helvetica,sans-serif; */
        font-family:'Oswald', sans-serif;
        font-weight: 500;
        font-size:1.125rem;
        text-transform:uppercase;
        letter-spacing:0px;
        color: var(--dark-red-header);
        text-shadow:0 1px 1px var(--font-shadow);
/*        text-shadow:0 1px 1px var(--font-shadow); */
    }
    h2 {
        font-family:'Oswald', sans-serif;
        font-weight: 500;
        font-size:1.125rem; /* 95%; */
        letter-spacing:0px;
        color: var(--dark-red-header);
        text-shadow:0 1px 1px var(--font-shadow);
    }

    .menu {
        position:fixed;
        font-family:'Oswald', sans-serif;
        letter-spacing:0px;
        text-shadow:0 1px 1px var(--font-shadow);

        top: 0px; left: 2px; right: 2px;
        margin: 0px; padding: 0px;
        text-align: center;
        height:52px;
        opacity:0.95;

        background: var(--primary-background);z-index:10;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        border: 0px;
/*        border: 1px solid red; */
    }
    .menu ul {
        /* clamp(minimum size, preferred size, maximum size) */
        /* pref:  calc(0.909rem + 0.455vw) */
        /* 448 - 100% */
        font-size: clamp(0.8rem, 4vw, 1.1rem);
        display: inline-block;
        align-items: center;
        height: 52px;
        list-style:none;
        margin: 0px;
        padding: 0px 0px;
        border: 0px;
/*        border: 3px solid yellow; */

    }
    .menu ul li {
        display: inline-block;
        color: var(--dark-red-header);
        font-weight: 500;
        text-transform:uppercase;
        margin: 0px;
        /* hight of the menu */
        padding: 10px 0px;
        text-align:center;

    }

    .menu ul li:hover, .menu li.active {color:#FFF;cursor:pointer;}

    /* Divider styling using ::before pseudo-element */
    .menu li:not(:first-child)::before {
        content: "|";
        color: #bbb;
        padding-right: 3px;
    }

    /* .menu ul li a:link {color:#FFF;text-decoration:none;cursor:pointer;} */
    .menu ul li a:link {
        color: var(--dark-red-header);

        text-decoration:none;cursor:pointer;}
    .menu ul li a:visited {
        color: var(--dark-red-header);

        text-decoration:none;cursor:pointer;}

    .welcome {padding-top:70px;
        background: var(--dark-red-background);
        color:#FFFFFF;
        h1{
            color:#FFFFFF;
            text-shadow: 0px 1px 1px var(--font-shadow2);
        }
    }

    .services{
        background: var(--dark-red-background);
        color:#FFFFFF;
        h1{
            color:#FFFFFF;
            text-shadow: 0px 1px 1px var(--font-shadow2);
        }
/*
        p{
            color: var(--primary-color);
            text-shadow: 1px 1px 2px var(--font-shadow2);
        }
        ul{color:#FFF;}
*/
    }

    #backToTop {position:fixed;right:10px;bottom:40px;width:40px;height:40px;
        background:#993333 0 0 no-repeat;
        border-radius: 50%;
        opacity:0.40;z-index:100;cursor:pointer;
        color: #e4e4e4;
        display: grid;
        place-items: center;
    /*    visibility: hidden;
        display: none;
    */
    }
    #backToTop::before {
        content: url(/img/arrow_w.svg);
    }

    .contact #email img {vertical-align:middle; margin:-6px 6px 0 0; width:20px; height:20px;}
    .contact #email{
        color: var(--dark-red-header);
        text-decoration:none; cursor:pointer;}
    .contact #email:hover {
        color: var(--dark-red-header);
        text-decoration:none; cursor:pointer;}
    .contact #email:visited {
        color: var(--dark-red-header);
        text-decoration:none; cursor:pointer;}
    .contact #street_address_text {padding-top: 10px;font-weight:bold;font-size:100%;text-transform:capitalized;letter-spacing:0px}
    .contact #foot {padding-top: 520px;}
} /* End Mobile Styles */


/* ============================================
   Desktop Styles (min-width: 40.063em)
   ============================================ */

@media (min-width: 40.063em) {
    /* For all element on the page (e.g., <div>, <h1>, <p>, <ul>). */
    *{margin:0;padding:0;border:0;}

    html{
        /* offset is optional */
        [id] { scroll-margin-top: 10px;}
    }


    h1{text-transform:uppercase;font-family:'Bebas Neue';letter-spacing:0px;color:#993333;text-shadow:0 1px 1px var(--font-shadow);font-weight:normal;}
    h2{text-transform:uppercase;font-family:'Bebas Neue';letter-spacing:0px;color:#993333;text-shadow:0 1px 1px var(--font-shadow);font-weight:normal;}
    h3{text-transform:uppercase;font-family:'Bebas Neue';letter-spacing:0px;color:#993333;text-shadow:0 1px 1px var(--font-shadow);font-weight:normal;}
    p{
        font-weight: 300; /* Light weight */
        font-size:18px;
        text-align:justify;
    }

    .center{position:static;width:960px;left:0;right:0;margin:auto;overflow:hidden;}

    .half {width:480px;height:800px;margin:10px 0;float:left;}
    .half p{padding:0 60px 10px 0;}

    .menu{
        position:fixed;width:100%;height:100px;opacity:0.95;
        background: var(--primary-background);
        z-index:10;box-shadow:0 0 4px 0 #000;}

    /* Making the Entire List Item Clickable */
    .menu ul li a {
    display: block; /* Makes the link a block-level element, filling its container */
    width: 100%;    /* Ensures the link takes up the full width of the li */
    height: 100%;   /* Ensures the link takes up the full height of the li */
    /* Add padding to the anchor tag for a larger clickable area */
    padding: 0 10px;
    }

    .menu ul{position:absolute;left:0;right:0;list-style:none;width:960px;margin:auto;}
    .menu ul li{
        float:left;color:#993333;
        font-family:'Bebas Neue';
        font-size:28px;
        margin:40px 0;
        padding:0 20px;
        height:20px;
        line-height:20px;
        border-right:1px solid #adadad;
    }
    .menu ul li:last-child{border-right:none;}
    /*
    .menu ul li:first-child{padding:0;margin:0;height:100px;border-right:none;}
    .menu ul li:first-child:hover{padding:0;margin:0;height:100px;border-right:none;cursor:pointer;}
    */
    .menu ul li:hover, .menu li.hover {
    background:#993333;
    color:#FFFFFF;
    height:100px;
    line-height:100px;
    padding:0px 20px;margin:0;
    cursor:pointer;
    }

    .menu ul li #logo {max-width:154px;height: auto;}

    .menu ul li a:link {color:#993333;text-decoration:none;cursor:pointer;}
    .menu ul li a:visited {color:#993333;text-decoration:none;cursor:pointer;}
    .menu ul li a:hover {color:#FFFFFF;text-decoration:none;cursor:pointer;}
    .menu ul li a:active {color:#FFFFFF;text-decoration:none;cursor:pointer;}
    /*
    .menu ul li a:visited {color:#993333;text-decoration:none;cursor:pointer;}
    */

    .welcome {position:relative;top:100px;height:700px;}
    .welcome .slide{position:relative;background:url(../img/welcome.jpg) center center no-repeat;height:552px;width:100%;}
    .welcome .center h1.your{position:absolute;top:260px;left:300px;color:#FFF;font-size:38px;text-shadow:0 1px 1px #000;}
    .welcome .center p{position:absolute;top:315px;left:300px;color:#FFF;width:600px;text-shadow:0 1px 1px #000;}
    .welcome .center{position:relative;height:450px;}

    .focus {position:static;width:100%;height:850px;}
    .focus h1{text-align:left;padding:50px 0 0px 0;text-shadow:0 1px 1px var(--font-shadow);}
    .focus .third {width:320px;height:600px;margin:0px 0px 10px 0px;float:left;}
    .focus .third h2{color:#993333;padding:20px 0 20px 0;text-shadow:0 1px 1px var(--font-shadow);}
    .focus .third p{padding:0 30px 10px 0;}

    .services{position:static;width:100%;height:940px;background: var(--dark-red-background);}
    .services h1{color:#FFF;padding:120px 0 30px 0;}
    .services p{color:#FFF;font-size:20px;padding:0 0 20px 0;text-shadow:0 1px 1px #000;}
    .services .left{width:720px;float:left;}
    .services .left p{color:#FFF;font-size:18px;text-shadow:0 1px 1px #000;margin:15px 0 0 0;}
    .services .left li{height:50px;color:#FFF;font-size:18px;border-bottom:1px solid rgba(255,255,255,0.3);margin:0 50px 0 1px;line-height:50px;list-style:inside disc;text-shadow:0 1px 1px #000;}
    .services .left li:first-child{border-top:1px solid rgba(255,255,255,0.3);}
    .services .left li.sub{padding:0 0 0 20px;margin:0 50px 0 1px;line-height:50px;list-style:inside circle;background: #913030;box-shadow:0 0 10px 0 #000 inside;font-weight:normal;}
    .services .right{width:240px;float:left;}
    .services .right p{color:#FFF;font-size:18px;text-shadow:0 1px 1px #000;}

    .team{position:static;width:100%;height:740px;}
    .team h1{text-align:left;padding:120px 0 30px 0;text-shadow:0 1px 1px var(--font-shadow);}
    .team h2{padding:0;margin:0;font-size:26px;text-shadow:0 1px 1px var(--font-shadow);}
    .team .half {height:400px;}
    .team .half h2{color:#993333;padding:20px 0 20px 0;text-shadow:0 1px 1px var(--font-shadow);}
    .team .half p{padding:0 30px 10px 0;}
    .team .brochure{width:451px;height:76px;background:url(../img/brochure.jpg) 0 0 no-repeat;display:block;overflow:hidden;}
    .team .brochure:hover{background:url(../img/brochure.jpg) 0 -76px no-repeat;cursor:pointer;}
    .team .center .pic{text-align: center;}

    .resources{padding:120px 0 30px 0;}
    .resources h1{padding:0 0 40px 0;text-shadow:0 1px 1px var(--font-shadow);}
    .resources h3{padding:0;margin:0;font-size:26px;text-shadow:0 1px 1px var(--font-shadow);}
    .resources .third{height:auto;}
    .resources .third h2{color:#993333;padding:0 0 20px 0;text-shadow:0 1px 1px var(--font-shadow);}
    .resources .third p{color:#000;padding:0 40px 40px 0;text-shadow:none;}
    .resources ul{margin:0 5px 40px 5px;}

    .pdf{height:35px;line-height:12px;background:url(../img/ico-pdf.jpg) 5px 11px no-repeat;padding:11px 0 5px 40px;width:230px;border-bottom:1px solid rgba(0,0,0,0.3);list-style: none;}
    .pdf:first-child{border-top:1px solid rgba(0,0,0,0.3);}
    .pdf span{font-size:10px;font-family:'Noto Sans';}
    .pdf:hover{background:#FFF url(../img/ico-pdf.jpg) 5px 11px no-repeat;box-shadow:0 0 5px 0 #999;cursor:pointer;}

    .brochure{width:451px;height:76px;background:url(../img/brochure.jpg) 0 0 no-repeat;display:block;overflow:hidden;}
    .brochure:hover{background:url(../img/brochure.jpg) 0 -76px no-repeat;cursor:pointer;}

    .career{background:#993333;padding:120px 0 0 0;}
    .career .half{height:auto;margin:0 0 60px 0;}
    .career h1{color:#FFF;padding:0 0 30px 0;text-shadow:0 1px 1px #000;}
    .career h2{color:#FFF;padding:0 0 30px 0;text-shadow:0 1px 1px #000;}
    .career h3{color:#FFF;padding:0;text-shadow:0 1px 1px #000;}
    .career p{color:#FFF;text-shadow:0 1px 1px #000;}
    .career ul{padding:0 0 50px 0;}
    .career li{list-style:none;border-bottom:1px solid rgba(255,255,255,0.2);padding:20px 0;}
    .career li:first-child{border-top:1px solid rgba(255,255,255,0.2);}
    /*
    .career .brochure{width:451px;height:76px;background:url(../img/brochure.jpg) 0 0 no-repeat;display:block;overflow:hidden;}
    .career .brochure:hover{background:url(../img/brochure.jpg) 0 -76px no-repeat;cursor:pointer;}
    */
    .career .cv{background:#892e2e;box-shadow:0 10px 10px -15px #000000 inset;padding:80px 0;}
    .career .cv p{margin:0 0 0 77px;}
    .career .cv #form{position:relative;top:30px;right:0;left:0;margin:20px auto;width:800px;height:250px;padding:30px 25px;}
    .career .cv #form img{vertical-align:top;margin:5px 15px 0 3px}
    .career .cv #form h2{color:#FFF;text-transform:uppercase;padding:20px 0;font-size:22px;}
    .career .cv #form input{width:340px;height:40px;font-size:18px;border-radius:4px;background:#FFF;box-shadow:0 1px 2px 0 #DDD inset;line-height:40px;margin:5px 0;padding:0 5px;border:1px solid #000;font-family:'Noto Sans';}
    .career .cv #form input:focus{background:#e7e7e7;color:#000;box-shadow:inset 0 1px 8px -3px #000;}
    .career .cv #form textarea{width:728px;height:70px;font-size:18px;border-radius:4px;background:#FFF;box-shadow:inset 0 1px 2px 0 #DDD;margin:15px 0;padding:5px;border:1px solid #000;font-family:'Noto Sans';}
    .career .cv #form textarea:focus{background:#e7e7e7;color:#000;box-shadow:inset 0 1px 8px -3px #000;}
    .career .cv #form input[type=submit]{background:#993333;margin:20px 0 0 242px;box-shadow:none;color:#FFF;border:none;width:150px;font-family:'Bebas Neue';font-size:30px;}
    .career .cv #form input[type=submit]:hover{cursor:pointer;color:#000;}
    .career .cv #form input[type=file]{background:#892e2e;border:none;box-shadow:none;color:#FFF;width:300px;height:40px;font-size:12px;line-height:40px;}
    .career .cv #form input[type="file"]::-webkit-file-upload-button{-webkit-appearance:none;background:#993333;border-radius:4px;color:#FFF;border:none;height:40px;font-size:20px;text-transform:uppercase;cursor:pointer;padding:0 20px;font-family:'Bebas Neue';}
    .career .cv #form input[type="file"]::-webkit-file-upload-button:hover{color:#000;cursor:pointer;}
    .career .cv #form #clip-icon{vertical-align:middle;}

    .contact.{position:static;width:100%;height:740px;}
    .contact h1{text-align:left;padding:0px 0 30px 0;text-shadow:0 1px 1px var(--font-shadow);}
    /* .contact .center{position:relative;padding:120px 0 0 0;height:600px;background: var(--dark-red-background);} */
    .contact .center{position:relative;padding:120px 0 0 0;height:600px;}
    .contact .left{position:relative;padding:20px 0 0 0;height:100px;}
    .contact #map-canvas{position:absolute;top:165px;left:0;width:250px;height:300px;}
    .contact #text{position:absolute;top:160px;left:180px;width:520px;height:50px;color:#000;}

    .contact #email{position:absolute;top:200px;left:0px;width:260px;height:50px;line-height:50px;color:#FFF;font-size:20px;text-decoration:none;background:#993333;border-radius:5px;}
    .contact #email img{vertical-align:middle;margin:-6px 6px 0 0;}
    .contact #email:hover{background:#ae4542;text-decoration:none;cursor:pointer;}

    .contact #street_address_text{position:absolute;top:280px;left:0px;width:170px;height:30px;
        color:#993333;text-transform: uppercase;font-family:'Bebas Neue';font-size:26px;
        text-shadow:0 1px 1px var(--font-shadow);
    }
    .contact #street_address{position:absolute;top:310px;left:0px;width:500px;height:30px;color: var(--primary-color);
        text-shadow:0 1px 1px var(--font-shadow);}
    /*
    .contact #phone{position:absolute;top:350px;left:280px;width:220px;height:50px;line-height:50px;color:#FFF;font-size:20px;text-decoration:none;background:#a1a1a1;border-radius:5px;}
    .contact #phone img{vertical-align:middle;margin:-6px 6px 0 0;}
    .contact #street_address_text{position:absolute;top:430px;left:280px;width:170px;height:30px;color:#993333;text-transform: uppercase;font-family:Bebas;font-size:26px;}
    .contact #street_address{position:absolute;top:460px;left:280px;width:500px;height:30px;color:#000;}
    */

    .contact #fax_text{position:absolute;top:350px;left:280px;width:170px;height:30px;color:#993333;text-transform:uppercase;font-family:'Bebas Neue';font-size:26px;}
    .contact #fax{position:absolute;top:374px;left:280px;width:250px;height:30px;color:#000;}
    .contact #post_address_text{position:absolute;top:480px;left:280px;width:170px;height:30px;color:#993333;text-transform: uppercase;font-family:'Bebas Neue';font-size:26px;}
    .contact #post_address{position:absolute;top:504px;left:280px;width:500px;height:30px;color: var();}
    .contact #foot{position:absolute;top:600px;left:0px;width:400px;height:30px;color: var(--primary-color);font-size:15px;
    text-shadow:0 1px 1px var(--font-shadow);
    }
    .contact #foot a{color:#993333;text-decoration:none;}
    .contact #foot a:hover{color:#000;text-decoration:none;cursor:pointer;}

    #backToTop{
        position:sticky;bottom:0;width:160px;height:110px;
        background:url(../img/backToTop.png) 0 0 no-repeat;
        z-index:100;cursor:pointer;display:none;
    }

    .blog .head{height:100px;line-height:100px;}
    .blog .head a{padding:0 10px 0 30px;line-height:30px;margin:36px 20px 0 0;float:left;background:#993333 url(../img/back.jpg) 10px 9px no-repeat;;color:#FFF;border-radius:4px;text-decoration:none;text-transform:uppercase;font-size:18px;font-weight:bold;font-family:'Bebas Neue';}
    .blog .head h1{width:300px;float:left;}
    .blog .center{position:static;width:960px;left:0;right:0;margin:auto;overflow:hidden;padding:20px;}
    .blog .center .pic{display:block;width:280px;height:200px;float:left;z-index:10;box-shadow:0 5px 15px 0 #CCCCCC;}
    .blog .center .pic img{width:280px;height:200px;border:0;}
    .blog .center h2{text-shadow:none;}
    .blog .center .text{display:block;width:600px;padding:40px;height:auto;border:0;box-shadow:0 5px 15px 0 #CCCCCC;float:left;background:#FFF;}
    .blog .center .ico-date{margin:2px 4px -2px 0;}
    .blog .center .date{color:#000;font-size:10px;text-transform:uppercase;margin:10px 0 0 0;}
    .blog .center:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
    .blog.site .center .text{display:block;width:600px;height:120px;padding:40px;border:0;box-shadow:0 5px 15px 0 #CCCCCC;float:left;background:#FFF;overflow:hidden;}
    .blog.site .center:hover .text{box-shadow:0 0 3px 0 #993333;cursor:pointer;}
    .blog.site .center:hover .pic{box-shadow:0 0 3px 0 #993333;cursor:pointer;}

    .blog.post{border-radius:5px;height:35px;color:#FFF;line-height:16px;padding:5px 0 5px 5px;width:230px;border-bottom:1px solid rgba(255,255,255,0.3);list-style: none;
    color:#FFF;font-size:18px;text-shadow:0 1px 1px var(--font-shadow);}
    .blog.post span{font-size:11px;font-family:'Noto Sans';font-style:italic}
    .blog.post:hover{background:#AE4542;cursor:pointer;}
    .blog.date{color:#000;font-size:10px;text-transform:uppercase;margin:10px 0 0 0;}
}