html{
  scroll-behavior: smooth;
}
section {
  /*height: 100vh;*/
  color: #fff;
}
.btn-custom{
  color: #fff;
  font: 20px/20px 'Tajawal', sans-serif;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 10px 30px;
  transition: all 0.4s ease;
}
.btn-custom:hover{
  background-color: #fff;
  color: #000;
}
.gradient-bg {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}
#intro {
    background-image: url(../img/bg-principal.png);
    background-size: cover;
    background-position: center center;
    height: 100vh;
}

#why {
    background-image: url(../img/bg-02.png);
    background-size: cover;
    background-position: center center;
}

#management {
    background-image: url(../img/bg-03.png);
    background-size: cover;
    background-position: center center;
}

.logo-bg{
  background: #000 url(../img/bgx.png) no-repeat center center;
  background-size: 60%;
}
ul{
  list-style: none;
  padding-left: 0;
}

/*Header*/
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
.navbar-brand {
  margin: 0 auto 0;
  padding-left: 79px;
}
.navbar-brand img {
  width: 150px;
}
/*Menu*/
.navbar-light .navbar-toggler {
  border: none !important;
  outline: none !important;
}
#nav-icon1 {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
#nav-icon1 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
  top: 4px;
}
#nav-icon1 span:nth-child(2) {
  top: 16px;
}
#nav-icon1 span:nth-child(3) {
  top: 28px;
}
#nav-icon1.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
#nav-icon1.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.navbar-light .navbar-nav .nav-link {
  color: #cccccc;
  font: 22px "Tajawal", sans-serif;
  text-transform: uppercase;
  padding-bottom: 0;
  transition: all 0.4s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:active {
  color: #fff;
}

/*Section One*/

.carousel h5 {
    font: 500 60px/60px "Tajawal", sans-serif;
    height: 126px;
    display: flex;
    align-items: center;
    margin: 0;
    justify-content: center;
}
.carousel .btn-custom{
}


/*Contact Section*/
section:not(#intro) .container{
  display: flex;
  align-items: center;
}
#contact h2{
  font: 500 70px/70px 'Tajawal', sans-serif;
  margin-bottom: 30px;
}
#contact p{
  margin-bottom: 30px;
  font: 36px/36px 'Tajawal', sans-serif;
}
input.form-control{
  background-color: transparent;
  border: 2px solid #FFF;
  border-radius: 0;
  margin-bottom: 20px;
  height: 50px;
  color: #fff;
  font-family: 'Tajawal', sans-serif;
}
.form-control:focus{
  background-color: transparent;
  border-color: #fff;
  box-shadow: none;
  color: #fff;
}
.form-control::-webkit-input-placeholder{
  color: #FFf;
  font-family: 'Tajawal', sans-serif;
}
.form-control::-moz-placeholder{
  color: #FFf;
  font-family: 'Tajawal', sans-serif;
}
.form-control[type=number]::-webkit-inner-spin-button{
  appearance: none;
}
.form-control[type=number]{
  -moz-appearance: textfield;
}
textarea.form-control{
  background-color: transparent;
  border: 2px solid #FFF;
  border-radius: 0;
  resize: none;
  margin-bottom: 20px;
}

/*Why section*/
#why,
#items{
  padding: 150px 0;
  background-color: rgba(0, 0, 0, 0.9); display: flex; align-items: center;
}
#why .col-md-6{
  display: flex;
}
#why .square{
  border: 2px solid #fff;
  padding: 30px 30px 10px 30px;
  transition: all 0.4s ease;
  flex: 1;
}
#why .square:hover{
  background-color: #FFF;
}
#why .square:hover h3,
#why .square:hover li{
  color: #000;
}
#why h3{
  font: 500 35px/35px 'Tajawal', sans-serif;
  text-align: center;
  margin-bottom: 30px;
}
#why li,
#about li{
  position: relative;
  padding-left: 20px;
  font: 18px 'Tajawal', sans-serif;
  margin-bottom: 10px;
}
#why li::before,
#about li::before{
  position: absolute;
  left: 0;
  top: 0;
  content: '\2713';
}

/*Items Section*/
#items{
  background-color: #000; background-size: 50%
}
section#items .container{
  display: block;
}
#items h2{
    text-align: center;
    margin-bottom: 75px;
    font: 500 50px/50px 'Tajawal', Sans-serif;
}
#items .circle{
  border-radius: 50%;
  height: 125px;
  width: 125px;
  text-align: center;
display: flex; justify-content: center; align-items: center; border: 2px solid #fff;
  margin: 0 auto 20px;
}
#items img{
  width: 70px;
}
#items .circle ~ p{
  text-align: center;
  margin-bottom: 12px;
}
#items .container > p{
  margin-top: 20px;
  text-align: center;
  font: 21px/24px 'Tajawal', sans-serif;
}

/*How Section*/
#how h2{
  text-align: center;
    margin-bottom: 75px;
    font: 500 50px/50px 'Tajawal', Sans-serif;
}
#how .row{
  flex-wrap: nowrap;
}
#carouselHow{
  position: relative;
  margin-top: 0;
}
#carouselHow .carousel-control-prev{
  left: -10%;
}
#carouselHow .carousel-control-next{
  right: -10%;
}
.globes{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.globe{
  border: 4px solid #fff;
  border-radius: 80px;
  padding: 20px;
  text-align: center;
}
.globe h4{
  font: 900 20px 'tajawal', sans-serif;
}
.globe p{
  font: 500 16px 'tajawal', sans-serif;
}
.line{
  height: 4px;
}
.carousel-item-1,
.carousel-item-3{
  background: url(../img/linea_simple.svg) no-repeat center;
  background-size: 30px;
}
.carousel-item-2 {
  background: url(../img/lineas.svg) no-repeat center;
  background-size: 100% 150px;
}
.carousel-item-2 p{
  text-align: left;
}
.carousel-item-2 .row .globe,
.carousel-item-2 .row .text{
  margin-top: 30px;
}
.carousel-item-3{
  background-position: center 40px;
}
.carousel-item-4 .globe:first-of-type{
  margin-bottom: 100px;
}
.carousel-item-4 .text{
  text-align: left;
}
.carousel-item-4 .text:first-of-type{
  margin-top: 20px;
  margin-bottom: 90px;
}
.carousel-item-5 .text:first-of-type{
  margin: 50px 0;
}
.card.card-body { 
    background-color: transparent;
    text-align: center;
    padding: 0;
    margin-bottom: 15px;
}

/*Management Section*/
#management{
  background-color: #000; display: flex; align-items: center; padding: 150px 0;
}
#management .text{
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
#management h2,
#testimonials h2{
  margin-bottom: 30px;
  font: 500 50px/50px 'Tajawal', Sans-serif;
}
#management p{
  font: 20px/25px 'Tajawal', Sans-serif;
}

/*Testimonial Section*/
#testimonials{
  padding: 150px 0; display: flex; align-items: center
}
#contact {     
    display: flex;
    align-items: center;
    padding: 150px 0;
    background-image: none;
    background-color: #242424
}

#carouselTestimonial{
  margin-top: 30px;
}
.rectangle{
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  border: 2px solid #fff;
  padding: 50px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rectangle img{
  position: absolute;
  width: 50px;
}
.rectangle img:first-of-type{
  left: -5px;
  top: 30px;
}
.rectangle img:last-of-type{
  right: -5px;
  bottom: 30px;
}
#testimonials p{
  font: 500 16px 'Tajawal', sans-serif;
}

/*About Section*/
#about,
#how{
    padding: 150px 0;
    display: flex; align-items: center;
}
section#about .container{
  display: block;
}
#about { padding: 0 0 150px 0; background-image: none; text-align: center}
#about h2{
    margin-bottom: 30px;
    font: 500 50px/50px 'Tajawal', Sans-serif;
}
#about .container > p{
  text-align: center;
  margin-bottom: 50px;
}
#about .col-md-6 h3{
  font: 700 28px 'Tajawal', sans-serif;
}
#about .col-md-6 p{
  font: 500 18px 'Tajawal', sans-serif;
}
#about .col-md-12{
  margin-top: 50px;
}
#about .col-md-12 > p{
  text-align: center;
  font: 28px 'Tajawal', sans-serif;
  margin-bottom: 0;
}

/*Footer*/
footer{
  color: #fff;
  padding: 30px 0 0;
  background: #3C3C3B url(../img/footer-bg.png) no-repeat center;
  background-size: auto 80%;
}
footer h4{
  font: 700 24px 'Tajawal', sans-serif;
  margin-bottom: 20px;
}
.sitemap{
  columns: 3;
}
/*.sitemap li{
  margin-bottom: 20px;
}*/
.sitemap li a{
  color: #fff;
  font: 16px 'Tajawal', sans-serif;
}
.social-share{
  display: flex; margin-top: 53px;
}
.social-share a{
  width: 30px;
  margin-right: 10px;
}
.bottom-bar{
  padding: 15px;
  background-color: #000;
  text-align: center;
  margin: 20px 0 0;
  font: 12px 'Tajawal', sans-serif;
}

#carouselTestimonial img { width: 650px }

/*Media queries*/
@media screen and (max-width: 767px){
    
    #carouselTestimonial img { width: 100% }
  header{
    position: absolute;
  }
  .navbar-light .navbar-brand{
    padding-left: 0;
    margin: 0 30px 0 0;
  }
  section:not(#intro) .container{
    padding-top: 50px;
  }
  .carousel h5 {
    margin-bottom: 30px;
    font: 500 24px/30px "Tajawal", sans-serif; height: 60px; 
  }
  #contact{
    height: auto;
  }
  #contact .row,
  #why .row{
    width: auto !important;
  }
  #contact h2{
    font: 500 50px/50px 'Tajawal', sans-serif
  }
  #contact p{
    font: 26px/26px 'Tajawal', sans-serif;
  }
  #contact .btn-custom{
    margin-bottom: 30px;
  }
  #why .col-md-6:first-of-type .square{
    margin-bottom: 30px;
  }
  #how .row{
    flex-wrap: wrap;
  }
  .globe{
    margin-bottom: 20px;
  }
  .carousel-item-1,
  .carousel-item-2, 
  .carousel-item-3{
    background: transparent;
  }
  .carousel-control-next, 
  .carousel-control-prev{
    display: none;
  }
  .carousel-item-4 img,
  .carousel-item-5 img{
   display: none;
  }
  .carousel-item-2 .row .globe,
  .carousel-item-2 .row .text{
    margin-top: 0;
  }
  .carousel-item-4 h4{
    margin-bottom: 20px;
  }
  .carousel-item-4 .globe:first-of-type{
    margin-bottom: 20px;
  }
  #management div.container,
  #testimonials div.container{
    padding-top: 0;
  }
  
  .rectangle{
    min-height: 380px;
  }
  #about img{
    margin-bottom: 30px;
  }
  .sitemap{
    columns: 2;
  }
}
@media screen and (max-width: 640px){
    
    #intro { padding: 120px 0}
    #contact { padding: 0}
    #why { padding: 0}
    #items { padding: 0}
    #how { padding: 0 0 70px 0}
    #management { padding: 70px 0; background-color: #242424}
    #testimonials { padding: 70px 0}
    #about { padding: 0 0 70px 0;}
    
    #items .circle {
        height: 120px;
        width: 120px;
        line-height: 120px;
    }
    #items img { width: 70px;}
    
    .carousel { margin-top: 20px;}
    #carouselHow2 { min-height: 500px;}
    
    .navbar-brand img {
        width: 130px;
    }
    .navbar { padding: 0}
    
    #how h2 {
        margin-bottom: 40px;
    }
    .social-share{
   margin-top: 0;
}
}