:root {
    --gap_size: 0.5em;
    --color-primary-white: rgb(240, 240, 240);
}
*,
::before,
::after {
    box-sizing: border-box;
}

body{
    margin: unset;
    /*background-color:rgb(94, 195, 195); */
    background-color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 560px;
    
    background-image:linear-gradient( 210deg , hsl(180,3%,93%) , whitesmoke ) ;
}

.mcont {
    display: flex;
    flex-direction: column;
}


.stack > * + * {
    margin-block-start: 1.5em;
}


.container {
    max-inline-size: 1080px;
    max-inline-size: 90vw;
    margin-inline:auto;
}


.main_nav {
    max-inline-size: 1080px;
    margin: auto;
}


.menu_list {
    display: flex;
    gap: var(--gap_size);
    padding: 0.5rem;
    list-style-type: none;
    /*background-color: rgb(169, 169, 64); */
    background-color: whitesmoke;
}

.li_imgbox > img{
    max-width: 100px;
    max-height: 60px;
    background-color: whitesmoke;
    margin-left: 1em;
    
}
.li.mitemtop.image {
    max-width: 100%;
}


.menu_list > li > a {
    /*background-color: bisque; */
    color: black;
    text-decoration: none;
    display: block;
    font-size: 1.25em;
    font-weight: 700;
    
    padding: 0.5em 1em;
    white-space: nowrap;
}

.megamenu_button {
    background-color: transparent; 
    color: black;
    text-decoration: none;
    display: block;
    padding: 0.5em 1em ;
    font-size: 1.25em;
    font-weight: 700;
    /*padding-bottom: 1em;*/
    border: none;
    
    line-height: 1.1em;
}


.megamenu {
    overflow: hidden;
}

.menu_list a:hover , .megamenu:hover .megamenu_button {
    /*background-color: chartreuse; */
    background-color: hsl(196,100%,80%);
}

.megacontent {
    display: none;
    position: absolute;
    /*background-color: darkturquoise; */
    background-color: whitesmoke;
    width: 95%;
    /*left: 5em; */
    left: 4%;
    top: 8em; 
/*    margin-top: 0.5em; */
    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}   

.megacontent .menuheader {
    background: hsl(196,100%,50%);
    padding: 1em;
    color: whitesmoke;
}

/*
.megamenu:hover .megacontent {
    display: block;
} */

.megamenu.is-open .megacontent {
    display: block;
}

.megamenu.is-open  .megamenu_button {
    background-color: hsl(196,100%,80%);
}
/*
.megacontent:hover {
    display: block;
}*/

.fa-caret-up {
    font-size:46px;
    color: hsl(196,50%,10%)

}

.sidebar_button {
    display: none;
}

.sidebar_button.active{
    background-color: hsl(196,100%,80%);
}

 .cintro >h3  {
    color: black;
    font-size: 1.75em;
    border-bottom: 2px solid black;
}

.cintro > p {
    font-size: 1.1em;
    font-weight: 450;
}
.columns.cintro {
    width: 25%; 
    padding-right: 0.5em; 
    padding-bottom: 3.5em;
}
.columns {
    float: left;
    width: 25%;
    padding: 2em;
    background-color: whitesmoke;
    height: fit-content;
    min-height: 23em;
    display: block;
}

.columns a {
float: none;
  color: black;
  padding:  1.5em 0.5em;
  text-decoration: none;
  display: block;
  text-align: left;
  white-space: nowrap;
  font-size: 1.1em;
}

.columns a:hover{
    background-color:hsl(196,100%,80%)
}

.row:after {
    content: "";
    display: table;
    clear: both;
  }

  .menu-toggle {
    display: none;
  }

  .menudown{
    display: none;
  }

  .minip {
    font-size: 12px;
    position: relative;
    top: 0em;
    margin: 0;
    padding: 0;
  }

  .columns.three > h3 {
    margin-bottom: 0.2em;
  }

  /*
  .menudown > a {
    display: block;
    padding: 0.8em 1em;
    font-size: 1.5em;
    font-weight: 700;
    color: black;
  }
*/

/*.hero { 
    padding: 2em 1em;
    text-align: center;
    
    /*background-color: hsl(190,5%,77%); */
    /*background-image:linear-gradient( 210deg , hsl(190,5%,77%) , whitesmoke );*/
    /*mask-image: linear-gradient( 210deg ,transparent, hsl(190,5%,77%) ) ; */


/*    background: url(./images/image_fx4_.png) ;  no-repeat;
    
    background-size: 100%;
    
    color:hsl(196,100%,50%);
    text-shadow: 0.1em 0.1em 0.3em #000;
    min-height: 500px;
} */

.popup {
    transition: 2s opacity, 2s visibility;
    opacity: 1;
    position: absolute;
    left: 40%;
    top: 10%;
    z-index: 2;
    min-width: max-content;
    min-height: 10em;
    background: white;
    border-radius: 5px;
    border: solid 2px black;
}

.popup.faded {
    opacity: 0;
    visibility: hidden;
}

.alertf > h3  {
    text-align: center;
    font-size: larger;
    text-transform: uppercase;
    color: black;


}

.alertf p  {
    text-align: center;
    font-weight: bold;
}

.hero { 
    position: relative;
    padding: 0em 1em;
    text-align: center;
    
    
    background-size: 100%;
    
    color:hsl(196,100%,50%);
    text-shadow: 0.1em 0.1em 0.3em #000;
    
} 

.heroblock {
    background-image:linear-gradient( 210deg , hsl(190,5%,77%) , whitesmoke ) ;
    object-fit: cover;
    max-width: 100%;
}

.heroblock > img{
    background-size: 100%;
    /*object-fit: cover; */
    max-width: inherit;
    float:inline-start
}

.hero > h3 {
    
    position: absolute;
    top: 1em;
    font-size: 3em;
    margin: 0em 0.5em;
}

main {
    background-image:linear-gradient( 180deg ,hsl(180,3%,93%),hsl(196,100%,95%)   ) ;
    inline-size: 90vw;
    margin: auto;
}

.topintro {
    display: block;
    width: 90%;
    height: 500px;
    /*background-color: hsl(196,100%,95%); */
    background-image:linear-gradient( 180deg ,hsl(180,3%,93%),hsl(196,100%,95%)   ) ;
    margin: auto;
    
    /*
    color:hsl(196,100%,50%);
    text-shadow: 0.1em 0.1em 0.3em #000;
    */
}

.tfloat  h1  {
    
    padding-top: 1em;
    text-align: right;
    font-size: 2.5em;
    color:hsl(196,100%,50%);
    /*text-shadow: 0.1em 0.1em 0.3em #000; */
}

.topintro  p {
    margin: 1em;
    text-align: right;
    color: black;
    font-size: 1.5em;
    font-weight: 650;
    
/*    white-space: break-spaces ; */
}

/*
.intro_image::after {
    display: block;
    content: "";
    clear: left;
} */

.intro_image {
    float: right;
    margin-left: 5px;
    --gradient: linear-gradient (
        65deg,
        black 0 375px,
        transparent 375px);

    --grad2: linear-gradient( 122deg,
            transparent 29%,
            black 29%);

    mask: var(--grad2);
    shape-outside: var(--grad2);
    shape-margin: 15px;
}

.intro_image > img {
    display: block;
    height: 450px;
    width: 650px;
    object-fit: cover;
    object-position: 65%;
    
 
}


#btncontact { 
    
        background: none;
        border: 2px solid;
        font: inherit;
        line-height: 1;
        margin: 0.5em;
        padding: 1em 2em;
        margin-left: auto;
        margin-right: 3em;
        color: var(--color);
        transition: 0.5s;
        float: right;
        font-size: 1.25em;
      
}

#btncontact:hover,#btncontact:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
  border-color: var(--hover);
  color: black;
}


#btncontact {
    --color: hsl(196,100%,50%);
    --hover: hsl(196,100%,80%);
  }

/*
.tfloat {
    float: left;
}
*/

.news {
    display: block;
    width: 90%;
    min-height: 500px; 
    background-image:linear-gradient( 180deg ,hsl(196,100%,95%),hsl(196,100%,89%)   ) ;
    margin: auto;
}

.news h1 , .cases h1 {
    text-align: center;
    color:hsl(196,100%,50%);
    text-shadow: 0.1em 0.1em 0.3em hsl(196,10%,50%); 
    padding: 0.5em;
    margin-top: 0;
    font-size: 4em;
    font-weight: 700;
}
.sectioninner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--gap_size);
}

.cases {
    display: block;
    width: 90%;
    min-height: 500px;
    background-image:linear-gradient( 180deg ,hsl(196,100%,89%),hsl(196,100%,80%)   ) ;
    margin: auto;
}

.test2 { 
    display: block;
    width: 100%;
    height: 500px;
    background-color:bisque;
    margin: auto;
    position: relative;
}   


/*@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800); */
figure.card {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: auto;
  max-width: 80%;
  /*max-width: 310px;*/ /************* /
  /*max-height: 220px;*/ /*************/
  min-height: 20em;     /* ********* VB check *******/ 
  width: 100%;
  background: #000000;
  text-align: left;
}
figure.card * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.card img {
  max-width: 100%;
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  max-inline-size: 100%;
  min-height: inherit;
  object-fit: cover;
}

figure.card figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px 3em;
  width: 100%;
  height: 100%;
}
figure.card figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 100%;
  border-left: 4px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.card h2,
figure.card p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
figure.card h2 {
  /*word-spacing: -0.15em; */
  word-spacing: 0;
  font-weight: 300;
  text-transform: uppercase;
  /*-webkit-transform: translate3d(30%, 0%, 0);
  transform: translate3d(30%, 0%, 0); */
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;

  /*extra ********/
  opacity: 1;
}
figure.card h2 span {
  font-weight: 800;
}
figure.card p {
  font-weight: 200;
  -webkit-transform: translate3d(0%, 30%, 0);
  transform: translate3d(0%, 30%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  font-size: 1.2em;
}
figure.card a {
  /*left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute; */
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  
} 
figure.card:hover img {
  opacity: 0.3;
}
figure.card:hover figcaption h2 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
figure.card:hover figcaption p {
  opacity: 0.9;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.card:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  left: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}


/* Demo purposes only */
/* ****** LCard ************************/



.lcard {
    width: 85%; /* 24rem;*/
    height: 36rem;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    color: #f0f0f0;
    box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);

    background: #000;
    margin-bottom: 1em;
  }
  .lcard img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-inline-size: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    transition: opacity 0.2s ease-out;
    transition: 1.4s;
  }
  .lcard h2 {
    position: absolute;
    /*inset: auto auto 30px 30px; */
    inset: auto auto 480px 30px;
    margin: 0;
    /*transition: inset 0.3s 0.3s ease-out;*/
    font-family: "Roboto Condensed", sans-serif;
    font-weight: normal;
    text-transform: uppercase;
  }
  .lcard p, .lcard a {
    position: absolute;
    opacity: 0;
    max-width: 80%;
    transition: opacity 0.3s ease-out;
  }
  .lcard p {
    inset: auto auto -130px 30px;
    transition: inset 0.3s 1.3s ease-out;
    /*inset: auto auto 250px 30px; */
    font-size: 1.25em;
  }
  .lcard a {
    inset: auto auto 40px 30px;
    color: inherit;
    text-decoration: none;
  }

  .lcard:hover p {
    inset: auto auto 250px 30px;
    transition: inset 0.6s  ease-out; 
  }


  /*.lcard:hover h2 {
    inset: auto auto 480px 30px;
    transition: inset 0.6s ease-out; 
  }*/
  .lcard:hover p, .lcard:hover a {
    opacity: 1;
    transition: opacity 0.5s 0.1s ease-in; 
  }
  .lcard:hover img {
    transition: opacity 0.3s ease-in;
    opacity: 0.3;
    transition: 1.5s scale;
    scale: 1.5;
  }
  
  .material-symbols-outlined {
    vertical-align: middle;
  }  


.fmain {
    width: 100%;
    min-height: 15em;
    
    background-image:linear-gradient( 180deg ,hsl(196,100%,80%), hsl(196,100%,50%));   
    border-radius: 2%;
    margin: auto;
    display: block;

}

.fmain h2 {
    color: #000;
    font-size: 2em;
    font-weight: 700;
    
    margin-top: 0.5em;
    margin-left: 3em;
    padding-top: 1.5em;
}

#btncontact.btnc {
 float: left;
 color: #000;
 margin-left: 6em;
}

/* ********  Copy pasted media query 1180*/




@media (max-width: 1180px) {
    /* section for topintro */        
        
    
    
    .topintro {
        all: unset;
        display: block;
        /*margin: 2em 2em; */
        background-image:linear-gradient( 180deg ,hsl(180,3%,93%),hsl(196,100%,95%)   ) ;
        width: 90%;
        margin-left: 3em;
    }
    
    .tfloat{
        display: flex;
        flex-direction: column;
        /*margin: 1em; */
        max-width: 90%;
    }
    
    .tfloat  h1  {
        
        padding-top: 1em;
        text-align: center;
        font-size: 2.5em;
        color:hsl(196,100%,50%);
        /*text-shadow: 0.1em 0.1em 0.3em #000; */
    }
    
    .topintro  p {
        margin: 1em;
        text-align: center;
        color: black;
        font-size: 1.5em;
        font-weight: 650;
        
    /*    white-space: break-spaces ; */
    }
    
    /*
    .intro_image::after {
        display: block;
        content: "";
        clear: left;
    } */
    
    .intro_image {
        all: unset;
        display: block;
        /*margin-left: 5px; */ 
        margin: auto;
        /*mask:unset; */
        
        
        height: 450px;
        width: 650px;
    }
    
    .intro_image > img {
        display: block;
        /*height: 450px;
        width: 650px;  */
        object-fit: cover;
        object-position: 65%;
        
     
    }
    
    
    #btncontact { 
        
            display: block;
            margin: auto;
            background: none;
            border: 2px solid;
            font: inherit;
            line-height: 1;
            margin: auto;
            padding: 1em 2em;
            /*margin-left: auto;
            margin-right: 3em; */
            color: var(--color);
            transition: 0.5s;
            float: center;
            font-size: 1.25em;
          
    }
    
    
      }
    

      
/********* End of copied media query 1180*******/      







  @media (max-width: 1000px) {

    .container {
        max-width: 100vw;
        margin-top: 0.1em;
    }

    main {
        inline-size: 100vw;

    }

    .topintro {
        
        margin: unset;
        width: 100%;
        height: unset;
    }

    .intro_image {
        width: unset;
        height: unset;
    }

    .intro_image > img {
        width: unset;
        height: unset;
        max-inline-size: 95%;
        margin: auto;
    }

    .tfloat {
        margin: auto;
    }

    .news {
        width: 100%;
    }

    .cases {
        width: 100%;
    }

    figure.card {
        max-width: unset;
    }

    figure.card p {
        font-size: 2.25em;
    }

    .lcard {
        width: 100%;
    }

    .lcard p {
        font-size: 2em;
    }
    .lcard:hover p {
        inset: auto auto 200px 30px;
    }

    .lcard a {
        font-size: 2rem;
    }


    .main_nav {
        position: relative;
    }

    #btncontact {
        font-size: 2em;
    }

    .menu-toggle {
        position: absolute;
        top: 0.5em;
        right: 0.1em;
        border: 0;
        background-color: transparent;
        display: block;

        font-size: 3em;
        width: 1.5em;
        height: 1.5em;
        line-height: 0.4;
        text-indent: 5em;
        white-space: nowrap;
        overflow: hidden;
        z-index: 1;
    }

    .menu-toggle::after {
        position: absolute;
        top: 0.2em;
        left: 0em;
        display: block;
        content:"\2261";
        text-indent: 0;
        font-size: 2em;
    }

    .dropdowncontainer {
        display: none;
        
        position: absolute;
        right: 0;
        /*left: 0%; */
        margin: 0;
        background-color: whitesmoke;
        z-index: 1;
        /*top: 4em; */
        top:6em;

        
        max-inline-size: -webkit-fill-available; 
        max-inline-size: fit-content;
        padding-right: 10em; 

        /***** Here goes  ****/
        opacity: 0;
        transform: scaleX(0)  scaleY(0);

        transition-duration: 0.7s ;
        transition-property: opacity, transform, display; 
        
        transition-behavior: allow-discrete;  



    }

    

    .main_nav.is-open .dropdowncontainer {
        display: block;

        opacity: 1;
        transform: scaleX(1)  scaleY(1) ;

        @starting-style {
          
            opacity: 0;
            transform: scaleX(0)  scaleY(0);
      
    } 
        
    }


    .menu_list {
        all: unset;
        /*display: unset;  ?*/ 

        margin: 0;
        padding-left: 0;
        border: 1px solid #ccc;
        list-style: none;
        background-color: darkturquoise;
        color: black;
    }


    .li_imgbox {
        margin-left: 1em;
    }

    .columns  {
        all: unset;
    }
    .columns .cintro {
        all: unset;
        display: none;
    }

    /*.columns.cintro {
        all: unset;
        display : none;
    } */

    .cintro  {
        display: none;
    }

  

    .menu_list > li + li {
        border-top: 1px solid #ccc;

    }

    .menu_list > li > a {
        display: block;
        padding: 0.8em 1em;
        font-size: 2em;
        font-weight: 700;
        color: black;

        margin-left: -1.5em;
        background-color: whitesmoke;
        

    }


    .megamenu_button {
        display: none;
    }

    .megamenu {
        all: unset;
        
    }
    /*
     .megacontent{
        all: unset;
    } */

    .megacontent {
        all: unset;
    }   

    .megacontent {
        position: absolute;
        display: block;
        right: 0;
        left: -3em;
        margin: 0;
        top: auto;
        background-color: whitesmoke;
    }

    .megacontent > .columns {
        /*background-color:hsl(196,100%,80%); */
        color: black;
        text-decoration: none;
        display: block;
        padding: 0.5em 1em;

    }

    .columns.cintro {
        all: unset;
        display: none;
    }

    .megacontent .menuheader {
        all: unset;
        display: none;
    }

    a {
        all: unset;
        
    } 

    .columns a {
        float: none;
        color: black;
        padding: 1em;
        text-decoration: none;
        display: block;
        text-align: left;
        font-size: 2em;
    



        }
        
        .columns a:hover{
            background-color: hsl(196,100%,80%)
        }

    .columns > h3 {
        display: none;
    } 
    /*.columns > h3 {
        display: block;
        padding: 0.8em 1em;
        color: black;
        font-weight: normal;
    } */

    .cintro > * , .cintro > h3 {
        display: none;
    }


    .sidebar_button {
        display: block;
        padding: 1em 1em;
        color: black;
        font-weight: normal;
        font-size: 2em;
        font-weight: 700;
        border: 0;
        background-color: transparent;
        /*background-color: bisque; */
        margin: 0;
        min-width: 100%;
        text-align: left;
        
        /*border-bottom: 2px solid black; */
        border-bottom: 1px solid #ccc;

    }

    .menudown{
        display: block;
        border-top: 1px solid #ccc;
      }

    .menudown > a {
        display: block;
        padding: 0.8em 1em;
        font-size: 2em;
        font-weight: 700;
        color: black;
      }

    /* .megacontent > .columns.one {
        display: none;

    } */

    .mitemtop.bar  {
        display: none;
    }

     .columns.one , .columns.two, .columns.three {
        display: none; 
       
        opacity: 0;
        transform: scaleX(0)  scaleY(0);

        transition-duration: 0.7s ;
        transition-property: opacity, transform, display; 
        
        /*transition: opacity 0.7s ease-out;
        transition: transform 0.7s  ease-out;
        transition: display 0.9s ;*/
        transition-behavior: allow-discrete;  

  
        
    } 

    /*@starting-style {
        .columns.one , .columns.two, .columns.three {
            opacity: 0;
            transform: scaleX(0)  scaleY(0);
        }
    } */

    .columns.one.is-open , .columns.two.is-open, .columns.three.is-open {
        display: block;

        min-width: fit-content;
        
        opacity: 1;
        transform: scaleX(1)  scaleY(1) ;

        @starting-style {
          
            opacity: 0;
            transform: scaleX(0)  scaleY(0);
      
    } 
        
       
    } 

    .columns.one > a , .columns.two > a , .columns.three > a  {
        display: none;
        opacity: 0;
        transform: scaleX(0)  scaleY(0);

        transition-duration: 0.7s ;
        transition-property: opacity, transform, display;
        /*transition: opacity 0.7s ease-out;
        transition: transform 0.7s 0.2s ease-out;
        transition: display 0.9s ;*/
        transition-behavior: allow-discrete; 


    }

    .columns.one.is-open > a , .columns.two.is-open > a , .columns.three.is-open > a  {
        display: block;
        opacity: 1;
        transform: scaleX(1)  scaleY(1) ;

        @starting-style {
          
            opacity: 0;
            transform: scaleX(0)  scaleY(0);
      
    } 
        
    }


    .hero {
        padding: 0 0;
        margin-top: 1em;
    }

    .sectioninner {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }
    

    @media (max-width: 800px) {

        .hero > h3 {
    
            position: absolute;
            top: 1em;
            font-size: 2em;
            margin: 0em 0.5em;
        }

    }
}