@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
:root {
    --primary-font: 'Poppins', sans-serif;
    --h1-size: 4rem;
    --h1-weight: 600;
    --h2-size: 3rem;
    --h2-weight: 600;
    --h3-size: 1.5rem;
    --h3-weight: 600;
    --h4-size: 1.3rem;
    --h4-weight: 600;
    --h5-size: 1.2rem;
    --h5-weight: 600;
    --h6-size: 1rem;
    --h6-weight: 600;
    --p-size: 1rem;
    --p-weight: 400;
    --nav-item-color: #444;
    --nav-hover-color: #2c2e30;
    --nav-toggler-color: #7e8085;
    --primary-color: #f6a71c;
    --primary-color-2: #000000;
    --secondary-color: #666;
    --secondary-color-2: #777;
    --social-color-1: #3b5999;
    --social-color-2: #55acee;
    --social-color-3: #dd4b39;
    --social-color-4: #00b489;
    --white-color: #ffffff;
    --primary-t-color: #222;
    --primary-p-color: #565656;
    --primary-l-color: rgba(0, 0, 0, 0.12);
    --secondary-l-color: rgba(45, 49, 54, 0.09);
    --valid-color: #28a745;
    --invalid-color: #ffa200;
    --primary-bg-color:  #f6a71c;
    --primary-bg-color-2: #ffffff;
    --primary-bg-color-3: rgba(16, 16, 45, 1);
    --nav-bg-color: #d3d3d3;
  }
  
  * {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: var(--primary-font);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--primary-color-2);
  }
  

img{
    max-width: 100%;
}

.logo-warp{
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    text-align: center;
    z-index: 9;
}
.logo-img {
    width: 200px;
    margin: auto;
}

.welcome-area {
    height: 800px;
    z-index: 1;
    position: relative;
}
.welcome-thumb{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
}
.welcome-thumb::before{
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #0000004d;
}
.welcome-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.call-buttons a{
    color: white;    outline: 0;
    display: block;
    border-radius: 34px;
    text-decoration: none;
    font-family: var(--primary-font);
    font-weight: 500;
}
.call-buttons a:hover{
    color: #000;

  
  
}

.welcome-intro span{
    color:  var(--primary-color);
}
.line-hr{
    width: 100px;
    margin: 30px 0 40px;
    border-top: 3px solid  var(--primary-color);
}


.ptb_100 {
    padding: 100px 0;
}
section, .section {
    position: relative;
}
.bg-gray {
    background: #f6f9fe;
}

.discover-text .line-hr {
    margin: 30px 0 30px;
}

.work-area .line-hr {
    margin: 30px auto 30px;
}
.testimonial-content,
.work-content{
    max-width: 13em;
    margin: auto;
}
.single-work ul{
    margin: 0;
    padding: 0;
}
.single-work li{
    display: block;
    margin: auto;
    text-align: center;
    position: relative;
    width: fit-content;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 15px;
    font-family: var(--primary-font);
    font-weight: 400;
    color: gray;
}
.single-work .h3{
    margin: 30px 0;
}

.work-icon{
    max-width: 180px;
    margin: auto;
    
}
.single-work li::before{
    position: absolute;
    left: 0;
    top: 50%;
    content: "";
    width: 10px;
    height: 10px;
    background-color:  var(--primary-color);
    border-radius: 100%;
    transform: translateY(-50%);
}

.testimonial-content .line-hr {
    margin: 30px auto 30px;
}
.testimonial-area .single-testimonial img {
    width: 100px;
    height: 100px;
    border: 1px solid var(--primary-l-color);
    border-radius: 50%;
  }
  
  .testimonial-area .single-testimonial .client-rating {
    color: var(--invalid-color);
  }
  
  .testimonial-area .owl-dots {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  
  @media (max-width: 767px) {
    .testimonial-area .owl-dots {
      bottom: -15px;
    }
  }
  
  .testimonial-area .owl-dots .owl-dot {
    height: 8px;
    width: 8px;
    background-color: var(--primary-l-color);
    border-radius: 50%;
    outline: none;
    margin: 5px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
  }
  
  .testimonial-area .owl-dots .owl-dot.active {
    background-color: var(--primary-color);
    -webkit-box-shadow: 0 1px 5px var(--primary-color);
            box-shadow: 0 1px 5px var(--primary-color);
  }
  
  .h1{
    font-size: 30px;
    margin: 0;
    font-family: var(--primary-font);
    font-weight: bold;
}
 .h2{
    font-size: 25px;
    margin: 0;
    font-family: var(--primary-font);
    font-weight: 600;
}
.h3{
    font-size: 20px;
    margin: 0;
    font-family: var(--primary-font);
    font-weight: bold;
    text-transform: uppercase;
}
.h4{
    font-size: 18px;
    margin: 0;
    font-family: var(--primary-font);
    font-weight: 500;

}
.p{
    font-size: 15px;
    margin: 0;
    font-family: var(--primary-font);
    font-weight: 400;
}



@media (min-width: 768px) {
    .h1{
        font-size: 30px;

    }
     .h2{
        font-size: 25px;

    }
    .h3{
        font-size: 20px;
 
    }
    .h4{
        font-size: 18px;
    
    
    }
    .p{
        font-size: 15px;
       
    }
    .testimonial-content, .work-content {
        max-width: 100%;
        margin: auto;
    }
    
  }

  @media (min-width: 999px) {

    .work-icon {
        max-width: 180px;
        height: 180px;
        margin: auto;
    }
    .work-icon img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .mx-360{
        max-width: 360px;
    }
    .h1{
        font-size: 35px;

    }
     .h2{
        font-size: 30px;

    }
    .h3{
        font-size: 20px;
 
    }
    .h4{
        font-size: 18px;
    
    
    }
    .p{
        font-size: 15px;
       
    }
  }
  .single-scroll-down-animation {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0);
}

  .scroll-down {
    width: 30px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.scroll-down:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 20px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    transform: translateX(-50%);
    background: #fff;
    animation: scrollDown 1.5s ease infinite;
}
.scroll-down:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 6px;
    height: 15px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: #fff;
}

@keyframes scrollDown {
    0% {
      transform: translate(-50%, 0px);
      opacity: 0;
    }
    50% {
      transform: translate(-50%, 8px);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, 16px);
      opacity: 0;
    }
  }
  
  a{
    text-decoration: none;
  }

  .logo {
    width: 195px;
}

@media (min-width: 768px) {
    .logo {
        width: 200px;
    }
}
header nav li {
    display: inline-block;
    font-size: 20px;
}
.rounded-pill1 {
    border-radius: 50rem !important;
    background-color: #FFF;
    color: #000000;
    border: 2px solid #f8f9fa;
    width: 180px;
}
.navbar-dark .navbar-nav .nav-link {
    color: #000000 !important;
    padding: .5rem 1rem;
}
button {
    margin: 10px 10px 10px 0px;
}
.rounded-pill2 {
    border-radius: 50rem !important;
    background-color: #0b3b82;
    border: 2px solid #0b3b82;
    color: #fff;
    width: 180px;
}
.nav-link1 {
    display: block;
    padding: .5rem 1rem;
    color: #ffffff !important;
    text-decoration: none !important;
}

.nav-link3 {
    display: block;
    padding: .5rem 1rem;
    color: #ffffff !important;
    text-decoration: none !important
}
.rounded-pill3 {
    border-radius: 50rem !important;
    background-color: #F6A71C;
    color: #fff !important;
    border: 2px solid #f8f9fa;
    width: 180px;
}
.bg-bar {
    background: url(https://www.arabiknow.com/images/bg-headv2.png);
    background-size: 100% 100%;
    padding: 0%;
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}
@media (min-width: 992px) {
    .nav-link1 {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
    .nav-link3 {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}



.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, .5);
    background: rgb(243,43,86);
    border-color: rgba(255, 255, 255, .1);
}