@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --f : "Poppins";
  --y : #f6bd31;
  --b : #1257b4;
  --gradient : linear-gradient(to top right, #fa6959, #f58c40, #f6be31);
}

::-webkit-scrollbar {
  background-color : var(--b);
}

::-webkit-scrollbar-thumb {
  background-color : rgba(255,255,255,0.4);
}

* {
    font-family : var(--f);
}

body {
    padding : 0;
    margin : 0;
    overflow-x : hidden;
}

header {
    width : 100vw;
    height : 100vh;
    background-image : url('images/header.png');
    background-size : cover;
    background-repeat : no-repeat;
    background-position : top;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    position : relative;
    padding : 0;
}

.header-contact {
    background-image : url('images/header-contact.png')!important;
}

.contact-header {
    padding : 30px;
    background-color : white;
    border-radius : 50px;
}

.headerText {
    color : black;
    font-size : 30px;
    font-weight : bold;
}

.contact-header {
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    justify-content : center;
}

.contact-header > h1 {
    color : var(--b);
}

nav {
    width : 100vw;
    height : 15vh;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-around;
    background-color : white;
    padding : 10px 0;
    position : absolute;
    top : 0;
    left : 0;
}

nav > * {
    color : var(--b);
    font-weight : bold;
    font-size : 30px;
    text-decoration : none;
}

nav > a:hover {
    text-decoration : underline;
}

nav > img {
    height : 100%;
    width : auto;
}

.navbutton {
    background : var(--b);
    font-size : 30px;
    border-radius : 50px;
    padding : 5px 20px;
    border : 0;
    color : white;
    font-weight : bold;
    cursor : pointer;
}

h1 {
    color : white;
    font-weight : bold;
    font-size : 50px;
    width : 50vw;
    text-align : center;
}

h1 > b {
    font-weight : bold;
    color : var(--y);
}

.difference-section, .features-grid {
    width : 100vw;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    padding : 0;
}

.difference-text {
    width : 60%;
    height : auto;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    padding : 0;
    margin : 0;
}

.difference-text > * {
    text-align : left;
    width : 70%
}
.difference-text > h3 {
    
    color : var(--b);
}

h3 {
    font-size : 30px;
}

p, li, a {
    font-size : 24px;
}

.difference-image {
    width : 40%;
}

.features-grid {
    height : 90vh;
    width : 100vw;
    padding : 0;
    background-color : pink;
}

.features-grid > div {
    width : 33.33%;
    height : 100%;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    overflow : hidden;
    
    background-size : cover;
    background-repeat : no-repeat;
}

.elevated-efficiency {
    background-image : url('images/elevated-efficiency.png');
}

 .unattended-operation {
    background-image : url('images/unattended-operation.png')
 }

 .reliability {
    background-image : url('images/reliability.png')
 }

 .feature:hover > .overlay {
    bottom : 0;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
 }

 .feature:hover > .overlay > h3 {
    height : auto;
 }

  .feature:hover > .overlay > p {
    height : auto;
 }

 .overlay {
    background-color : rgba(0,0,0,0.7);
    height : 100%;
    width : 100%;
    position : relative;
    bottom : -87%;
    transition-duration : 1s;
    display : block;
 }

.overlay > * {
    text-align : center;
}
.overlay > h3 {
    color : var(--y);
    text-transform : uppercase;
    height : 10%;
}

.overlay > p {
    color : white;
    height : 90%;
}

.video-container {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    width : 100vw;
    height : auto;
}

video {
    margin : 50px 0;
}

li > b {
    color : var(--b);
}


footer {
    background : var(--y);
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    padding : 40px 0;
    position : relative;
}

#footer-container {
    display : flex;
    align-items : center;
    justify-content : space-between;
    width : 80vw;
}

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

.row {
    display : flex;
    flex-direction : row;
}

.icon {
    height : 40px;
    width : 40px;
    margin : 5px;
}

a {
    text-decoration : none;
}

.footer-contact-container > *, .footer-text, .footer-nav > *, #footer-credit, .footer-text {
    color : white;
    font-family : var(--t)!important;
    font-size : 20px;
    text-align : left;
}


#footer-credit > * {
    text-decoration : underline;
    color : white;
    
}

#footer-nav {
    background-color : inherit!important;
    height : auto;
}

#footer-nav > a {
    color : white;
    margin : 10px;
}

hr {
    border : 1px solid white;
    width : 60%;
    margin : 0;
}

.contact-container {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
}

.footer-contact-container {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : flex-start;
}




.footer-social-container {
    display : flex;
    flex-direction : column;
    align-items : flex-end;
    justify-content : flex-end;
}

.footer-social-container > a {
    margin : 20px 0;
}

#hamburger-container {
    display : none;
}

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

    #hamburger-container {
    display : block;
  }

  .hamburger {
    display : block;
    width : 50px;
    height : 50px;
    position : absolute;
    right : 20px;
    top : 20px;
    transition : 0.5s ease-in-out;
    font-size : 40px;
    color : var(--b);
    background-color : rgb(0,0,0,0)!important;
    border-radius : 50px;
    border : none;
    cursor : pointer;
    z-index : 98;
    line-height : 5px;
  }

    #hamburgerO {
    z-index : 99!important;
    color : white;
    }

    #hamburgerX {
    z-index : 98!important;
    opacity : 0;
    color : var(--b)!important;
    }

  nav {
    height : 100vh!important;
    flex-direction : column;
    position : absolute;
    left : -110vw;
    transition-duration : 1s;
    background-color : white;
  }

    nav > img {
        height : 20vh;
        width : auto;
    }

  header {
    width : 100vw;
    height : 100vh;
    background-image : url('images/header.png');
    background-size : cover;
    background-repeat : no-repeat;
    background-position : top;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    position : relative;
    padding : 0;
}

header > h1 {
    position : relative;
    top : -40px;
}




.navbutton {
    background : var(--gradient);
    font-size : 30px;
    border-radius : 50px;
    padding : 5px 20px;
    border : 0;
    color : white;
    font-weight : bold;
    cursor : pointer;
}

h1 {
    font-size : 40px;
    width : 80vw;
}

h1 > b {
    font-weight : bold;
    color : var(--y);
}

.difference-section, .features-grid {
    width : 100vw;
    height : auto;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    padding : 0;
}

.difference-text {
    width : 100%;
    height : auto;
    display : flex;
    flex-direction : column;
    margin : 40px 0;

}

.difference-text > * {
    text-align : left;
    width : 80%
}


.difference-image {
    width : 100%;
}

.features-grid {
    height : auto;
    width : 100vw;
}

.features-grid > div {
    width : 100%;
    height : 80vh;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    overflow : hidden;
    background-size : cover;
    background-repeat : no-repeat;
}

.difference-image {
    display : none;
}

.elevated-efficiency {
    background-image : url('images/elevated-efficiency.png');
}

 .unattended-operation {
    background-image : url('images/unattended-operation.png')
 }

 .reliability {
    background-image : url('images/reliability.png')
 }

 .feature:hover > .overlay {
    bottom : 0;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
 }

 .feature:hover > .overlay > h3 {
    height : auto;
 }

  .feature:hover > .overlay > p {
    height : auto;
 }

 .overlay {
    background-color : rgba(0,0,0,0.7);
    height : 100%;
    width : 100%;
    position : relative;
    bottom : -87%;
    transition-duration : 1s;
    display : block;
 }

.overlay > * {
    text-align : center;
}
.overlay > h3 {
    color : var(--y);
    text-transform : uppercase;
    height : 10%;
}

.overlay > p {
    color : white;
    height : 90%;
}

.video-container {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    width : 100vw;
    height : auto;
}

video {
    margin : 20px 0;
    width : 90vw;
}

li > b {
    color : var(--b);
}

footer {
    background-color : var(--b);
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    padding : 40px 0;
    margin : 40px 0 0 0;
}

#footer-container {
    justify-content : center;
    width : 80vw;
}

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

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

.icon {
    height : 40px;
    width : 40px;
    margin : 5px;
}

.footerText {
    font-size : 20px;
}

.footer-text {
    text-align : center;
    font-size : 20px;
}

.footer-social-container {
    display : flex;
    flex-direction : column;
    align-items :center;
    justify-content : center;
}

.footer-social-container > a {
    margin : 20px 0;
}

.map {
    height : 65vh!important;
    width : 90vw;
    margin : 40px 0 0px 0;
}

.contact-container, .footer-contact-container {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    width : 100%;
}


.contact-header {
    padding : 40px 5px;
    background-color : white;
    border-radius : 50px;
}

.headerText {
    color : black;
    font-size : 20px;
    font-weight : bold;
}

.contact-header {
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    justify-content : center;
}

.contact-header > h1 {
    color : var(--b);
}




  }