html {
    font-size: 18px;
}

body {
    line-height: 1.5;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    box-sizing: border-box; 
}

/*=== Outer container for all the content ===*/
.layout-helper {
    margin: 0 auto;
    max-width: 1000px;
}
/*=== End outer container for all the content ===*/


/*=== Main menu styling for viewports > 450px ===*/
.header-box {
    border-bottom: 1px solid #af9800;

}
.header-container {
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.main-menu {
    margin-left: auto;
}

.main-menu ul {
    list-style: none;
    display: flex;
    column-gap: 30px;
}

.main-menu a:link,
details a {
    text-decoration: none;
    color: #00161E;
}

.main-menu a:visited,
details a:visited {
    color: #00161E;
}

.main-menu a:focus
details a:focus {
    outline-color: #af9800;
    padding: 5px;
}
.main-menu a:hover,
.main-menu a:active,
details a:hover,
details a:active {
    text-decoration: underline 3px solid #af9800;   
    color:#00161E;
}

.current-page {
    font-weight: 700;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #eaeaea;    
    border-radius: 7px;
    padding: 20px 30px;
    min-width: 160px;
    z-index: 1;
}

.dropdown-content a {
    display: block;
    line-height: 2;
}

.dropdown:hover .dropdown-content {
    display: block;
}
/*=== End of main menu styling for viewports larger than 450px ===*/


main {
    color:#00161E;
}


/*==== HERO SECTION ====*/
/*=== Hero h1 ===*/
.h1-leader {
    font-weight: 500;
    font-size: 3.5em;
    text-align: center;
    margin: 30px 0px 15px;
}
/*=== Hero paragraph ===*/
.leader-text {
    font-size: 2em;
    padding: 20px;
}
/*==== END OF HERO SECTION ====*/



/*==== Button styling ====*/
.button-container {
    display: grid;
    place-items: center;
    margin: 40px 0px 70px;
}

.btn-rouge {
    background-color: #a81212;
    border: solid 1px #a81212;
    border-radius: 10px;
    padding: 15px 30px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
}

.btn-rouge a:visited {
    color: #fff;
}

.btn-rouge:focus,
.btn-rouge:hover {
    background-color: #931010;
    box-shadow: 5px 5px 5px #d4d4d4;
    outline: solid 2px #931010;
    cursor: pointer;
}
/*== End button styling ==*/

.light-sec-1 {
    height: 950px;
}

.light-sec-3 {
    height: 350px;
}

.dark-filler {
    background-color: #005777;
    height: 300px;

}

.dark-sec-1 {
    background-color: #005777;    
    padding-bottom: 100px;
    margin: 0;
}

.light-text {
    color: #ffffff;
}

.lead-img-container {
    margin: 0 auto;
    max-width: 850px;
    height: auto;
    position: relative;
    box-sizing: border-box;
    border-radius: 10px; 
}

.lead-img {
    aspect-ratio: attr(width) / attr(height);
    width: 100%;
    height: auto;
    position: absolute;
    top: -270px;
    box-sizing: border-box;
    border-radius: 10px;
}

.lead-img-2 {
    aspect-ratio: attr(width) / attr(height);
    width: 100%;
    height: auto;    
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.dark-sec-1-text-container {
    position: relative;
    padding-top: 100px;
}

.section-header {
    color: #00aeff;
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
}

.section-header p {
    margin-bottom: 0;
}

.light-text-container {
    text-align: center;    
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

.section-h2 {
    font-size: calc(2em + 1vw);
    margin-top: 0;
}

/*solution boxes*/
.solutions-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    place-items: center;
    grid-auto-rows: minmax(320px, auto);
    column-gap: 30px;
    row-gap: 70px;
    padding: 0px 10px 0px 10px;
    box-sizing: border-box;
    padding-bottom: 60px;
}

.solution {
    background-color: #fff;
    width: 300px;
    height: 485px; 
    border-radius: 10px;    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    box-sizing: border-box;    
}

.solution-link,
.solution-link:visited,
.solution-link:focus,
.solution-link:hover,
.solution-link:active {
    color: #00161E;
    text-decoration: none;
}

.solution-icon {
    position: relative;
    display: grid;
    place-items: center;
}

.gold-icon {
    background-color: #af9800;
    border-radius: 50%;
    padding: 3px;
    position: absolute;
    z-index: 1;
}

.solution-img {
    border-radius: 10px 10px 0px 0px;
}

.solution-text {
    padding: 10px 20px;
    flex: 1 1 auto;    
   
}

.solution h3 {
    font-weight: 600;
    text-align: center;
    margin: 10px 0px 10px ;
}

.solution p {    
    margin: 10px 0px;
}

.solution-text ul {
    margin: 0px;
}

.gold-chevron {
    align-self: flex-end;
    margin: 0px 20px 10px 0px;
} 
/*End of solution boxes settings*/


/*Applicable industries*/
.industries-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 100px;
    justify-content: center;
}

.lefty-container {
    max-width: 530px;
    padding: 15px;
    margin-top: 100px;
    box-sizing: border-box;
}

.righty-container {
    max-width: 480px;
    margin-top: 150px;
    height: 610px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.righty-container img {
    max-width: 100%;
}

.righty-container img:nth-child(1) {
    border-radius: 10px 0px 0px 0px;
    grid-row: span 2;
}

.righty-container img:nth-child(2) {
    border-radius: 0px 0px 0px 10px;    
    grid-row-start: 3;
       
}

.righty-container img:nth-child(3) {
    border-radius: 0px 10px 0px 0px;
}

.righty-container img:nth-child(4) {
    border-radius: 0px 0px 10px 0px;
    grid-row-end: span 2
}

/*Gold check icons in Applicable industries*/
.gold-check-icon {
    background-color: #af9800;
    border-radius: 50%;
    padding: 3px;
    position: relative;
    top: 7px;
    margin-right: 10px;
    margin-left: 30px;
}

/*Change the flex order of Applicable industries so the image stack comes first when the screen size goes below 933px*/
    @media  screen and (max-width: 933px) {
        .industries-container {
            flex-direction: column-reverse;
            align-items: center;
    }

    }

   /*If the viewport is more than 450px, don't show the hamburger menu*/
  @media screen and (min-width: 855px) {
    .open-slide,
    .side-nav { 
        display:none;
    }
}  

/*Screen size <425px*/
/*Media Query to display /not display the side menu icon or naviagtion header when depending on screen size */
 /*If the viewport is less than 855px, then:*/
  @media screen and (max-width: 855px) {
    /*Change the main menu to  hamburger menu*/
    .main-menu{
        display: none;
    }
    
    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px; 

    }

    .open-slide {
        margin-top: 20px;
        padding-top: 10px;
    }

    .open-slide a {
        margin-top: 20px;
        padding: 10px;
    }

     .side-nav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: #00aeff;
        overflow-x: hidden;
        padding-top: 50px;
        transition: 0.5s;
        text-align: left;
    }

    .side-nav .btn-close {
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 40px;
        margin-left: 50px;
    }

    .side-nav a {
        padding: 10px 10px 10px 30px;
        text-decoration: none;
        font-size: 16px;
        color: maroon;
        display: block;
        transition: 0.3s;
    }
  
  .side-nav a:hover {
    background-color: #af9800;
    color: #fff;
  } 

  .content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
      }
}  /*End of change of main menu to hamburer menu for screen size up to 855px*/ 

/*Additional settings for screen sizes less than 450px*/
 @media screen and (max-width: 455px) {
    .light-sec-1 {
    height: 700px;
    }

    .dark-filler {
        height: 100px;
    }

    .dark-sec-1 {
        background-color: #005777;
        margin: 0;
    }

    .dark-sec-1-text-container {
        padding-top: 20px;
    }

    .h1-leader {
        font-size: 2.0em;        
        padding: 15px 25px;
        text-align: left;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .leader-text {
        font-size: 1.2em;
        padding: 15px 25px;
        margin-top: 0;
    }

    .button-container {
        margin-top: 50px;
    }

    .lead-img-container {
        border-radius: 10px;
    }

    .lead-img {
        position: absolute;
        top: -110px;
        padding: 10px;
        border-radius: 20px;
    }

    .dark-sec-1-text-container {
        padding-top: 100px;
    }

    .section-header {
        margin-top: 30px;
    }
  }


  /*Additional settings for screen sizes between 451 and 855*/
  @media screen and (min-width: 451px) and (max-width: 855px) {
    .h1-leader {
        font-size: 2.5em;        
        padding: 25px;
    }

    .leader-text {
        font-size: 1.5em;
        padding: 25px;
    }

    .button-container {
        margin-top: 70px;
        margin-bottom: 70px;
    }

     .lead-img-container {
        border-radius: 20px;
    }

    .lead-img {        
        position: absolute;
        top: -300px;
        padding: 10px;
        border-radius: 20px;
    }

    .dark-filler {
        height: 150px;
    }

  }

 


/*=====    WHY MASTMINDER? SECTION   ===*/
.dark-sec-2 {
    background-color: #005777;
    padding-bottom: 50px;
    
}

.ymm-container {
    padding-top: 100px;
} 

.y-box-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 50px;
    padding: 10px;
}

.y-box {
   box-sizing: border-box;
   max-width: 25em;
   background-color: #006d95; 
   border-radius: 10px;
   padding: 20px 20px;
}

.y-box svg {
    float: left;
    margin-right: 10px;
}

.y-box h3  {
    font-weight: 600;
    margin: 10px 0;
}

.y-box p {
    margin-left: 60px; 
    font-weight: 300;   
}

/*If screen is more than 650px wide, and less than 728px, for the Why MastMinder section do this:*/
@media screen and (min-width: 650px) and (max-width: 728px) {
    .dark-sec-2 {
        height: auto;
    }
}

/*If screen is less than 650px wide, for the Why MastMinder section do this:*/
@media screen and (max-width:650px) {
    .y-box-container {
        grid-template-columns: 1fr;
        place-items: center;
    }

    .dark-sec-2 {
        height: auto;
    }
    
} /*End of why Mastminder section*/



/*=====    About us section on home page  =====*/
.light-sec-2 {
    margin: 70px 0px;
    padding: 15px;
}

.dtext-container h2,
.center {
    text-align: center;
}/*=== End of About us section ===*/



/*=== Testimonials section ====*/
.dark-sec-3 {
    background-color: #005777;
    padding: 10px 10px 100px;
}

.announcer {
    padding-top: 100px;
}

.announcer h2,
.announcer p {
    text-align: center;
}

.reviews-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 70px;
    box-sizing: border-box;
}

.review-card {
    background-color: #ffffff;
    border-radius: 10px;
    max-width: 32em;
    height: 34em;
    padding: 0px 20px 40px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    
}

.review-text {
    margin: 0px 35px 30px;
    flex: 1 1 auto;
    
}

.review-text p:first-of-type {
    margin-top: 0px;
}

.reviewer-name-tag {
    margin: 20px 35px 0px;
    border-top: 2px solid #af9800;
    padding: 5px;
}

.reviewer-name-tag p:first-of-type {
    margin-bottom: 0px;
}

.reviewer-name-tag p:last-of-type {
    margin-top: 0px;

}
/*Making the testimonials section responsive*/
@media screen and (max-width:953px) {
    .reviews-container {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    row-gap: 70px;    
}
}
/*When screen is less than 390px wide, the review card expands/ contracts to fit the content as needed*/
@media screen and (max-width: 450px) {
    .review-card {
        height: auto;
    }
} /*=== End of Testimonials section ====*/


/*=== Footer section ====*/
.footer-container {
    background-color: rgb(175 152 0 / 60%);
    padding-top: 50px;
    padding-bottom: 50px;    
}

.footer-text {    
    display: grid;
    grid-template-columns:2fr  2fr;
    border: 1px solid #00161E;
}

.footer-text a,
.footer-text a:visited {
    color: #00161E;
}

.footer-text a:focus,
.footer-text a:hover,
.footer-text a:active {
    text-decoration: underline;
    color: #00aeff;  
}

.legal {
    padding: 30px;
    border-right: 1px solid #00161E;
}

.image-credits div {
    padding: 20px 0px 0px 20px;
    margin: 0px 20px 0px 0px; 
    
}

.image-credits-text {
    font-size: 12px;  
    
}

.copyright {
    margin-top: 50px;
    padding: 10px 20px;
    font-size: 16px;
}

.copyright p:last-of-type {
    margin-top: 0;
}

.copyright p:first-of-type {
    margin-bottom: 3px;
}

@media screen and (max-width: 641px) {
    .footer-text {
        display: grid;
        grid-template-columns: 1fr;
    }

    .legal {
        border-bottom: 1px solid #00161E;
    }
}

/*==== POLICY PAGES ====*/

.dark {
    background-color: #005777;
    border-radius: 10px 10px 0px 0px;
}
.policy-container {
    box-shadow: 10px 10px 20px 0 rgb(0, 22, 30, 15%), -5px -5px 10px rgb(0, 22, 30, 15%);
    border-radius: 10px;
    margin: 50px 20px 70px;
    background-color: #F5F5F5;
}

.policy-text {
    padding: 20px;
}

.alpha-bullets {
    list-style-type: lower-alpha;
}

details p {
    padding-left: 40px;
    margin: 10px;
}

details {
    padding-bottom: 20px;
}
summary::marker {
    color: #af9800;
}

/*Styling for the jump links is with the big screen main nav styling*/



/*=== End of policy pages settings ===*/


/*===== DOWNLOADS PAGES =====*/
  /*Styling document icons like PDF or other. This is to bring it inline with the text  */
    .download-container {
        background-color: #005777;
        padding: 10px 0px;
    }    

      .doc-icon {
        position: relative;
        top: 10px;
        margin-right: 7px;
        margin-bottom: 5px;
      }

      .download-box {
        box-shadow: 10px 10px 20px 0 rgb(0, 22, 30, 15%), -5px -5px 10px rgb(0, 22, 30, 15%);
        padding: 5px 20px 20px;
        width: auto;
        border-radius: 20px;
        margin: 0px 10px 50px;
        background-color: #ffffff;
      }

      .download-icon {
        background-color: #af9800;
        border-radius: 50%;
        padding: 5px;
        position: relative;
        top: 10px;
        margin-right: 7px;
      }

      .white-h2 {
        color: #ffffff;
      }
      
    /* Link settings for the downloads section*/
        .download-box a,
        .download-box a:link,
        .download-box a:visited {
            text-decoration: none;
            color: #00161E;
        }

        .download-box a:hover,
        .download-box a:active {
            text-decoration: underline 2px solid #af9800;
        }

        .download-box a:focus {
            outline-color: #af9800;
            padding: 5px;
        }


    /*=== ABOUT US ===*/
    .content-box {
        display: flex;
        flex-direction: row;               
        margin-bottom: 20px;
        box-sizing: border-box;
    }


    .left-text{
        flex: 3;
        padding: 15px;
        box-sizing: border-box;
    }

    .right-image {
        margin: 60px 30px;
        flex: 2;   
    }

    .right-image img {
        border-radius: 10px;
        width: 100%; 
    }

    /*Change the flex order of Applicable industries so the image stack comes first when the screen size goes below 933px*/
    @media  screen and (max-width: 933px) {
        .content-box {
            flex-direction: column-reverse;
            justify-content: center;
        }

        .right-image {
            width: auto;
        }
    } 

/*==== TELECOMS BTS AND TRANSMISSION SPARES ====*/
    .logos {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 3fr));
        column-gap: 50px;
        row-gap: 100px;
        margin: 50px 50px 100px;
        place-items: center;
    }

    .banner {
        background-color: #005777;
        padding: 15px;
        border-radius: 0px 50px;
        max-width: 250px;
    }
   

    /*====== SOLAR AND HYBRID POWER PAGE*/
    .l-box-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
        gap: 40px;
        margin-bottom: 50px;
        padding: 10px;
    }

    .l-box {
    box-sizing: border-box;
    max-width: 25em;
    background-color: #ffffff; 
    box-shadow: 10px 10px 20px 0 rgb(0, 22, 30, 15%), -5px -5px 10px rgb(0, 22, 30, 15%);
    border-radius: 10px;
    padding: 0px 35px 20px 20px;
    }

    .l-box-left-icon {
        float: left;
        margin-right: 20px;
        margin-bottom: 40px;
        position: relative;
        top: 15px;
    }

    .l-box-top-icon {
        display: grid;
        place-items: center;
    }

    .l-box-text {
        margin-left: 30px;
    }

    .l-box h3  {
        font-weight: 600;
        margin: 30px 20px;
    }

    .l-box-left-text {
        margin-left: 70px;
        
    }

    .bottom-spacer {
        margin: 100px;
    }

    .pad {
        padding-top: 25px;
    }

    .pic-b-radius {
        border-radius: 10px;
    }

/*If screen is more than 650px wide, and less than 728px, for the Solar and hybrid page do this:*/
@media screen and (min-width: 650px) and (max-width: 728px) {
    .dark-sec-2,
    .light-sec-3 {
        height: auto;
    }
}

/*If screen is less than 650px wide, for the the Solar and hybrid page do this:*/
@media screen and (max-width:650px) {
    .l-box-container {
        grid-template-columns: 1fr;
        place-items: center;
    }

    .dark-sec-2,
    .light-sec-3 {
        height: auto;
    }
    
} /*End of Solar and hybrid power systems page*/


    /*====== POWER EQUIPMENT PAGE*/
    .lead-h3 {
        font-size: calc(1.5em + 1vw);
    }

    .c-box {
        background-color: #006d95;
        border-radius: 10px;
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 20px;
        margin: 0px 10px 50px;
        padding: 10px;
    }

    .c-box p {
        margin: 25px 0px;
    }

    /*If screen is more than 250px wide, for the the Power equipment page "What's included" section, do this:*/
@media screen and (min-width:625px) {
    .c-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*====== POWER MONITORING PAGE========*/
.image-box {
    margin-top: 30px;
}


/*====== 404 ========*/
.pad-left {
    padding-left: 35px;
}