*{
  box-sizing: border-box;
  font-family: 'Geomanist', sans-serif !important;
}
body{
  overflow-x: hidden;
  margin: 0px;
}



a {
    color: inherit;
    text-decoration: none;
}

.hbreak{
  overflow: hidden;
  text-align: center;
}
.hbreak:before, .hbreak:after{
  background-color: #bdbcbc;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.hbreak:before{
  right: 0.5em;
  margin-left: -50%;
}
.hbreak:after{
  left: 0.5em;
  margin-right: -50%;
}

.pc-nav a:hover {
    color: #e31731;
    cursor:pointer;
    text-decoration: none;
}
.header {
  width: 100%;
  background-color: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 2%;
  padding-left: 2%;
  position: absolute;
  z-index: 6;
  margin-top: 10px;
}
.header span{
  display: inline-block;
}
.header img{
  margin-left: 4px;
  filter: invert(93%) sepia(3%) saturate(28%) hue-rotate(340deg) brightness(93%) contrast(92%);
}
.header a{
  display: flex;
}
.header a{
  display: flex;
  color: inherit;
}
nav{
  display: flex;
  justify-content: space-between;
  align-items: center !important;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: transparent;
  position: absolute;
  z-index: 4;
  flex-direction: column;
  left: 50%;
  transform: translate(-50%, 0%);
}
nav img{
  height: 54px;
}
.footer-nav{
  display: flex;
  justify-content: space-between;
  align-items: center !important;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #d7d7d7;
}
.pc-nav{
  margin-top: auto !important;
  margin-bottom: auto !important;
  color: #fff !important;
  padding-left: 0px !important;
  margin-top: 10px !important;
  text-align: center;
  width: 100vw;
}
.pc-nav a{
margin-left: 20px;
margin-right: 20px;
}
.footer-nav-child{
  margin-top: auto !important;
  margin-bottom: auto !important;
  padding-left: 0px;
  padding-right: 0px;
}
.mob-nav{
  display:none;
  height: 45px;
  width: 45px;
}
.hidden-nav img{
  display: none;
}
.hidden-nav ul{
  display: none;
}
#h1{
  margin-top:20px;
  margin-bottom:8px;
  line-height: 100%;
  color: #57555a;
}
.about-preview .con{
    display: flex;
    justify-content: space-between;
}
.con div{
    width: 45%;
    padding-bottom: 20px;
}
.about-preview{
    padding: 10%;
}
.about-preview p, .about-preview div{
    text-align: justify;
}
.grad{
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 2;
  background: linear-gradient( 182deg, rgb(0 0 0 / 90%), transparent 30%,transparent 30%,transparent 30%)
}

.carousel-indicators li{
  cursor: pointer;
}

.carousel-control-prev, .carousel-control-next{
  height: 50%;
  margin: auto;
}
footer{
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin: auto;
  padding-bottom: 8px;
  padding-top: 8px;
  padding-left: 2%;
  padding-right: 2%;
  background-color: #252525;
  color: #fff !important;
}
footer img{
  height: 60px;
}
.footer-left{
  display: flex;
  align-items: center;
}
.footer-left img{
  display:inline-block;
}
.footer-left p{
  margin-top: auto;
  margin-bottom: auto;
  display:inline-block;
  margin-left: 10px;
}
.footer-nav-child img{
  width: 25px;
  height: 25px;
  margin-top: 5px;
}
.footer-nav-child a:hover{
  text-decoration: none;
}
.collection-preview-click{
  text-align: center;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #57555a;
  border: solid 3px #57555a;
}
.collection-preview-click:hover{
  color: #fff;
}
.split-left{
  background-color: #fff;
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.split-right{
  background-color: #e9e9e9;
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.split-right h3, .split-left h3{
  text-align: center;
  color: #57555a;
  padding-left: 10px;
  line-height: 100%;
}

.split-right a{
  background-color: #57555a;
  border: solid 3px #57555a;
}
.split-click{
  border: solid 3px #c9252b;
  background-color: #c9252b;
}

.split p{
    color: #57555a;
}
.map-preview{
  height: 30vw;
  width: 100%;
  background-image: url("image/map-general.webp");
  background-position: center;
  background-size: cover;
  transition: 0.6s;
}
.map-preview:hover{
  background-image: url("image/map-specific.webp");
  transition: 0.6s;
  background-position: center;
}

.split{
  display: flex;
  box-shadow: 1px 2px 5px 0px #000000ad;
  margin-top: 40px;
}
.split-home{
  box-shadow: 1px 2px 5px 0px #000000ad;
}
.split a{
  text-align: center;
  color: #d7d7d7;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right:10px;
}
.grey-section{
  width: 100%;
  text-align: center;
  background-color: #fff;
  padding-top: 1px;
  padding-bottom: 20px;
}
.grey-section h2{
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 20px;
  line-height: 100%;
  color: #57555a;
  text-align: center;
}

.collection-preview{
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.collection-preview div{
  background-color: #c9252b;
  width: 29.25vw;
  height: 14.125vw;
  margin-bottom: 5px;
  transition: box-shadow 1s;
}
.collection-preview div h4{
  color:#57555a;
  font-size: 2rem;
  color: #555a5600;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 1s;
}
.collection-preview div h4:hover{
  color:white;
}
.collection-preview div a{
  text-decoration: none;
}

.collection-preview div:hover{
  box-shadow: inset 0 0 0 1000px #c9252b78;
  /* box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2); */
}

.collection-preview iframe{
  background-color: #c9252b;
  width: 29.25vw;
  height: 16.453125vw;
  margin-bottom: 30px;
}

.gallary-small{
  display: flex;
  flex-wrap: wrap;
}
.gallary-small img{
  width: 20%;
  width: 27%;
    /* margin-top: 15px; */
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  min-width: 100px;
}
.gallery-big{

}
.split-left ul{
  color: #57555a;
  list-style-type: square;
}
.split-left-links{
  margin: auto;
}
.split-left-links a{

}
form{
  color:#57555a;
}
textarea{
  width: 80%;
}
input:last-child{
  color: #d7d7d7;
  background-color: #57555a;
  border: solid 3px #383838;
}
.split-left li{
  font-size: 17px;
}
.split-left ul{
  line-height: 35px;
}
.product-display, .download-display{
  display: flex;
  margin-top: 60px;
  flex-wrap: wrap;
}
.product-display{
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;
}

.download-display{
    
  justify-content: space-around;  
}
.download-display a{
  margin-left: 5vw;
  margin-right: 5vw;
  margin-bottom: 100px;
  font-family: 'Geomanist', sans-serif;
}

.download-display a:hover{
  color:#c9252b;
}
.product-display div{
  width: 29.5vw;
  height: 14.75vw;
}
.product-display a{
  width: 29.5vw;
  height: 14.75vw;
  margin-bottom: 8px;
  margin-right: 0.25vw;
  margin-left: 0.25vw;
}
.product-display :hover{
  color: none;
}
.product-info{
  display: flex;
  min-height: 140px;
}
.product-info-left{
  width: 50%;
  padding-left: 20px;
  margin-top: auto;
  margin-bottom: auto;
}
.product-info-right{
  width: 50%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 130px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.product-info-left img{
  width: 4.5vw;
  max-width:46px;
}
.product-info-right img{
  height: 120px;
}
.product-info-right h3{
  height: fit-content;
  border-left: solid 5px #c9252b;
  padding-left: 5px;
}
.login h1{
  margin-top: 30px;
  text-decoration: underline;
  text-decoration-color: #c9252b;
  padding-bottom: 20px;
}
.login input, .login h1{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align: center;
    color: #57555a;
}
.login{
  width: 80%;
  margin: auto;
}
.login h5{
  text-align: center;
  color: #57555a;
}
.product-display div{
  text-align: left;
  padding: 10px;
}
.product-display div h6{
  background: linear-gradient(90deg, rgb(85 85 85), transparent 50%,transparent 30%,transparent 30%);
  height: fit-content;
  border-left: solid 2px #495057;
  padding-left: 2px;
  color: #dfdfdf;
}
.collection-desc{
  background-color: #c9252b;
  display: flex;
}
.collection-desc-left{
  flex-basis:50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.collection-desc-right{
  flex-basis:50%;
  display: flex;
  position: relative;
  align-items: center;
}
.collection-desc-right img{
  width:50%;
  margin-bottom: 0px;
  bottom: 0px;
  position: absolute;

}
.collection-desc-right p{
  width:30vw;
  padding-right: 20px;
  position: absolute;
  font-family: 'Tajawal', sans-serif;
  font-size: 25px;
  color: #ebebeb;
  right: 0;

}
.collection-desc-left img{
  height: 25vw;
  margin: 20px;
  box-shadow: 3px 3px 14px 2px rgba(0,0,0,0.75);
}
.about-p{
  width: 70%;
  margin: auto;
  text-align: justify;
  line-height: 28px;
  font-size: 20px;
  padding-top: 80px;
  padding-bottom: 80px;
}

.cert{
  width: 300px;
  height: 400px;
  margin-bottom: 20px;
}

.blog-section{
  display: flex;
  justify-content: space-around;
  margin: auto;
  margin-top: 30px;
  flex-wrap: wrap;
}
.blog-square{
  width: 30%;
  max-width: 455px;
  min-width: 400px;
  height: 550px;
  border: 5px solid rgba(164,34,34,0.83);
  box-shadow: 4px 7px 8px 3px #6a1b1b;
  position: relative;
  margin-bottom: 40px;
  margin-right:25px;
  margin-left:25px;
}

.blog-square img{
  width: 100%;
}
.blog-square p{
  width: 80%;
  margin: auto;
  text-align: initial;
}

.blog-square span{
  position: absolute;
  bottom: 3px;
  right: 3px;
}
.blog-square a:hover{
  color: #c9252b;
}
.article-section{
  width:90%;
  max-width: 770px;
  margin: auto;
  margin-bottom: 100px;
}
.article-section img{
  width: 80%;
  box-shadow: 3px 6px 19px 1px #000000;
}
.article-section h1{
  margin-left: 20px;
  margin-top: 20px;
  padding-left: 10px;
  line-height: 100%;
  color: #57555a;
  text-decoration: underline #c9252b;
  margin-top: 60px;
}
.article-section h1, .article-section h2, .article-section h3{
  margin-left: auto !important;
}
.article-section p{
  text-align: left;
}
.other-articles{
  border: none !important;
  text-align: center !important;
  margin-top: 70px !important;
  margin-bottom: 60px !important;
}
.stat{
  background-color: #c9252b;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-top: 20px;
  padding-bottom: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.stat div{
  width: 200px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}
.stat h5{
  margin-bottom: 0px;
}
.project{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  width: 80%;
    margin: auto;
}
.project img{
  /* margin-bottom:20px; */
  margin-left: 10px;
  margin-right: 10px;

}
@media only screen and (max-width: 740px) {
  .collection-desc-right p{
    font-size: 15px;
  }
  .pc-nav{
    display: none;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  nav{
    padding-left: 2%;
    padding-right: 2%;
    width: 100%;
    flex-direction: row;
    margin-top: 35px;
  }

  .mob-nav{
    display:block;
  }
  .mob-nav:hover{
    cursor: pointer;
  }

  .hidden-background{
    height: 100vh;
    z-index: 100;
    width: 0vw;
    position: fixed;
    background-color: #2b2b2b8c;
  }
  .hidden-nav{
    height: 100vh;
    z-index: 101;
    width: 0vw;
    position: fixed;
    background-color: #555555;
    overflow: hidden;
    transition: 0.5s;
    color: #d7d7d7;
    display: flex;
    align-items: center;
    background-color: #c9252b;
  }
  .hidden-nav img{
    width: 40px;
    cursor: pointer;
    display: flex;
  }
  .hidden-nav ul{
    display: flex;
    margin-left:auto;
    margin-right:auto;
    padding-left:0px;
    padding-right:0px;
    list-style: none;
    height: 100vh;
    flex-direction: column;
    justify-content: space-around;
    font-size: 8vw;
    overflow: hidden;
  }
  .hidden-nav li{
    border-left: solid 6px #c9252b;
    padding-left: 10px;
  }
  .hidden-nav a:hover{
    color: #4d4d4d;
    text-decoration: none;
  }
  footer{
    flex-direction: column;
  }
  .about-p{
    width: 90%;
  }
  .product-info {
    display: block;
  }
  .product-info-left{
    width: 80%;
    margin: auto;
    padding: 0px;
    text-align: center;
  }
  .product-info-left h3{
    font-size: 20px;
  }
  .product-info-left img {
    margin-top: 10px;
    min-width: 35px;
  }
  .product-info-right{
    width: 100%;

  }
  .footer-left{
    flex-direction: column;
  }
  .footer-left p{
    text-align: center;
    margin: auto;
  }
  .cert{
    width: 270px;
    height: 360px;
    margin-bottom: 20px;
  }
  .collection-preview div{
    width: 43vw;
    height: 21.5vw;
  }
  .product-display div, .product-display a{
    width: 44vw;
    height: 22vw;
  }
}

@media only screen and (max-width: 600px) {
  nav img{
    height: 45px;
  }

  .carousel-control-prev, .carousel-control-next{
    margin-bottom: 0px;
    margin-top: auto;
  }
  .footer-nav{
    padding-left: 2%;
    padding-right: 2%;
  }
  .pc-nav{
    display: none;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mob-nav{
    display:block;
  }
  .mob-nav:hover{
    cursor: pointer;
  }

  .hidden-background{
    height: 100vh;
    z-index: 100;
    width: 0vw;
    position: fixed;
    background-color: #2b2b2b8c;
  }
  .hidden-nav{
    height: 100vh;
    z-index: 101;
    width: 0vw;
    position: fixed;
    overflow: hidden;
    transition: 0.5s;
    color: #d7d7d7;
    display: flex;
    align-items: center;
    background-color: #c9252b;
  }
  .hidden-nav img{
    width: 40px;
    cursor: pointer;
    display: flex;
  }
  .hidden-nav ul{
    display: flex;
    margin-left:auto;
    margin-right:auto;
    padding-left:0px;
    padding-right:0px;
    list-style: none;
    height: 80vh;
    flex-direction: column;
    justify-content: space-around;
    font-size: 10vw;
    overflow: hidden;
  }
  .split{
    display: block;
  }
  .collection-preview div{
    width: 90vw;
    height: 45vw;
    margin-bottom: 20px;
  }
  .collection-preview {
      justify-content: space-evenly;
      margin-top: 10px;
  }
  .collection-preview iframe {
    width: 80vw;
    height: 48vw;
  }
  .grey-section{
    padding-bottom: 5px;
  }
  .con{
    flex-direction: column;
  }
  .con div{
    width: 100%
  }
  form{
    margin: auto;
  }
  form input{
    width: 100%;
  }
  textarea{
    width: 100%;
  }
  .product-display div, .product-display a{
    width: 90vw;
    height: 45vw;
  }
  .cert{
    width: 270px;
    height: 360px;
    margin-bottom: 20px;
  }
  .blog-square{
    width: 100%;
    min-width: inherit;
  }
  .blog-section{
    width: 100%;
  }
}