/* Define base unit size based on 960px total width */

:root {    
    --ST_red: #a72c38;
    --ST_blue: #00436c;
    --logo-width: 200px;
    --logo-small: 28px;
    --logo-large: 37px;
    --navbar-padding: 25px;
    --logo-padding-left:35px ;
    --image-small: calc(42.5 * var(--unit));
    --image-medium: calc(50 * var(--unit));
    --image-large: calc(57.5 * var(--unit));
    --card-padding: calc(12.5* var(--unit));
    --card-size: calc(100 * var(--unit));
    --half-card-gap: calc(10 * var(--unit));
    --callout-card-padding: calc(12.5* var(--unit));
    --callout-card-size: calc(160 * var(--unit));
    --half-callout-card-gap: calc(5 * var(--unit));
    --news-box-size: 66%;
    --news-shadow-size: calc( 7 * var(--unit));
    --news-shadow-blur: calc(0.5 * var(--news-shadow-size));
    --about-family-shadow-size: calc( 7 * var(--unit));
    --about-family-shadow-blur: calc(0.5 * var(--news-shadow-size));
    /*--about-building-size: calc( 200 * var(--unit));*/
    /* --about-box-size: calc( 200 * var(--unit)); */
}

a.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.btn:hover {
    transform: translateY(-6px);
    /* box-shadow: 11px 11px 16px rgba(0, 0, 0, 0.3) !important; */ 
    box-shadow: calc(1.25*var(--news-shadow-size)) calc(1.25*var(--news-shadow-size)) calc(1.5*var(--news-shadow-blur)) rgba(0, 0, 0, 0.2) !important;
}

.fixed-top{
    z-index: 1035;
    /* mask-image: linear-gradient(to bottom, black 70%, transparent 100%); */
    /* opacity: 0.9; */
}


/* Add a fading overlay at the bottom of the header */
.fixed-top::after {
  content: "";
  position: absolute;
  bottom: -20px; /* extend below the header */
  left: 0;
  width: 100%;
  height: 20px; /* height of the fade */
  pointer-events: none; /* allow clicks to pass through */
  background: linear-gradient(to bottom, rgba(233,233,233,0.8), rgba(233,233,233,0));
  /* backdrop-filter: blur(5px); */
  /* adjust colors to match your header’s background */
}

  


.fixed-top-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1033;
    background-color: rgba(233, 233, 233, 0.8) !important;
    backdrop-filter: blur(5px);

}

/* ---------------NEW NAVBAR CONTAINER-------------------- */
.navbar-container {
    display: flex;
    flex-direction: row;
    align-items: start; 
    justify-content: space-between; /* This pushes logo to left and nav to right */
    flex-wrap: nowrap;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

.navbar {
    z-index: 1035;
}

.logo-contained {
    flex: 0 1 auto;
}  

.hero {
    background-position: top;
}

.navbar-brand {
    padding-top: 0 ;
    padding-bottom: 0 ;
}

/* .main-content { */
    /* margin-top: var(--header-height, 0px); */
/* } */


.hero-tagline {
    font-family: 'Author-LightItalic';
    font-style: italic;
    font-weight: 300;
    color: var(--ST_blue);
    text-shadow: none;
    position: absolute;
    font-size: 4.5vw;
}

/* Restrict the width only on the product_list page */
.product-list-container {
    padding:0;
    margin-top: 105px;
    margin-left: auto;
    margin-right: auto;
}

/* Product card styling */
.product-card {
    width: var(--card-size);
    height: var(--card-size);    
    background: #fff;
    border: none;
    /*box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
    box-shadow: 11px 11px 10px rgba(0, 0, 0, 0.2);  /* shadow bottom-right */
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    padding: var(--card-padding);
    margin: var(--half-card-gap); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    /* NEW: make absolutely positioned children (image) anchor off this element */
    position: relative;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 11px 11px 16px rgba(0, 0, 0, 0.3);
}

/* Product title section */
.product-title {
    font-family: 'Author-Extralight';
    font-size: calc(8 * var(--unit));
    color: #001a57;
    line-height: 1.2;
    margin-bottom: calc(5 * var(--unit));
    text-align: left;
}

.product-list-container {
    a, a:hover {
        color: inherit;
        text-decoration: none;
    }
}


/* Wrapper DIV (positions the image inside the padded content) */
.product-img-wrap {
    position: absolute;
    right: var(--card-padding); /* account for inner padding */
    bottom: var(--card-padding);
    /* width: var(--image-medium); */
    /* height: var(--image-medium); */
    /*   display: block;*/
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: visible;
}

/* for products labeled Large, we increase the image size*/
.product-small {
    width: var(--image-small);
    height: var(--image-small);
}

/* for products labeled Large, we increase the image size*/
.product-medium {
    width: var(--image-medium);
    height: var(--image-medium);
}

/* for products labeled Large, we increase the image size*/
.product-large {
    width: var(--image-large);
    height: var(--image-large);
}

/* img styling - object-fit must be on the img element */
img.product-img {                             
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain;
    width: auto;
    height: auto;
    /* margin: auto; */
    margin: 0;
    display: block;                    
}

/* === CALLOUT SECTION === */

.callout {
    background: #e9e9e9;
    color: var(--ST_blue);
    padding-bottom: calc(50 * var(--unit));
}

.callout .container ul {
    margin: 0;
    padding: 0;
}

/* Restrict the width only on the callout page */
.callout-container {
    padding:0;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;

    a, a:hover {
        color: inherit;
        text-decoration: none;
    }
}

/* Callout card styling */
.callout-card, .callout-picture {
    width: var(--callout-card-size);
    height: var(--callout-card-size);    
    background: #fff;
    border: none;
    /*box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
    box-shadow: 11px 11px 10px rgba(0, 0, 0, 0.2);  /* shadow bottom-right */
    margin: var(--half-callout-card-gap); 

    /* NEW: make absolutely positioned children (image) anchor off this element */
    position: relative;
    font-family: "Author-LightItalic";
    font-style: italic;
    /* font-weight: 300; */
    font-size: calc(9 * var(--unit));
    text-align: right;
    text-transform: uppercase;
    a {
        font-family: "Author-Light";
	font-style: normal;
	font-weight: bold;
	
    }
    p, li {
        line-height: 1.2;
    }
    li p {
        margin-bottom: 0;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
}

.callout .callout-picture {
    overflow: visible;
}

.callout .callout-picture figcaption {
    margin-top: 0.5em;
    text-align: right;
    a {
        color: var(--ST_blue); /* or another visible color */
        font-family: "Author-LightItalic";
	font-style: italic;
	font-weight: bold;	
        font-size: calc(8 * var(--unit));
    }
}

.callout-padding {
    padding: var(--callout-card-padding);
}


/* Callout card styling */
.callout-apps {
    width: var(--callout-card-size);
    height: var(--callout-card-size);    
    background: #e9e9e9;
    border: none;
    margin: var(--half-callout-card-gap); 
    display: flex;
    flex-direction: column;      /* Stack paragraph and list vertically */
    justify-content: center;    
   
    /* NEW: make absolutely positioned children (image) anchor off this element */
    font-family: "Author-LightItalic";
    font-style: italic;
    /* font-weight: 300;     */
    font-size: calc(9 * var(--unit));
    text-align: center;
    text-transform: uppercase;
    p, li {
        line-height: 1.2;
    }
    li p {
        margin-bottom: 0;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
}

.callout-pitch {
    width: var(--callout-card-size);
    height: var(--callout-card-size);    
    background: #e9e9e9;
    border: none;
    margin: var(--half-callout-card-gap); 
    display: flex;
    flex-direction: column;      /* Stack paragraph and list vertically */
    justify-content: center; 
    align-items: center;

}


.callout-circle {
  width: calc( 80 * var(--unit));               /* circle width */
  height: calc( 80 * var(--unit));              /* circle height (same as width) */
  background-color: var(--ST_red);      /* red background */
  color: white;               /* white text */
  border-radius: 50%;         /* makes it a circle */
  display: flex;              /* use flexbox for alignment */
  justify-content: flex-end;  /* push text to the right */
  align-items: center;        /* vertically center text */
  padding-right: calc( 20 * var(--unit));        /* some space from the edge */
  font-family: "Author-Italic";
  font-style: italic;
  /* font-weight: 400; */
  font-size: calc(9 * var(--unit));
  text-transform: lowercase;
  text-align: right;          /* ensures multiline text also right-aligned */
  line-height: 1.2;
}

/* img styling - object-fit must be on the img element */
img.callout-img {                             
    /* max-width: 100%; 
       max-height: 100%;  */
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    /* margin: 0; */
    display: block;                    
}


.news-box {
    /* height: var(--news-box-size);     */
    background: #e9e9e9;
    border: none;
    border-right: solid 2px var(--ST_blue);
    text-align: right;
    font-family: Author-LightItalic;
    font-style: italic;
    padding-right: calc(33 * var(--unit));
    padding-top: calc(40 * var(--unit));
    padding-bottom: calc(40 * var(--unit));
    display: flex;
    flex-direction: column;      /* Stack paragraph and list vertically */
    justify-content: center; 
    
    p, li {
        line-height: 1.2;
    }
    li {
        font-family: "Author-Light";
	font-style: normal;
    }
    li p {
        margin-bottom: 0;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
}   

.news{
    color: var(--ST_blue);
    background-color: #e9e9e9;
    padding-top: calc(50 * var(--unit));
    .container {
        position: relative;
    }
    a.btn {
        width: calc( 65 * var(--unit));               /* circle width */
        height: calc( 65 * var(--unit));              /* circle height (same as width) */
        border-radius: 50%;         /* makes it a circle */
        position: absolute;
        transform: translate(-50%, -50%);        
        padding: 0;
        background-color: #ffffff;
        color: var(--ST_blue);
        font-family: Author-LightItalic;
	font-style: italic;
        font-weight: normal;
        font-size: calc( 18 * var(--unit));
        line-height: 1.1;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        box-shadow: var(--news-shadow-size) var(--news-shadow-size) var(--news-shadow-blur) rgba(0, 0, 0, 0.25);  /* shadow bottom-right */
        transition: transform 0.2s ease, box-shadow 0.2s ease;

    }

    a.btn:hover {
        /* We include the -50% centering AND the -6px lift together */
        /* !important is needed to override the inline style from Twig */
        transform: translate(-50%, calc(-50% - 6px)) !important;
        box-shadow: calc(1.25*var(--news-shadow-size)) calc(1.25*var(--news-shadow-size)) calc(1.5*var(--news-shadow-blur)) rgba(0, 0, 0, 0.2) !important;

    }
}



/* Extra-Large screens: 45% of view width, 3 columns */
/* @media (min-width: 1600px) { */
    /* :root { */
    /* --unit: calc(50vw/340); */
    /* } */
    /* .container { */
        /* max-width: calc(480 * var(--unit)); */
    /* } */
    /* .product-list-container { */
        /* width: calc(480 * var(--unit)); */
    /* } */
/* } */

/* Extra-Large screens: 45% of view width, 3 columns */
@media (min-width: 1600px) {
    :root {
    --unit: calc(42.5vw/340);
    /* --about-box-size: calc(200 * 49vw / 340); */
    --about-box-size: calc(230 * var(--unit));
    }
    
    .showcase a.btn, .about a.btn {    
        width: calc( 62 * var(--unit)); 
        height: calc( 62 * var(--unit)); 
        font-size: calc( 17 * var(--unit));
    }
    .about {
        padding-top: calc(120 * var(--unit));
        padding-bottom: calc(180 * var(--unit));
        
        .container {
            width: calc( 450 * var(--unit));
            max-width: calc( 450 * var(--unit));
        }
    }    
}

@media (min-width: 1500px)  {
    .about-box {
        font-size: calc(10 * var(--unit));
        /* look like font size in "good regime" 1012-1500*/
        /* font-size: 23.66px;  */
    }
    .about a.btn {
        right: -55% !important;
    }
}

/* Large screens: 50% of view width, 3 columns */
@media (min-width: 1500px) and (max-width: 1599.98px) {
    :root {
    --unit: calc(50vw/340);
    }
    .showcase a.btn, .about a.btn {    
        width: calc( 55 * var(--unit)); 
        height: calc( 55 * var(--unit)); 
        font-size: calc( 15.5 * var(--unit));        
    }
    .about {
        padding-top: calc(120 * var(--unit));
        padding-bottom: calc(160 * var(--unit)); 
        .container {
            width: calc( 420 * var(--unit));
            max-width: calc( 420 * var(--unit));
        }    
    }
}

@media (min-width: 1256px) and (max-width: 1599.98px) {
    :root {
        /* --about-box-size: calc(200 * var(--unit)); */
        --about-box-size: calc(205 * var(--unit));
    }
}

/* Medium desktops: 60% view width */
@media (min-width: 1256px) and (max-width: 1499.98px) {
    :root {
        --unit: calc(60vw/340);
    }
    .showcase a.btn, .about a.btn {    
        width: calc( 45 * var(--unit)); 
        height: calc( 45 * var(--unit)); 
        font-size: calc( 13 * var(--unit));
    }

    
    .about {
        padding-top: calc(120 * var(--unit));
        padding-bottom: calc(140 * var(--unit));         
        .container {
            width: calc( 420 * var(--unit));
            max-width: calc( 420 * var(--unit));
        }       
    }    
}

/* medium desktop and above - logo on far left */
@media (min-width: 1256px){
    :root {
        --about-building-size: calc( 200 * var(--unit));
        --about-family-size: calc( 110 * var(--unit));
        /* --about-box-size: calc(230 * var(--unit)); */
        --about-family-font-size: calc( 10.5 * var(--unit));
    }
    
    .about-box, .footer-hashtag {
        padding-left: calc(30 * var(--unit));
    }

    
    /* footer-top bottom padding does not include the wire logo size*/
    .footer-top{
        padding-bottom: calc( 23 * var(--unit) - 1rem); 
    }
    .footer-tagline{
        font-size: calc( 14 * var(--unit)); 
        padding-left: calc( 20 * var(--unit));
    }
    
/*----------contact page - two companies-------------*/
    /* bookmark*/
    
    .container_twocomp {
        padding-top: 120px;
        padding-bottom: 10vw;
        padding-left: 6vw;
        padding-right: 6vw;
        a.btn { margin: auto;}
    }
    
    .twocomp_description{
        
        width: 40vw;
        height: 40vw;
        padding-left: 6vw;
        padding-right: 10vw;
        padding-top: 10vw;
        order: 2;
        font-size: 2.5vw;/*calc( 15 * var(--unit)); */
        line-height: 1.1;
    }
    
    .twocomp_export {
        padding-top: 11vw;
        width: 30vw;
        height: 40vw;
        order: 1;
        a.btn { 
            padding: 1vw;
        }
        ul li { 
            font-size: 1.5rem;
            /*font-size: 5cqw;  *//*font in terms of container width*/
            line-height:1.3;
        }
    }
    
    .twocomp_lab {
        margin-left: -3vw;
        padding-top: 11vw;
        width: 30vw;
        height: 40vw;
        order: 3;
        a.btn { 
            padding: 1vw;
        }
        ul li { 
            font-size: 1.5rem;
            /* font-size: 1.1vw; */
            line-height:1.3;
        }
    }
    
    .div_button { 
        margin-bottom: 3vw;
        a.btn{
            width: 10vw;
            height: 10vw;
            font-size: 1.8vw;
            span.btn-small-text {font-size: 1.25vw;}
        }
    }
/*----------end contact page - two companies-------------*/    

}

/* smaller than medium desktop */
@media (max-width: 1255.98px){
    .footer-tagline{
        font-size: calc( 13 * var(--unit)); 
        padding-left: calc( 20 * var(--unit));
    }
}

/* Small desktops: 70% view width */
@media (min-width: 1012px) and (max-width: 1255.98px) {
    :root {
        --unit: calc(70vw/340);
        --about-box-size: calc(180 * var(--unit));
        --about-building-size: calc( 200 * var(--unit));
        --about-family-size: calc( 110 * var(--unit));
        --about-family-font-size: calc( 10 * var(--unit));
    }
    .showcase a.btn, .about a.btn {    
        width: calc( 40 * var(--unit)); 
        height: calc( 40 * var(--unit)); 
        font-size: calc( 11 * var(--unit));
    }
    
    .about a.btn {
        right: -20% !important;
    }

    
    .about {
        padding-top: calc(120 * var(--unit));
        padding-bottom: calc(120 * var(--unit));         
        .container {
            width: calc( 420 * var(--unit));
            max-width: calc( 420 * var(--unit));
        }       
    } 

    .about-box, .footer-hashtag {
        padding-left: calc(25 * var(--unit));
    }

/* footer-top bottom padding changes increases so that the logo is under the three columns of the menu*/
    .footer-top{
        padding-bottom: calc( 89 * var(--unit) - 1rem);
    }

/*----------contact page - two companies-------------*/
    /* bookmark*/
    
    .container_twocomp {
        padding-top: 120px;
        padding-bottom: 10vw;
        padding-left: 3vw;
        padding-right: 3vw;
        a.btn { margin: auto;}
    }
    .twocomp_description{
        
        width: 35vw;
        height: 35vw;
        padding-left: 4vw;
        padding-right: 7vw;
        padding-top: 7.5vw;
        order: 2;
        font-size: 2.5vw;/*calc( 15 * var(--unit)); */
        line-height: 1.1;
    }
    
    .twocomp_export {
        padding-top: 11vw;
        width: 35vw;
        height: 40vw;
        order: 1;
        ul li { 
            font-size: 1.25rem;
            /*font-size: 5cqw;  *//*font in terms of container width*/
            line-height: 1.3;
        }
    }
    
    .twocomp_lab {
        margin-left: -3vw;
        padding-top: 11vw;
        width: 35vw;
        height: 40vw;
        order: 3;
        ul li { 
            font-size: 1.25rem;
            /* font-size: 1.1vw; */
            line-height: 1.3;
        }
    }
    
    

    .div_button { 
        margin-bottom: 3vw;
        a.btn{
            width: 120px;  /*was 10vw*/
            height: 120px;
            font-size: 1.3rem; /*1.8vw*/
            span.btn-small-text {font-size: 1.1rem;} /*1.25vw*/
            padding: 13px;
        }
    }
/*----------end contact page - two companies-------------*/
}


/* Small desktops and larger: Large logo */
@media (min-width: 1012px) {

    #header-fixed {
        .logo {
            svg, img {
                height: var(--logo-large);
            }
        }
    } 
    .nav-search-block {
        height: var(--logo-large);
    }

    .micr_technologies{
        p {
            font-size: 1.3rem;
        }
    }
    
    .navbar-expand-md .navbar-nav .nav-link {
        font-size: 22px;
        padding-right: 0.92rem;
        padding-left: 0.92rem;
    }
    
    /* search box covers the navbar*/
    /* double .search-box ensures that this overrides code in _custom.scss */
    .search-box.search-box input[type=search]:focus {
        height: 1.3rem;
        width: 44rem; /* covers navbar items */        
    }
}

/* Large tablets and smaller: 80% view-width */
@media (max-width: 1011.98px) {
    :root {
        --unit: calc(80vw/340);
    }
    #header-fixed {
        .logo { 
            svg, img { 
                height: var(--logo-small); 
            } 
        }
    }
    .nav-search-block {
        height: var(--logo-small);
    }        

    .micr_technologies{
        p {
            font-size: 1rem;
        }
    }

}

@media (min-width: 820px) and (max-width: 1011.98px) {
    :root {
        --about-box-size: calc(180 * var(--unit));
        --about-building-size: calc( 170 * var(--unit));
        --about-family-size: calc( 90 * var(--unit));
        --about-family-font-size: calc( 9 * var(--unit));
    }
 
    .about-flexbox{
        justify-content: center;
    }
    
        /* double .search-box ensures that this overrides code in _custom.scss */
    .search-box.search-box input[type=search]:focus {
        height: 1.3rem;
        width: 31rem; /* covers navbar items */        
    }
    
    .showcase a.btn, .about a.btn {    
        width: calc( 35 * var(--unit)); 
        height: calc( 35 * var(--unit)); 
        font-size: calc( 10 * var(--unit));
    }
        
    .about {
        padding-top: calc(120 * var(--unit));
        padding-bottom: calc(100 * var(--unit));         
        .container {
            width: calc( 420 * var(--unit));
            max-width: calc( 420 * var(--unit));
        }       
    }
    .about-box, .footer-hashtag {
        padding-left: calc(20 * var(--unit));
    }

/* footer-top bottom padding changes increases so that the logo is under the three columns of the menu*/
    .footer-top{
        padding-bottom: calc( 89 * var(--unit) - 1rem);
    }

/*----------contact page - two companies-------------*/
    /* bookmark*/
    
    .container_twocomp {
        padding-top: 120px;
        padding-bottom: 10vw;
        padding-left: 3vw;
        padding-right: 3vw;
        a.btn { margin: auto;}
    }
    
    .twocomp_description{
        width: 30vw;
        height: 30vw;
        padding-left: 0vw;
        padding-right: 1vw;
        padding-top: 7vw;
        order: 2;
        font-size: 2.5vw;/*calc( 15 * var(--unit)); */
        line-height: 1.1;
    }
    
    .twocomp_export {
        padding-top: 7.5vw;
        width: 35vw;
        height: auto;
        order: 1;
        ul li { 
            font-size: 1.2rem;
            /*font-size: 5cqw;  *//*font in terms of container width*/
            line-height:1.3;
        }
    }
    
    .twocomp_lab {
        margin-left: -3vw;
        padding-top: 7.5vw;
        width: 35vw;
        height: auto;
        order: 3;
        ul li { 
            font-size: 1.2rem;
            /* font-size: 1.1vw; */
            line-height:1.3;
        }
    }

    
    .div_button { 
        margin-bottom: 3vw;
        a.btn{
            width: 120px;
            height: 120px;
            font-size: 1.3rem;
            span.btn-small-text {font-size: 1.1rem;}
            padding: 13px;
        }
    }

/*----------end contact page - two companies-------------*/

}
/* Showcase hero — large screens: full image always visible */

@media (min-width: 820px) {
    .showcase {
        background-size: contain;      /* show full image */ 
        margin-top: calc(120px - 10.67vw);   /*add 24 pixels to account for text under logo */
        /* margin-top: calc(87px - 10.67vw); */
    }
    
    .news-box {
        width: var(--news-box-size);
        font-size: calc(9 * var(--unit));

    }

}


/* For screens narrower than 820px: fix hero background size and crop center */
@media (max-width: 819.98px) {
    .showcase {
        background-size: contain; 
        /* ensure that gap between navbar and logo is in proportion */
        margin-top: calc(120px - 10.67vw);
        /* margin-top: calc(87px - 10.67vw); */
        /* background-attachment: scroll;  */
        /* keep original 820px:461.25px aspect ratio */
        /*height: calc(100vw * (461.25 / 820)); */

        /* offset equal to 461.25px - current image height */
        /* margin-top: calc(461.25px - (100vw * (461.25 / 820))); */
        
        /* stop scaling to viewport width */  
        /* background-size: 820px auto;          */
        /* background-attachment: scroll;  */
        /* height: 461.25px; */
    }
    .showcase .hero-tagline {
        top: 45% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw;
        text-align: center;
        white-space: nowrap;
        font-size: 10vw !important;
    }


    
    
    .news-box { 
        width: 100%;
        font-size: calc(12 * var(--unit));
    }
    
    .news a.btn {
        top: -5% !important;
        left: 50% !important;
    }
}

@media (min-width: 768px) and (max-width: 835.98px) {
    .navbar {
        .container {
            max-width: calc(400 * var(--unit));
        }
    }
       
}

/* 768 to 820*/
@media (min-width: 768px) and (max-width: 819.98px) {
    /* double .search-box ensures that this overrides code in _custom.scss */
    .search-box.search-box input[type=search]:focus {
        height: 1.3rem;
        width: 31rem; /* covers navbar items */        
    }
}

@media (min-width: 768px) {
    a.nav-link {
        padding: 0;
    }

    
    .footer-top-column{
        margin:0;
        padding-left: 4.5vw;
        padding-right: 4.5vw;
    }
    
    /* font sizing - tablets and bigger*/
   .footer-top {
        a, p {
        font-size: calc( 8 * var(--unit));/*1.2rem; */
        }
    } 
    

}

/* hamburger appears - tablets and smaller*/
@media (max-width: 767.98px) {
    .navbar-nav {
        padding-right: 5px; 
    }
    

    
    /* Keep logo, hamburger, and search aligned in one row */
    .navbar > .container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Put hamburger and search together on the right side */
    .nav-search-block {
        display: flex;
        align-items: center;
        position: static;
    }

    /* Make the navbar container the positioning reference */
    nav.navbar .container {
        position: relative;
    }
    

    /* When expanded, the nav menu should appear below the top row */
    .navbar-collapse {
        position: absolute;
        top: 100%; /* directly below the navbar */
        /* to exactly cover one column */
        right: calc(-10 * var(--unit));
        width: calc(120 * var(--unit));
        background-color: rgba(233, 233, 233, 0); /* same gray as product list */
        z-index: 999;
        padding: 0.75rem 1rem;        
        /* opacity: 0; */
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* 1. Add solid background behind expanded menu */
    .navbar-collapse.show {
        /* opacity: 0.9; */
	    background-color: rgba(233, 233, 233, 0.8);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);  /* for Safari */	
        transform: translateY(0);
        pointer-events: auto;
        /* isolation: isolate; */
    }

    /* .navbar-collapse.show::before { */
    /* 	content: ""; */
    /* 	position: absolute; */
    /* 	top: 0; left: 0; right: 0; bottom: 0; */
    /* 	width: 100%; */
    /* 	height: 100%; */
    /* 	z-index: -1; */
    /*     backdrop-filter: blur(5px); */
    /*     -webkit-backdrop-filter: blur(5px);  /\* for Safari *\/ */
	
    /* } */

    /* 2. Right-align the nav links within the expanded menu */
    .navbar-collapse.show .navbar-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* right-align items */
    }

    .navbar-collapse.show .navbar-nav .nav-item {
        text-align: right;
        width: auto;
    }

    /* .navbar-toggler { */
        /* --toggler-height: calc(1.5em + 0.75rem + 2px);  default Bootstrap height formula */ 
    /* } */
    
    .search-box {
        position: relative;
    }
    
    .search-box input[type=search]:focus {
        /* height: var(--toggler-height);  cover hamburger button */
        height: calc(1.5em + 0.75rem + 6px); /* cover hamburger button */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;         
    }

}

/* Apparently where callout breaks into one column */
/* @media (max-width: 634.98px) { */
    /* .callout-card { order: 1; } */
    /* .callout-picture { order: 2; } */
    /* .callout-pitch { order: 3; } */
    /* .callout-apps { order: 4; } */
/* } */

/* Tablets and larger: 3 columns */
@media (min-width: 576px)  {
    .container {
        max-width: calc(360 * var(--unit));
    }
    .product-list-container {
        width: calc(360 * var(--unit));
    }
    .callout-container {
        width: calc(340 * var(--unit)); /* (2 * callout card) + (4 * callout gap) */
    }

    /* Default (≥576px): side-by-side layout */
    .callout-image-group {
        display: flex;
        align-items: center;
        justify-content: space-between;  /* picture right, pitch left */
        position: relative;
    }

    .callout-picture {
        position: relative;
    }

    .callout-pitch {
        position: relative;
        transform: none;
        background: none;
    }
    
    .showcase {
        background-position: center;
    }

    .news {
        padding-bottom: calc(50 * var(--unit));
    }
        
    .about-family {
        top: -40%;
        left: 40%;
    }
    

    .about-box {
        height: var(--about-building-size);    
    }
    
    
}

@media (min-width: 576px) and (max-width: 1499.98px) {
    .about-box {       
        font-size: calc(9 * var(--unit));  
    }
}

@media (min-width: 576px) and (max-width: 1011.98px) {
    .about a.btn {
        right: -10% !important;
    }
}

@media (min-width: 576px) and (max-width: 819.98px) {
    :root {
        --about-box-size: calc(180 * var(--unit));
        --about-building-size: calc( 170 * var(--unit));
        --about-family-size: calc( 90 * var(--unit));
        --about-family-font-size: calc( 9 * var(--unit));
    }
    
    .about-flexbox{
        justify-content: center;
    }
    
    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    /* showcase button location*/
    .showcase a.btn {
        width: 12vw !important;
        height: 12vw !important;
        bottom: 15% !important;
        right: 10% !important;
        font-size: calc(14 * var(--unit)) !important;
    }

    .about a.btn {
        width: 12vw !important;
        height: 12vw !important;
        font-size: calc(10 * var(--unit));
    }
    
    .about {
        padding-top: calc(80 * var(--unit));
        padding-bottom: calc(100 * var(--unit));         
        .container {
            width: calc( 420 * var(--unit));
            max-width: calc( 420 * var(--unit));
        }
        a.btn {
            bottom: 6% !important;
        }
    }
    .about-family {
        top: -40%;
        left: 40%;
    }
    .about-box, .footer-hashtag {
        padding-left: calc(15 * var(--unit));
    }

/* footer-top bottom padding changes increases so that the logo is under the three columns of the menu*/
    .footer-top{
        padding-bottom: calc( 89 * var(--unit) - 1rem);
    }

/*----------contact page - two companies-------------*/
    /* bookmark*/

    .container_twocomp {
        padding-top: 120px;
        padding-bottom: 10vw;
        padding-left: 3vw;
        padding-right: 3vw;
        a.btn { margin: auto;}
    }    
    
    .twocomp_description{        
        width: 30vw;
        height: 30vw;
        padding-left: 0vw;
        padding-right: 2vw;
        padding-top: 7vw;
        order: 2;
        font-size: 2.5vw;/*calc( 15 * var(--unit)); */
        line-height: 1.1;
    }
    
    .twocomp_export {
        padding-top: 7vw;
        width: 32.5vw;
        height: auto;
        order: 1;
        ul li { 
            font-size: 1.05rem;
            /*font-size: 5cqw;  *//*font in terms of container width*/
            line-height:1.3;
        }
    }
    
    .twocomp_lab {
        margin-left: -3vw;
        padding-top: 7vw;
        width: 32.5vw;
        height: auto;
        order: 3;
        ul li { 
            font-size: 1.05rem;
            /* font-size: 1.1vw; */
            line-height:1.3;
        }
    }

    
    .div_button { 
        margin-bottom: 3vw;
        a.btn{
            width: 120px;
            height: 120px;
            font-size: 1.3rem;
            span.btn-small-text {font-size: 1.1rem;}
            padding: 13px;
        }
    }
/*----------end contact page - two companies-------------*/

}

@media (min-width: 576px) and (max-width: 767.98px) {
    .search-box input[type=search]:focus {
        width: calc(340 * var(--unit));
    }  

   .footer-top {  /*font sizing for smaller tablets */
        a, p {
        font-size: calc( 11 * var(--unit));/*1.2rem; */
        }
    }
    
    .footer-top-column{
        margin:0;
        padding-left: 2vw;
        padding-right: 0;
    }

}

/* Mobile: 80% view width, 2 columns */
/* @media (max-width: 575.98px) { */
@media (max-width: 575.98px) {
    :root {
        --unit: calc(80vw/220);
        --about-box-size: calc(180 * var(--unit));
        --about-building-size: calc( 170 * var(--unit));
        --about-family-size: calc( 90 * var(--unit));
        --about-family-font-size: calc( 9 * var(--unit));
    }

    .callout .container {
        --unit: calc(80vw/170);        
    }
    
    /* ensure all descendants use that container’s unit */
    /* .callout .callout-card,
       .callout .callout-picture,
       .callout .callout-apps,
       .callout .callout-pitch {
       width: 80vw;
       height: 80vw;
       } */
    
    .container {
        max-width: calc(240 * var(--unit));
    }
    .product-list-container {
        width: calc(240 * var(--unit));
    }
    .callout-container {
        width: calc(170 * var(--unit));
    }
    
    .callout-card {
        order: 1;
        width: 100%;
        height: auto;
    }

    .callout-image-group {
        order: 2;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end; 
        position: relative;
        margin-top: calc(10 * var(--unit));
        margin-bottom: calc(20 * var(--unit)); /* keeps apps below */
    }
    
    .callout-picture {
        position: relative;
        width: 66%;
        height: auto:
    }
    
    .callout-pitch {
        position: absolute;
        left: 0%;
        top: 45%;
        transform: translate(-25%, -50%);
        background: none;
        z-index: 1032;
    }
    .callout .callout-picture figcaption {
        a {
            font-size: calc(6 * var(--unit));
        }
    }

    .callout-circle {
        width: calc(60 * var(--unit));
        height: calc(60 * var(--unit));
        font-size: calc(7 * var(--unit));
        padding-right: calc(15 * var(--unit));
        margin: 0 auto;
    }
    
    .callout-apps {
        order: 4;
        width: 100%;
        font-size: calc(11 * var(--unit));
    }

    .callout {
        padding-bottom: calc(10 * var(--unit));
    }
    
    .search-box input[type=search]:focus { 
        width: calc(220 * var(--unit));
    }
    /* .showcase { */
    /* background-position: calc(50% + ((576px - 100vw) * 0.5)) center;  pan to left side */ 
    /* }  */
    /* showcase button location*/    
    .showcase a.btn {
        bottom: 10% !important;
        right: 12% !important;
        width: calc(40 * var(--unit)) !important;
        height: calc(40 * var(--unit)) !important;
        font-size: calc(11 * var(--unit)) !important;
    }

    .news {
        padding-bottom: calc(10 * var(--unit));
    }

    .about a.btn {
        width: 18vw !important;
        height: 18vw !important;
        top: 72% !important;
        right: -35% !important;
        /* bottom: 12% !important; */
        font-size: calc(10 * var(--unit));
    }
    .about {
        padding-top: calc(40 * var(--unit));
        padding-bottom: calc(60 * var(--unit));         
        .container {
            width: calc( 260 * var(--unit));
            max-width: calc( 260 * var(--unit));
        }
    }
    .about-family {
        top: -10%;
        left: 0%;
    }
    .about-building {
        margin-left: calc(30 * var(--unit))
    }
    .about-box, .footer-hashtag {
        padding-left: calc(20 * var(--unit));
    }
    .about-box {
        font-size: calc(10.5 * var(--unit));
        height: auto;
        margin-top: calc(10 * var(--unit));
    }
    .footer-hashtag {
        left: 70% !important;
        font-size: 4.5vw !important;
    }

   .footer-top {  /*font sizing for phones */
        a, p {
        font-size: calc( 14 * var(--unit));/*1.2rem; */
        }
        p{
            margin-bottom: calc( 10 * var(--unit));
        }
    }
    
    .footer-top-column {
        width: 85%;
        margin:0;
        margin-bottom:5vw;
        padding-left: 0;
        padding-right: 0;
    }

/* footer-top bottom padding changes increases so that the logo is under the three columns of the menu*/
    .footer-top{
        padding-bottom: calc( 77 * var(--unit) - 1rem); /* calc( 89 * var(--unit) - 1rem); */
    }

    .footer-right-menu {
        max-width: 150px;
    }
/*----------------contact page - two companies-------------*/
 /* bookmark*/

    .container_twocomp {
        padding-top: 120px;
        padding-bottom: 10vw;
        padding-left: 3vw;
        padding-right: 3vw;
        a.btn { margin: auto;}
    }
    
    .twocomp_description{
        width: 100%;
        height: 40vw;
        padding-top: 7vw;
        padding-left: 10.5vw;
        padding-right: 11.5vw;
        font-size: 5vw;
        line-height: 1.1;
        order: 1;
    }
    
    .twocomp_export {
        margin-top: 3vw;
        margin-bottom: 3vw;
        width: 100%;
        height: auto;
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        a.btn {
           margin-right: 10px; 
        }
        ul{ margin: 0;}
        ul li { 
            font-size: 4vw;
            line-height:1.3;
        }
    }
    
    .twocomp_lab {
        margin-top: 3vw;
        margin-bottom: 3vw;

        width: 100%;
        height: auto;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        a.btn {
            margin-right: 10px; 
        }
        ul{ margin: 0;}
        ul li { 
            font-size: 4vw;
            line-height:1.3;
        }
    }   
    
    .div_list{
        margin-left: 3vw;
        margin-right: 3vw;
    }
    
    .div_button { 
        margin-bottom: 3vw;
        a.btn{
            padding: 3vw;
            width: 26vw;
            height: 26vw;
            font-size: 4.5vw;
            span.btn-small-text {font-size: 3.5vw;}
        }
    }
/*----------------end contact page - two companies-------------*/
    



}  /* end of mobile media - up to 576 */

/*----------------------END OF MEDIAS----------------------------------------------------*/

    /* overwrites _default.scss header properties */
.header {
    padding: 0;
}


.header, .news, .showcase, .callout {
    .container {
        padding: 0;
    }
}


.navbar-nav {
    padding-right: 2rem ;
}
.navbar {
    padding-top: var(--navbar-padding) ;
}

.navbar, .footer {
    .container {
    padding-left: calc(10 * var(--unit));
    padding-right: calc(10 * var(--unit));
    }
}

.breadcrumbs-container.container {
    position: relative;
    z-index: 1035;
    padding-left: calc(10 * var(--unit));
    padding-right: calc(10 * var(--unit));
}



#header-fixed {
    border:none;
    /* border-bottom: 1px solid; */
    /* border-bottom-color: rgba(#bcc3ce, 0.2); */

    .logo {
        svg, img {
            display: inherit;
        }
    }

    .navbar-toggler { /* .navbar-button*/
        padding: .25rem .75rem;
        font-size: 1.25rem;
        z-index: 1036;
    }
    
    ul.navbar-nav {
        a:hover, a:focus { color: var(--ST_red) /* #0056b3 */; }
    }

    .navbar-nav {
        font-family: "Author-ExtralightItalic";
	font-style: italic;	
        text-transform:uppercase;
        font-weight: bold;
        a { color:var(--ST_blue);}
        > .active > a { color: var(--ST_red); }
    }
}


#breadcrumbs {
    font-family: "Author-Italic";
    font-style: italic;
    color: var(--ST_red);
    a {
        font-weight:normal; 
        color: var(--ST_blue);
    }
    a:hover, a:focus { color: var(--ST_red);}
}

body.product-list, .footer {
    background-color: #e9e9e9;
}

.footer {
    border: none;
    position: static;
    background-color: white;
}

a {
    color: var(--ST_blue);
}

div.footer{
    a {font-weight: normal;}
    a:hover { color: var(--ST_red) ; text-decoration: none;}     
}


.logo-footer {
    position: fixed;
    bottom: 20px;
    left: calc(20*var(--unit));
    width: var(--logo-width);
}

.nav-search-block {
    position: relative ;
}

.nav-search-block .navbar-toggler {
    margin-right: 2rem;
}

.search-box {
    position: absolute; 
    top: 50%; 
    right: 0; 
    transform: translateY(-50%);
    z-index: 1035;
}

.search-box input[type=search] {
    width: 1.3rem;
    position: relative;
    z-index: 1037;
}

.search-box input[type=search]:focus {
    background-color: #e9e9e9;
}

.showcase {
    background-repeat: no-repeat; 
    width: 100vw;
    max-width: 100%;
    .container {
        width: 100%;
        height:100%;
        position: relative; 
        max-width: 100%;
    }
}    

.showcase a.btn, .about a.btn {
    position: absolute;   
    padding: 0;
    background-color: var(--ST_blue);
    color: #ffffff;
    font-family: Author-LightItalic;
    font-style: italic;
    font-weight: normal;
    line-height: 1.1;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    box-shadow: var(--news-shadow-size) var(--news-shadow-size) var(--news-shadow-blur) rgba(0, 0, 0, 0.25);  /* shadow bottom-right */
}



/* Reset main content to start on top */
.main-content {
    margin-top: 0 !important;
    padding-top: 0;
}

.about {
    background-color: #e9e9e9;
    background-repeat: no-repeat;
    background-position: bottom center; 
    background-size: contain;
    position: relative;
    a {
        font-weight: bold;
    }
}

/* .about .container { */
    /* position: relative; */
/* } */


.about-container {      
    position: relative;
}

.about-family {
    z-index: 1032;
    width: var(--about-family-size);               
    height: var(--about-family-size) /*calc( 120 * var(--unit))*/;              
    border-radius: 50%;
    position: absolute;

    padding: calc( 20 * var(--unit));
    background-color: #ffffff;
    color: var(--ST_blue);
    font-family: Author-Light;
    font-size: var(--about-family-font-size); /*calc( 10.5 * var(--unit));*/
    line-height: 1.1;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    /* box-shadow: var(--about-family-shadow-size) var(--about-family-shadow-size) var(--about-family-shadow-blur) rgba(0, 0, 0, 0.25);   */
    p { margin: 0;}
}
.about-building {
    z-index: 1031;
    width: var(--about-building-size);
    height: var(--about-building-size);    
    background: transparent;
    border: none;
    border-radius: 50%; 
    overflow: hidden;  
    /*box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
    /* box-shadow: 11px 11px 10px rgba(0, 0, 0, 0.2);*/  /* shadow bottom-right */ 
    /* NEW: make absolutely positioned children (image) anchor off this element */
    position: relative;

}

img.img-building {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    /* margin: 0; */
    display: block;     
}

.about-box {
    width: var(--about-box-size);
    background: #e9e9e9;
    border: none;
    display: flex;
    flex-direction: column;      /* Stack paragraph and list vertically */
    justify-content: flex-end;    
    /* NEW: make absolutely positioned children (image) anchor off this element */
    font-family: "Author-Extralight";    
    color: var(--ST_blue);
    text-align: left;
    position: relative; /* allow hashtag position relative to about box */
    p {
        margin-top: 1rem;
        margin-bottom: 0;
    }

}

.footer-hashtag {                   /* this is the footer of the ABOUT MODULAR, not the actual footer */
    font-family: 'Author-Italic';
    font-style: italic;
    color: var(--ST_blue);
    text-shadow: none;
    position: absolute;
    font-size: 3.5vw;
    white-space: nowrap;         /* prevent line breaks */
    width: auto !important;      /* don’t inherit restrictive widths */
    max-width: none !important;  /* ensure it can overflow */
    overflow: visible;           /* allow full text to show */
    z-index: 1032;
}



.footer-container {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 3vw;
    margin-right: 3vw;
    /* border: 1px solid black; */
    font-family: Author-Regular;
    
    color: var(--ST_blue);
    p, li {
        line-height: 1.0;
    }
}

/* PUT THIS AS MEDIA-RESPONSIVE*/
/* .footer-top-column{ */
    /* margin:0; */
    /* padding-left: 4.5vw; */
    /* padding-right: 4.5vw; */
/* } */


.ul-footer{
    list-style-type: none;
    text-align: left;
    padding: 0px;
}

.text-footer{
}

.footer-top {
    padding-top: calc( 23 * var(--unit)); /* 50px; */
    /* padding-bottom: calc(50px - 1rem); /*to account for the space under text*/
    position: relative; /* for logo positioning within it*/
}



.footer-bottom {
    border-top: 2px solid var(--ST_blue);
    font-size: calc( 6.5 * var(--unit));
    p{
        margin: 0;
    }
}

/* LinkedIn and YouTube icons*/
.footer-icon{
    width: auto;
    height: 30px;
}

.footer-tagline{
   font-family: Author-Regular;
   /* font-size: calc( 14 * var(--unit));  */
   padding-left: calc( 10 * var(--unit));
}

.footer-wirelogo{
    position: absolute;
    width: calc( 43 * var(--unit));
    height: auto;
    margin-bottom: 0;
    bottom: calc( 23 * var(--unit));
    left: calc( 57 * var(--unit));
}

.sewa-img {
    img {
        width: 25.6px;
        height: 25.6px;
        min-width: 25.6px;
        min-height: 25.6px;
    }
}

.main-container{
    padding-bottom: 0px;
}
/*-----------------------------------------------------------------------------------------------------*/
/*---------------------------contact - two companies---------------------------------------------------*/

.container_twocomp{
    margin: 0;
    /* padding-top: 120px; */
    /* padding-bottom: 10vw; */
    /* padding-left: 6vw; */
    /* padding-right: 6vw; */
    background-color: #e9e9e9;
    border: none;
        a.btn{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* margin: auto; */
        border-radius: 50%;         /* makes it a circle */
        color: white;
        font-family: Author-Regular;
        line-height: 1.2;
        text-align: center;
        /* display: flex; */
        box-shadow: var(--news-shadow-size) var(--news-shadow-size) var(--news-shadow-blur) rgba(0, 0, 0, 0.25);  /* shadow bottom-right */       
        
    }
}

.twocomp_description{
    font-family: Author-Variable;
    font-weight: 320;
    text-align: center;
    color: var(--ST_blue);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


.twocomp_export{
    container-type: inline-size;   /* enables container units */
        a.btn{
            background-color: var(--ST_blue);
        }
        ul { 
            color: var(--ST_blue); 
            padding-inline-start: 0px;
            }
        ul li::marker {
            font-size: 0.7em;
        }
}

.twocomp_lab{
        /* border: 1px solid black; */
        /* width: 22vw; */
        /* height: 40vw; */
        /* order: 3;         */
        a.btn{
            background-color: var(--ST_red);
        }
        ul { 
            color: var(--ST_red);
            padding-inline-start: 0px;
            }
        ul li::marker {
            font-size: 0.7em;
        }
}

.div_list { padding-left: 2vw;
            padding-right: 2vw;}

.micr_technologies{
    p {
        font-family: 'Author-Regular';
        margin:0;
        /* font-size: 16pt; */
        color: var(--ST_blue);
    }
}

/* In Grav, we want the conference dates to wrap to the next line as a whole*/
.event-date {
  white-space: nowrap;
}

.figure-img {
    padding: 30px 30px 10px 30px;
}

.upcoming-events{
    font-family: 'Author-Light';
    font-style: normal;
    font-weight: bold;
}

/* contact page - list font*/
.div_list{
    font-family: 'Author-Regular';
}

/* search icon color to ST Blue*/
.search-icon{
    color: var(--ST_blue) !important;
}