body {
    background-color: white;
    margin: 0 auto;
    font-family: "Lato";
    white-space: line-break;
    box-sizing: border-box;
}
.loading{
    width: 100%;
    position: fixed;
    z-index: 1000;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #023049;}
.loader {
background: url("assets/logo.svg");
width: 300px;
height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
  }
  /* Safari */
@-webkit-keyframes spin {
    0% {transform: scale(0, 0);opacity:0;}
    100% {transform: scale(2, 2);opacity:1;}
  }
  
  @keyframes spin {
    0% {-webkit-transform: scale(0, 0);opacity:0;}
    100% {-webkit-transform: scale(2, 2);opacity:1;}
  }
.hidden{
    display: none;
}
.border-box{
   box-sizing: border-box;
}
.form-size{
    width: 50%;
    padding: 16px;
}

input[type='text'],[type='email'],[type='textarea']{
    height: 40px;
    border-radius: 4px;
    box-shadow: none;
    border-color: #ededed;
    width: 100%;
    padding: 6px 24px;
    margin-bottom: 16px;
    margin-top: 8px;
    border: 1px solid #d9d9d9;
    box-sizing:border-box;
}
textarea {
    border-radius: 4px;
    box-shadow: none;
    border-color: #ededed;
    width: 100%;
    padding: 6px 24px !important;
    margin-bottom: 16px;
    margin-top: 8px;
    border: 1px solid #d9d9d9;
    box-sizing:border-box;
}
textarea:focus{
    outline: none !important;
}
input, textarea {    font-family: "Lato";}
input[type='text'],[type='email'],[type='textarea']:focus{
    box-shadow: none;
    border: 1px solid #d9d9d9 !important;
    outline: none !important;
}
input::placeholder {

    color: rgb(102, 102, 102)!important;
}
::-webkit-input-placeholder { /* Edge */
    color: rgb(102, 102, 102)!important;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(102, 102, 102)!important;
  }
  
  ::placeholder {
    color: rgb(102, 102, 102)!important;
  }
input:focus {
    box-shadow: none;
    border: 1px solid #d9d9d9 !important;}
label{
    text-align: left;
    width: 100%;
   
    color:#023049;
    font-size: 16px;

}

.background-blue {
    background: #023049;
}

.padding-bottom-l {
    padding-bottom: 16px;
}

.center-margin {
    margin: 0 auto;
}

.image-wrapper {
    padding-bottom: 56.25%;
}

.title {
    font-size: 40px;
    font-weight: bold;

}

.blue {
    color: #023049;
}

.light-orange {
    color: #FCD1A0;
}

.orange {
    color: #F8921E;
}

a {
    text-decoration: none;
}

.bold {
    font-weight: bold;
}

.navifgation {
    font-size: 20px;
    line-height: 28px;
    display: flex;
    align-items: center;

}

.section-margin {
    margin: 80px auto;
}

.section-s-margin {
    margin: 40px auto;
}
.box-width{
    width: 38%;
}
.body-font{
    font-size: 16px;
    line-height: 24px;
}
.cursor-poitner {
    cursor: pointer;
}

.contact-msg {
    border: 1px solid #f8921e;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #f8921e36;
    text-align: center;
    font-weight: bolder;
    color: #023049;
}

.car-image{
    background-image: url("assets/fastcar.jpg");
}

.wallbox-image{
    background-image: url("assets/wallbox_background.jpg");
}

.hero-image {
    
    width: 100%;
    height: 850px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin: auto;

}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.box-shadow-gray {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.m-l {
    margin: 16px;
}

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

.border-raduis-s {
    border-radius: 6px;
}

.col {
    margin: 0 16px;
    width: 30%;

}

.reasons-height {
    height: 400px;
}

.icon-wrapper {
    text-align: center;
    height: 200px;

}

.paragraph-wrapper {
    min-height: 120px;
    height: 40%;
}

.icon-wrapper img {
    width: auto;
    height: auto;

}

.large-body {
    font-size: 18px;
    line-height: 28px;
}

.bold {
    font-weight: bold;
}

.p-l {
    padding: 16px;
}

.p-6 {
    padding: 6%;
}

.col-4 {
    width: 30%;
}

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

.h1 {
    color: #F3F3F3;
    font-size: 88px;
    line-height: 88px;
    text-align: center;
    width: 705px;
    margin: 120px auto 16px auto;
    padding: 16px;
    white-space: line-break;
}

.topnav {
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}
.m-t-xl{
    margin-top: 32px;
}
.topnav a:hover, .topnav button:hover {
    background-color: #d57508;
    color:white !important;
}

.topnav a.active {
    font-weight: bold;
    color: #FCD1A0;
}

.topnav .icon {
    display: none;
}

.flex-grow-1 {
    flex-grow: 1;
}

.align-item-center {
    align-items: center !important;
}

.justify-conent-center {
    justify-content: center !important;
}

.justify-conent-between {
    justify-content: space-between;
}

.w-100 {
    width: 100%;
}

.w-80 {
    width: 80%;
}
.content-width{
    max-width: 1200px;
}
.vertical-line {
    width: 100%;
    height: 1px;
    background-color: white;
}

.social-icon {
    width: 28px;
    height: 28px;
}

.burger-menu {
    width: 24px;
    height: 24px;
}

.social-icon img {
    width: 100%;
    height: 100%;
}

.m-l-m {
    margin-left: 16px;
}

.m-r-m {
    margin-right: 16px;
}

.m-t-m {
    margin-top: 16px;
}

.m-b-m {
    margin-bottom: 8px;
}

.btn-xl {
    padding: 8px 48px;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

.btn-l {
    padding: 8px 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.customers {
    margin: 0 40px;
}

.secandary-btn {
    background: #023049;
    box-shadow: none;
    border: none;
    border-radius: 24px;
    text-decoration: none;
    color: white;
}

.secandary-btn:hover {
    background: #06476a;
    cursor: pointer;
}

.secandary-btn:active {
    background: #06476a;
    cursor: pointer;
}

.primary-btn {
    background: #F8921E;
    box-shadow: none;
    border: none;
    border-radius: 24px;
    text-decoration: none;
    color: white;
}

.primary-btn:hover {
    background: #d57508;
    cursor: pointer;
}

.primary-btn:active {
    background: #d57508;
    cursor: pointer;
}


.battery-wrapper {
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 24px;
}


.battery-logo {
    z-index: 2;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.battery {
    top: -150px;

}

.battery img {}
.about-imges{
max-height: 300px;
height: 300px;
}
.about-imges img {
    width: 100%;
    height: 100%;
}

.footer {
    padding: 16px 0;
    background-color: #023049;
    color: white;
    font-size: 13px;
    line-height: 20px;
    width: 100%;
}

.footer-title {
    color: #FCD1A0;
    margin-bottom: 8px;
}

.footer a {
    text-decoration: none;
    color: white;
    margin: 8px 0;
}

.w-50 {
    width: 50%;
}

.justify-conent-end {
    justify-content: end;
}

/* responsive */
/* on tablte */
@media screen and (max-width: 750px) {
    .form-size{
        width: 80% !important;
    }
    .h1 {
        width: 70% !important;
        max-width: 100% !important;
        font-size: 48px !important;
        line-height: 54px !important;

    }

    .col {
        width: 90% !important;
        flex-grow: 1;
    }

    .col-4 {
        width: 100% !important;
    }

    .battery-wrapper {
        margin: 40px auto;
    }
}

@media screen and (max-width: 600px) {
    .m-l-m-on-tablet {
        margin-left: 8px;
    }

    .w-80 {
        width: 100% !important;
    }

    .w-50 {
        width: 100% !important;
    }

    .footer-links {
        margin-top: 16px;
        justify-content: flex-start;
    }

    .hide-on-tablet {
        display: none !important;
    }

    .flex-on-tablet {
        display: flex !important;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
    
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .box-width{
        width: 100% !important;
    }
    .topnav {
        flex-direction: column;
        width: 100% !important;
    }

    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

}
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {

    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

/* on desktop */
@media screen and (min-width: 600px) {
    .hide-on-deaktop {
        display: none;
    }


}

@media screen and (max-width: 1200px) {
    .col-4 {
        width: 100%;
    }
    .wrapper-image-text{
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .flip{
        flex-direction: column-reverse;
    }

.box-width{
    width: 60% !important;
}
    .paragraph-wrapper {

        height: auto !important;
    }

    .col {
        width: 40%;
        margin: 16px;
    }

    .reasons-height {
        width: 70% !important;
    }
}

@media screen and (max-width: 375px) {
    .col {
        width: 90% !important;
        margin: 16px 0;
    }

    .reasons-height {
        width: 90% !important;
    }
}

#map {
    height:700px;
    width: 100%;

}

.circular-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
  }

  .right-button{
    position: absolute;
    top: 50%;
    right: 40px;
  }

  .left-button{
    position: absolute;
    top: 50%;
    left: 40px;
  }

  .left-button img{
    transform: scaleX(-1);
  }
  
  .circular-button img {
    width: 50%;
    height: 50%;
  }

  .circular-button:hover img {
    content: url(assets/arrow-white.png);
  }

  #slide-msg{
    text-shadow: -8px 2px 12px black;
  }

  .topnav a{
    text-shadow: 1px 1px 2px black;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Style the button inside the dropdown */
  .dropbtn {
    background: none;
    border: none;
    padding: 14px 19px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-shadow: 1px 1px 2px black;
    color:white;
    font-family: "Lato";
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: fixed;
    background-color: rgb(249, 249, 249,0.5);
    width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    color: #000;
    padding: 12px 15px;
    text-decoration: none;
    display: block;
    width:150px;
    text-shadow: none;
  }
  
  /* Change the background color of the dropdown links on hover */
  .dropdown-content a:hover { 
    background-color: #f8921e; 
    color:white;
}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content { display: block; }