:root{
    --primary: #ff6700;
    --dark-gray: #0e0e0e; 
    --white:#ffffff;
}

@font-face {
    font-family: 'ubuntubold';
    src: url('../fonts/ubuntu-bold-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ubuntulight';
    src: url('../fonts/ubuntu-light-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Medium.woff2') format('woff2'),
        url('../fonts/Ubuntu-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



/* Typography */
body{
    font-family: 'ubuntulight';
    font-size: 14px;
    line-height: 1.8;
    color: #333333;
}
h1, h2, h3, h4, h5, h6, .btn{
    font-family: 'ubuntubold';
}
h1 {
    font-size: 2.5rem;
    
}
h2 {
    font-size: 44px;
}
h3 {
    font-size: 34px;
}
h4 {
    font-size: 24px;
}

/* Helper Classes*/
.bg-black-w-opacity{
    background-color: rgba(0, 0, 0, .7);
}
.color-primary {
    color: var(--primary);
}
.color-light {
    color: var(--white);
}
.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* Base Styling*/
.btn{
    border-radius: 0;
}
.btn-primary, 
.btn-primary:link, 
.btn-primary:visited {
    background: rgb(255,103,0);
    background: linear-gradient(100deg, rgba(255,103,0,1) 0%, rgba(207,86,3,1) 100%);
    border-color: var(--primary);
}
.btn-primary:hover, 
.btn-primary:active, 
.btn-primary:focus {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray);
}

/* Backgrounds will cover all the section
* --------------------------------------- */
.section{
    background-size: cover;
    background-position: bottom;
}
.slide{
    background-size: cover;
    background-position: bottom;
}

/* Defining each section background and styles
* --------------------------------------- */
#section-1{
    background-image: url(../img/bg/section-1-bg.jpg);
}
#section2{
    background-image: url(../img/bg/section-2.jpg);
}
#section3{
    background-image: url(../img/bg/section-3-bg.jpg);
}
#section4{
    background-image: url(../img/bg/section-4-bg.jpg);
}
#section5{
    background-image: url(../img/bg/testimonial-bg.jpg);
}
#section6{
    background-image: url(../img/bg/section-6-bg.jpg);
}
#section7{
    background-image: url(../img/bg/section-7-bg.jpg);
}

span.navbar-icon {
    background-color: rgba(220,220,220,.5);
    padding: 15px 20px;
    border-radius: 100%;
    cursor: pointer;
}
span.navbar-icon:hover{
    background-color: var(--primary);
}
span.navbar-icon i{
    font-size: 25px;
}
span.navbar-icon:hover i{
    color: var(--white);
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
  }
  
  .overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .overlay a:hover, .overlay a:focus {
    color: var(--primary);
  }
  
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }


  #fp-nav ul li, 
  .fp-slidesNav ul li {
    width: 60px;
    height: 40px;
    background-color: rgba(220,220,220,.8);
    margin: 0;
    counter-increment: slidesCounter;
    font-weight: bold;
}
#fp-nav ul li a span, 
.fp-slidesNav ul li a span{
   color: #333; 
}
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span{
   color: #fff; 
}

#fp-nav ul li a span:before{
    content: counter(slidesCounter, decimal-leading-zero);
}
#fp-nav ul li a span, .fp-slidesNav ul li a span, 
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span, 
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
    width: 0;
    height: 0;
    margin: 0;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
    left: 45%;
    top: 20%;
}
#fp-nav.fp-right {
    right: 0px;
}
#fp-nav ul li a.active {
    background: var(--primary);
    transition: all ease-in .35s;
}
#fp-nav ul li a.active span {
    background: var(--white);
    transition: all ease-in .35s;
}





.hotspot-wrapper {
    top: 2em;
}


.offer-box {
    background-color: rgba(255,255,255,.9);
}
.offer-box:hover {
    background-color: rgba(0,0,0,.9);
    color: #fff;
}

.offer-box img {
    max-width: 150px;
}
.offer-box i {
    font-size: 20px;
}
.offer-btn-wrap {
    margin-right: -2.5em;
}
.offer-box .btn{
    border-right: 3px solid #fff;
}
.offer-box .btn-primary:hover, 
.offer-box .btn-primary:active, 
.offer-box .btn-primary:focus {
    background-color: var(--primary);
    border-color: var(--primary);
}

.clients img{
    margin-bottom: 2em;
}
.testimonials-wrap {
    /* background-image: url('../img/bg/testimonial-bg.jpg'); */
    /* border: 10px solid #fff; */
}
.testimonials p {
    font-weight: 600;
}


.testimonials.owl-theme .owl-nav {
    text-align: right;
}
body .owl-carousel .owl-nav button.owl-next, 
body .owl-carousel .owl-nav button.owl-prev {
    padding: 6px 16px !important;
    border-radius: 0;
    margin: 0;
    background-color: #ff6700;
    color: #fff;
    border: 1px solid #fff;
}
body .owl-carousel .owl-nav button.owl-next:hover, 
body .owl-carousel .owl-nav button.owl-prev:hover {
    background-color: var(--primary);
}
body .owl-carousel .owl-nav button.owl-next:focus, 
body .owl-carousel .owl-nav button.owl-prev:focus {
    outline: none;
}

ul.user-pins li {
    position: absolute;
    cursor: pointer;
}
ul.user-pins li:first-child {
    top: 5%;
    left: 15%;
}
ul.user-pins li:nth-child(2) {
    top: 20%;
    left: 50%;
}
ul.user-pins li:nth-child(3) {
    top: 60%;
    left: 80%;
}
ul.user-pins li:nth-child(4) {
    top: 10%;
    left: 70%;
}
ul.user-pins li:nth-child(5) {
    top: 50%;
    left: 25%;
}

.gallery-img-wrap{
    box-shadow: -2px 2px 10px 0px rgba(#fff, 0.4);
}
.gallery-img{
    transition: all 0.3s ease-in-out;
    opacity: .8;   
}

.gallery-img:hover{
    transform: scale(1.05);
    opacity: 1;
}

#section7 h3 {
    position: absolute;
    top: 20%;
}
#team img {
    max-width: 400px;
}
#team span.designation, 
#team p {
    font-family: 'Ubuntu';
    color: #000000;
}
#team.owl-theme .owl-nav {
    text-align: left;
    /* margin-top: -5%; */
    z-index: 100;
}
#mast-footer {
    background-color: #0e0e0e;
}

.contact-block i {
    background: var(--primary);
    padding: .5em;
    border-radius: 50%;
    color: var(--white);
}
.contact-block a:link, 
.contact-block a:visited {
    color: #ffffff;
}

input.form-control, 
textarea.form-control {
    background-color: #272727;
    border-color: #272727;
    border-radius: 0;
    color: #707070;
    font-size: 14px;
    padding: .675rem 1.5rem;
    font-family: 'Ubuntu';
}
.contact-form input.btn {
    padding: .375rem 2rem;
}
.contact-form input.btn:hover {
    border-color: var(--primary);
}  
.copyright-wrapper {
    background: linear-gradient(to right, var(--primary) 0%,var(--primary) 60%,#0e0e0e 50%,#0e0e0e 100%);
    padding: 1.5em 0 0 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    /* margin-top: 5.1em; */
}
.copyright-wrapper li i {
    background: var(--white);
    padding: 0.6em 0.7em;
    border-radius: 50%;
    color: var(--primary);
}
@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}

@media screen and (max-width: 992px) {
    .fixed-top {
        position: relative;
        top: auto;
    }
    span.navbar-icon{
        position: fixed;
        right: 1rem;
    }
    div#fp-nav{
        display: none;
    }
    #section-1{
        padding: 100px 0 !important;        
    }
    ul.user-pins li img {
        width: 50px;
    }
    #section7 h3 {
        position: inherit;
    }   
}

@media screen and (max-width: 736px) {
    
    a.navbar-brand{
        width: 70%;
    }
    span.navbar-icon {
        background-color: var(--primary);
        padding: 10px 15px;
    }
    span.navbar-icon i {
        font-size: 20px;
        color: #fff;
        line-height: 1.5;
    }
    .text-xs-left{
        text-align: left !important;
    }
    .text-xs-center{
        text-align: center !important;
    }
   
    
    .copyright-wrapper{
        position: inherit;
        background: var(--primary)
    }
    
}
@media screen and (max-width: 320px) {
    h1 {
        font-size: 2.3rem;
    }
    h2 {
        font-size: 36px;
    }
    ul.user-pins li img {
        width: 40px;
    }
}


.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }