/* ===== common classes ===== */
body{
    font-family: 'Raleway', sans-serif;
}

main{
    padding-top: 70px;
}

.section-padding{
   padding-top: 70px;
   padding-bottom: 70px;
}

.card{
    border-radius: 10px !important;
}
/* ===== header / navbar ===== */
#header-nav{
z-index: 999999;
}

#header-nav .navbar-brand img{
    height: 44px;
}

/* ===== main section image ===== */
.main-section .main-section-img{
    background-image: url("../img/coming-soon-background.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 100vh;
}

.main-section .media-icon{
    display: inline-block;
    width: 80px;
    height: 80px;
    font-size: 30px;
    padding-left: 5px;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
    transition: 0.3s ease-in-out;
    -webkit-animation: ripple 1s linear infinite;
    animation: ripple 1s linear infinite;
    border: transparent;
    background: #fff;
    color:#dc3545!important;
    cursor: pointer;
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%);
    }
    100% {
        box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgb(50 100 245 / 0%);
    }
  }

.main-section  .media-icon:hover{
    background-color:#dc3545!important;
    color: white !important;
}

/* === feature section === */
#features{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    -webkit-animation: slide 100s linear infinite;
    background: linear-gradient(#dee2e6a6, #adb5bd0d), url(../img/partical-svg.svg);
}

@-webkit-keyframes slide {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -600px 0;
    }
}

#features .card{
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#features .card:hover{
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

#features .baloon-left{
    position:absolute;
    margin-top: 5rem;
    left: 5rem;
}

#features .balon-right{
    position:absolute;
    margin-top: 20rem;
    right: 5rem;
}

#features .balon-left-bottom{
    position:absolute;
    margin-top: 35rem;
    left: 5rem;
}

/* auto movement icons */
#features .icon-effects img {
    -webkit-animation: mover 30s infinite  alternate;
    animation: mover 30s infinite  alternate;
}

@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* === You deserve better business section === */
#better-business ul li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    font-weight: 900;
    margin-right: 10px;
    border: 1px solid #007bff;
    color: #007bff;
    padding: 5px;
    font-size: 10px;
 }

 /* === Pricing section === */

 #price-section ul li::before{
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    font-weight: 400;
    margin-right: 10px;
    color:#007bff;
 }

 #price-section .price-layer-svg svg{
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
 }

 #price-section .price-card-baloon-svg img{
    position: absolute;
    top: 0;
    right: -78px;
    width: 156px;
 }

 #price-section .price-card-elephant-svg img,  #price-section .price-card-flower-svg img{
        height: 180px;
        position: absolute;
        right: 4px;
        top: 4px;
 }

 /* auto movement Price cards Odd/Even */

 /* Odd card */
 #price-section .price-card-odd {
    -webkit-animation: CardmoverOdd 10s infinite  alternate;
    animation: CardmoverOdd 10s infinite  alternate;
}

@-webkit-keyframes CardmoverOdd {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50px); }
}

@keyframes CardmoverOdd {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50px); }
}

/* Even card */
#price-section .price-card-even {
    -webkit-animation: CardmoverEven 10s infinite  alternate;
    animation: CardmoverEven 10s infinite  alternate;
}

@-webkit-keyframes CardmoverEven {
    0% { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

@keyframes CardmoverEven {
    0% { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

/*========= testimonial section ===== */

.client-testimonials .owl-dots {
    text-align: center;
}

  .client-testimonials .owl-dots span {
    position: relative;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: block;
    background: #fff;
    border: 2px solid #007bff;
    margin: 0 5px;
}

  .client-testimonials .owl-dots .active {
    box-shadow: none;
}

.client-testimonials .owl-nav {
    display: none;
}

.client-testimonials .owl-dots .active span {
    background: #007bff;
    box-shadow: none;
    height: 12px;
    width: 12px;
    margin-bottom: -1px;
}

.client-testimonials .card {
    background: #fff;
    box-shadow: 0 8px 30px -7px #c9dff0;
    margin: 0 20px;
    padding: 0 10px;
    border-radius: 20px;
    border: 0;
}

.client-testimonials .card .card-img-top {
    max-width: 100px;
    border-radius: 50%;
    margin: 15px auto 0;
    box-shadow: 0 8px 20px -4px #95abbb;
    width: 100px;
    height: 100px;
}

.client-testimonials .active {
    opacity: 0.5;
    transition: all 0.3s;
}

.client-testimonials .center {
    opacity: 1;
}

.client-testimonials .center .card-img-top {
    max-width: 100%;
    height: 120px;
    width: 120px;

}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    outline: 0;
}

/*========= @media queries section ===== */
@media (min-width: 300px) and (max-width: 767.98px) {
.main-section .display-4{
          font-size: 2.5rem;
}
.media-icon{
    margin-left:-8px;
    margin-top:-14px;
}
}

 @media (min-width: 300px) and (max-width: 1023.98px) {
#features .card:hover{
        transform: none !important;
}

#price-section .price-card-odd, #price-section .price-card-even,  .animated {
        -webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
}
.btn-sm-md-block{
    display: block;
    width: 100%;
}
}

 @media (min-width: 300px) and (max-width: 1198.98px) {
    .main-section .main-section-img{
        min-height: auto !important;
    }
}

 @media (min-width: 1200px) {
    .main-section .main-section-img {
        padding-top: 10%;
    }
}


/* ===== About Page CSS ===== */

/*========= main section ===== */
.main-section-aboutimg{
    background-image: url("../img/aboutus2.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    min-height: auto !important;
}

.main-section-aboutimg .overlay{
    background:black;
	opacity: 0.7;
    min-height:auto !important;
}

.main-section-aboutimg .breadcrumb {
    background:transparent;
}

/*========= aboutus section ===== */
#aboutus .media-icon{
    position: absolute;
    left:43%;
    top:40%;
    width: 80px;
    height: 80px;
    font-size: 30px;
    padding-left: 5px;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
    border: transparent;
    background: #fff;
    color:#dc3545!important;
    cursor: pointer;
}

#aboutus .media-icon:hover{
    background-color:#dc3545!important;
    color: white !important;
}

#aboutus img{
    border-radius: 20px;
    outline: 2px dashed white;
    outline-offset: -20px;
}
/*========= count section ===== */
#count-section{
    background:linear-gradient(-45deg, #292dc2, #0084e9);
}

#count-section hr{
    overflow: visible; /* For IE */
    width:50px;
    border-color: white;
    opacity: 0.5;
}
/*========= Our-team section ===== */
.our-team img{
    transition: all 0.3s ease 0s;
    filter:brightness(100%);
    transition: filter .3s ease;
}

.our-team img:hover{
    filter: brightness(20%);
}

.our-team .team-content{
    width: 93%;
    bottom: 50px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    transition: all 0.3s cubic-bezier(0.5, 0.2,0.1,0.9);
}

.our-team:hover .team-content{
    bottom: 0px;
    opacity: 1;
}