*{
  margin:0;
  padding:0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin:0;
  padding:0;
  overflow-x: hidden;
}
.container {
    max-width: 960px;
  }
  main{
    color: #fff;
  }
  
  /*
   * Custom translucent site header
   */
  
  .site-header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1020;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .site-header a {
    color: rgba(255, 255, 255, 0.85);
    transition: color .15s ease-in-out;
    padding: 9px 20px;
    z-index: 888;
  }
  .site-header a:hover {
    color: #fff;
    text-decoration: none;
  }
  .site-header nav{
    position: relative;
  }
  .site-header nav:hover .bg-nav, .active-1, .active-2 , .active-3, .active-4, .active-5{
    position: absolute;
    background-color: #ececec;
    z-index: 777;
    opacity: .2;
    top: 0;
    pointer-events: none;
    height: 100%;
    transition: all .5s ease 0s;
  }
  .site-header a:nth-child(1):hover~.bg-nav , .active-1{
    width: 128.85px;
    left: 16.5%;

  }
 
  .site-header a:nth-child(2):hover~.bg-nav , .active-2{
    width: 116.29px;
    left: 28%;
  }
  .site-header a:nth-child(3):hover~.bg-nav , .active-3{
    width: 166.79px;
    left: 38%; 
  }
  .site-header a:nth-child(4):hover~.bg-nav , .active-4{
    width: 229.67px;
    left: 52.5%;
  }
  .site-header a:nth-child(5):hover~.bg-nav , .active-5{
    width: 121.35px;
    left: 73%;
  }

  /*
   * Dummy devices (replace them with your own or something else entirely!)
   */
  
  .product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    transform: rotate(30deg);
  }
  
  .product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    color: rgba(255, 255, 255, .1);;
    border-radius: 5px;
  }
  
  .product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
  }
  
  
  /*
   * Extra utilities
   */
  
  .flex-equal > * {
    flex: 1;
  }
  @media (min-width: 768px) {
    .flex-md-equal > * {
      flex: 1;
    }
  }
  


  .lang{
    color: #fff;
  }

  .navigation{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
  }
  .bg-city{
    background-image: url("../img/city-smart.jpg");
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    background-size: cover;
  }
  .bg-agri{
    background-image: url("../img/agri.jpg");
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    background-size: cover;
  }
  .bg-water{
    background-image: url("../img/water-managment.webp");
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    background-size: cover;
  }
  .bg-about{
    background-image: url("../img/aerial-view-business-team.webp");
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    background-size: cover;
  }
  .bg-smart-city{
    background-image: url("../img/light-trails-buildings.webp");
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    background-size: cover;
  }
  .bg-smart-agri{
    background-image: url("../img/smart-agri.webp");
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    background-size: cover;
  }
  .bg-smart-water{
    background-image: url("../img/save-water.webp");
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    background-size: cover;
  }
  .bg-smart-contact{
    background-image: url("../img/contact-us.png");
    background-repeat: no-repeat;
    background-color: #f8f9fa;
    background-size: cover;
  }
  .bg-normal{
    background-color: #f8f9fa;
  }
  .bg-overlay {
    position: absolute;
    background-color: #333;
    z-index: 776;
    opacity: .5;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    transition: all .5s ease 0s;
}
.margin-2 {
    margin-bottom: 10rem!important;
    margin-top: 10rem!important;
}
.padding-2 {
    padding: 1.25rem!important;
}

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

/* Mobile Header */

#header-mobile{
  display: none;
}
#header-mobile {
  position: relative;
  display: none;
  height: 77px;
  z-index: 1020;
  background-color: #fff;
}
.mobile-header-inner {
  width: 92%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.mobile-header-inner .logo-link{
  width: 70%;
  color: #333;
}
.mobile-header-inner .logo-link .logo {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 63px;
  margin-left: 0px;
}
.mobile-header-inner .logo-link  .logo-txt {
  color: #333;
  padding-top: 2px;
  font-size: 13px;
}
.mobile-header-inner .logo-link  .logo-txt .logo-txt h2 {
  width: 100%;
  margin-bottom: 0;
  font-size: 27px;
}
/* Icon 3 */

#nav-icon3{
  width: 60px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 73%;
  background: #333;
  border-radius: 4px;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 10px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 24px;
}

#nav-icon3 span:nth-child(4) {
  top: 38px;
}

#nav-icon3.open span:nth-child(1) {
  top: 24px;
  width: 0%;
  right: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.header-navigation  {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  width: 100%;
  max-height: calc(100vh - 70px);
  background-color: #fff;
  border-bottom: 1px solid #dbdbdb;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  z-index: 10;
}
.header-navigation ul{
  width: 90%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin: 0 auto;
  padding: 20px;
}
.header-navigation li{
  width: 100%;
  margin-top: 10px;
  position: relative;
  padding-left: 10px;
}
.header-navigation li::before{
  content: "\f141";
  font-weight: 900;
  font-family: 'Font Awesome 6 Free';
  font-display: block;
  font-size: 20px;
  position: absolute;
  left: -17px;
}
.header-navigation li a {
  color: #333;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
/* End Mobile Header */



.logo{
    display: flex;
    flex-wrap: nowrap;
    width: 246px;
    margin-left: 20px;
    height: 78px;
}
.logo-txt{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    color: #fff;
    margin-left: 15px;
    padding-top: 15px;
}
.logo-txt h2{
    width: 100%;
    margin-bottom: 0;
}

.btn-login{
    margin-right: 20px;
    color: #fff;
    font-weight: 600;
    border: #FFF 2px solid;
    padding: 9px 20px;
    text-align: center;
    border-radius: 5px;
    background: transparent;
    transition: all 0.3s ease-in;
}
.btn-login:hover{
    background: #fff;
    color: #333!important;
}

.btn-outline-secondary {
    color: #e9e9e9!important;
    background-color: transparent;
    background-image: none;
    border-color: #ececec!important;
}

footer .logo-txt{
    color: #333;
}

.blink_me {
    position: relative;
    animation: blinker 1.5s linear infinite;
    cursor: pointer;
  }
  
@keyframes blinker {
50% {
    opacity: 0;
}
}
.blink_me i{
    position: relative;
    bottom: -128px;
}
.blink_me .fa-arrow-down-long::before, .blink_me .fa-arrow-up-long::before{
    font-size: 30px;
}

#city a, #water a, #agri a{
    text-decoration: none;
    color: #fff;
}

/* ABOUT */

.inner-page, .inner-page-2{
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
    margin-left: 55%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    z-index: 778;
}

.inner-page p{
    text-align: right;
}

.wrapper-value{
    padding: 15px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: #333;
}
.icone-value{
    width: 100px;
    padding: 15px;
    display: flex;
    justify-content: center;
}
.icone-value img{
    width: 100px;
}
.title-icone-value{
    width: 100%;
    margin-top: 10px;
}

/* Smart City */

.inner-page-2{
    margin-left: 0;
    justify-content: flex-start;
    margin-top: 4.5rem;
    margin-bottom: 1.5rem;
}
.inner-page-2 p{
    text-align: left;
}
.sc-single-image  {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    z-index: 2;
}
.sc-single-image img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.title-bg-content{
    text-align: left;
}
.sc-content-image{
    color: #333;
}
.list-bg-content{
    list-style: none;
    text-align: left;
    position: relative;
    padding-left: 26px;
    text-align: justify;
}
.list-bg-content li::before{
    content: "\f105";
    font-weight: 900;
    font-family: 'Font Awesome 6 Free';
    font-display: block;
    font-size: 20px;
    position: absolute;
    left: 4px;
}

.border-paragraph{
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    padding: 15px;
    border: #333 1px solid;
    border-radius: 10px;
    text-align: justify;
    color: #333;
}

/* Contact */
.contact-wrap{
    color: #333 ;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.sec-title {
    position: relative;
    margin-bottom: 30px;
}
.sec-title .sub-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #010d14;
    text-transform: uppercase;
    font-family: Roboto;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.sec-title .sub-text img{
    margin-right: 10px;
}
.sec-title .title {
    font-size: 42px;
    font-weight: 700;
    line-height: 53px;
    color: #010d14;
    margin: 0;
}
.contact-wrap .from-control {
    padding: 12px 17px 12px 17px;
    color: #333333;
    background-color: #E8EAEE;
    border: 1px solid #f1f1f1;
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
    opacity: 1;
}

.readon.more.submit {
    padding: 15px 31px 15px 31px;
    color: #010d14;
    border: 1.5px #333 solid;
    cursor: pointer;
}

.readon.more {
    background: transparent;
    padding: 17px 23px 17px 23px;
    color: #010d14;
    font-weight: 500;
    text-transform: uppercase;
}
.readon.more.submit:hover{
    background: #333;
    color: #f1f1f1;
}

.contact-info{
    color: #333;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.contact-info .info-title h1{
    margin-bottom: 25px;
    color: #1a2b6d;
}

.contact-info .info-detail{
    padding: 20px;
}
.contact-info .info-detail div{
    margin-bottom: 30px;
    position: relative;
    padding-left: 25px;
}
.contact-info .info-detail div::before{
    font-weight: 900;
    font-family: 'Font Awesome 6 Free';
    font-display: block;
    font-size: 20px;
    position: absolute;
    left: -25px;
}
.contact-info .info-detail .info-adresse::before{
    content: "\f3c5";
}
.contact-info .info-detail .info-phone::before{
    content: "\f2a0";
}
.contact-info .info-detail .info-mail::before{
    content: "\f0e0";
}
.contact-info .info-detail .info-social::before{
    content: "\f064";
}

.contact-info .info-detail .info-social a{
    text-decoration: none;
    color: #333;
    margin-right: 20px;
    font-size: 20px;
}

#form-messages{
  background-color: #9fd2a1;
  padding: 5px 10px;
  color: #326b07;
  text-align: center;
  border-radius: 3px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 15px;
}


/* End Contact */

.footer-nav{
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: relative;
}
.footer-nav li {
    z-index: 888;
    width: 100%;
    text-align: center;
}
.footer-nav .bg-nav-footer{
    position: absolute;
    background-color: #333;
    z-index: 777;
    opacity: 1;
    top: 0;
    pointer-events: none;
    height: 100%;
    transition: all .5s ease 0s;
    cursor: pointer;
  }
  .footer-nav li:nth-child(1):hover~.bg-nav-footer {
    width: 128.85px;
    left: 2.5%

  }
  .footer-nav li:nth-child(2):hover~.bg-nav-footer {
    width: 116.29px;
    left: 23.3%;
  }
  .footer-nav li:nth-child(3):hover~.bg-nav-footer {
    width: 166.79px;
    left: 40%;
  }
  .footer-nav li:nth-child(4):hover~.bg-nav-footer {
    width: 150.67px;
    left: 61%;
  }
  .footer-nav li:nth-child(5):hover~.bg-nav-footer {
    width: 121.35px;
    left: 83%;
  }
  .footer-nav li a{
    text-decoration: none;
    color: #333;
    font-size: 15px;
  }
  .footer-nav li:hover a{
    text-decoration: none;
    color: #f1f1f1;

  }
  footer{
    border-top: #333 1px solid;
  }
  footer a{
    text-decoration: none;
  }
  footer a:hover{
    text-decoration: none;
  }

  /*css for alert messages*/

.alert-success{
  z-index: 1100;
  background: #D4EDDA;
  font-size: 18px;
  padding: 20px 40px;
  min-width: 420px;
  position: fixed;
  right: 0;
  top: 10px;
  border-left: 8px solid #3AD66E;
  border-radius: 4px;
}

.alert-error{
  z-index: 1100;
  background: #FFF3CD;
  font-size: 18px;
  padding: 20px 40px;
  min-width: 420px;
  position: fixed;
  right: 0;
  top: 10px;
  border-left: 8px solid #FFA502;
  border-radius: 4px;
}