/* Use style sheet */

@import url('../vendor/bootstrap/css/bootstrap.min.css');
@import url(../vendor/fontawesome-free/css/all.min.css);
@import url(../vendor/hosting-flat-icon/flaticon.css);
@import url(input-field.css);
@import url(owl.carousel.min.css);
@import url(owl.theme.default.min.css);
@import url(venobox.css);
@import url(animate.css);
@import url(aos.css);
@import url(meanmenu.min.css);

/***

/*-----------------------------------------------
            1. General Style
-------------------------------------------------*/

  * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
  }

  body,
  html {
      margin: 0;
      padding:0; 
  }

body {
    background: #fff none repeat scroll;
    font-size: 16px;
    font-weight: normal;
}

a:hover {
}
/* Theme All Transitions
------------------------------- */
a, #mainNav, .theme-button, .owl-carousel button.owl-dot, .widget-recent-posts ul li a p:hover, #content .share-box > button:hover, .service-page-pricing-table-area .pricing-details-wrap table tr,
.pricing-details-wrap table tbody tr td:first-child, .pricing-details-wrap table tbody tr td, .contact-area-2 .subm-btn.theme-button input, .home-2 .scroll-to-bottom a, .widget-recent-posts ul li a p{
    transition: all .5s ease-in-out;
}

.slow-transition, .theme-button, .testimonial_slide_nav .testi_prev, .testimonial_slide_nav .testi_next, .testi_prev, .testi_next, #scroll{
    transition: all .7s ease-in-out;
}

  ul li {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }

  ul {
      margin: 0;
      padding: 0;
  }

  a,
  a > * {
      outline: none;
      cursor: pointer;
      text-decoration: none;
  }

  a:hover {
      text-decoration: none;
  }

  /*::selection {*/
      /*background-color: #93ebfb;*/
  /*}*/
  img::selection {
    background: transparent;
  }
  .page-link:focus {
    box-shadow: none;
  }

  /*----Form Control Reset CSS----*/

.form-control {
    border-radius: 5px;
    border: none;
    background-color: #fff;
    height: 50px;
    color: #777c87;
}
  .form-control:focus {
      background-color: #fff;
      border-color: #dddddd;
      box-shadow: none;
  }
  .form-control::placeholder {
      color: #a0a3aa;
  }

/*------------------------------------------
            2.  Typography
-------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:  sans-serif;
    font-weight: 700;
    margin: 0;
    color: #080245;
}
figure {
    margin: 0 0 0;
}

/*--------------------------------
            2.1 Theme Color
-----------------------------------*/

:root{
    --white-color: #fff;
    --default-border-radious-5: 5px;
    --default-deep-heading-color: #080245;
    --home-1-color-blue: #0a8aff;
    --home-1-color-cyan: #2cd4d9;
    --home-1-default-gradient: linear-gradient(to right, rgba(42, 22, 155, 1) 39%, rgba(41, 137, 216, 1) 78%, rgba(44, 212, 217, 1) 95%);
    --home-2-bg-gradient: linear-gradient(to right, #0800B5 0%, #f700f1 100%);
    --border-radious-5: 5px;
    --home-2-border-radious-50: 50%;
    --home-2-border-radious-25: 25px;
    --home-2-button-gradient-color1: linear-gradient(135deg, #1633ff 0%, #ff007e 100%);
    --home-2-button-gradient-color2: linear-gradient(135deg, #ff007e 0%, #1633ff 100%);
    --home-2-color-blue: #1633ff;
    --home-2-color-pink: #ff007e;
    --home-3-color-orange: #f22328;
    --home-3-color-gold: #fe9e1f;
    --home-3-default-gradiant-color1: linear-gradient(135deg, #f22328 0%, #fe9e1f 100%);
    --home-3-default-gradiant-color2: linear-gradient(135deg, #fe9e1f 0%, #f22328 100%);
}

/*---- Home Version 1 Color CSS Start*---- */
.bg-blue{
    background-color: #060297;
}
.color-blue, .pricing-table-box.active a:hover, .faq-page-area #accordion6 .panel-title a, .faq-page-area #accordion7 .panel-title a,
.contact-page-address-wrap div:nth-child(2) .contact_us_box ul li a:hover{
    color: #060297;
}
.default-gradiant-bg, .home-banner-area, header.page-banner-area, .about-media-box::before {
    background: var(--home-1-default-gradient);
}
/*.different-bg, .features-area, .counter-area, .client-logo-slider-area, .services-area, .our-speciality-area{
    background-color: #f5f6fa;
}*/
.light-blue-color, .widget-popular-tags ul li a:hover, .chat-bot-box{
    background-color: var(--home-1-color-blue);
}
.color-light, .hero-area-content p, .count-content, #accordion6 .panel-title a
, .copyright-text p a, .footer-social-links li a:hover, .call-to-content h2,
.call-to-action-area .call-to-content h2, .pricing-table-box a:hover, .breadcrumb li.breadcrumb-item a,  .service-price-btn > a:hover, .pagination-area li:hover .page-link, .top-nav ul li a:hover, .home-2  .scroll-to-bottom a:hover{
    color: var(--home-1-color-cyan);
}
.primary-font-color, .pricing-table-box a, .why-choose-content-box h4, .why-choose-inner-content i, .speciality-content i, .speciality-content p span, .testimonial-slide-box h5,
.footer-links-list li a:hover, .footer-social-links li a:hover, .counter-number, .widget-categories ul li a:hover, .widget-recent-posts ul li a:hover p,
#content .share-box > button:hover, .service-price-btn > a, .pagination-area .page-link, .contact_us_box_list li a:hover, .footer-logo p a:hover{
    color: var(--home-1-color-blue);
}
.bg-white, .copyright-area, .single-blog-post, .our-speciality-area .our-speciality-content-wrap, .all-blog-posts-area, .services-page-area-2, .single-blog-post, .pricing-details-wrap, .pagination-area .page-link{
     background-color: var(--white-color);
 }
.color-white , .hero-area-content h1, .counter-box i,
.faq-area h2.section-heading, .footer-widget h4, .copyright-text p, .footer-social-links li a, .copyright-text p a:hover, .call-to-left, .call-to-action-area .call-to-content h2 > span, .scroll-to-bottom a,
.footer-newsletter h3, h1.header-caption-heading, .widget-popular-tags ul li a:hover, .subm-btn.theme-button input, .top-nav ul li a, .chat-bot-box, .chat-bot-box:hover, .contact-page-address-wrap div:nth-child(2) .contact_us_box,
.contact-page-address-wrap div:nth-child(2) .contact_us_box h4, .contact-page-address-wrap div:nth-child(2) .contact_us_box ul li a, .footer-logo p a{
    color: var(--white-color);
}
.footer-links-list li a, .footer-logo p{
    color: #f5f6fa;
}
.border-white{
    border: 1px solid var(--white-color);
}
.primary-title-color, .faq-area.faq-page-area h2.section-heading{
    color: #080245;
}
.bg-dark, .reviews-slider-4 .single-review-slide-box{
    background-color: #21252e;
}
.color-dark, .testimonial-slide-box p, .domain-name span{
    color: #21252e;
}
.light-gray-color, .single-blog-content h6, .single-blog-content h6 > a, .faq-page-area #accordion6 .panel-body p, .faq-page-area #accordion7 .panel-body p,
.contact_us_box_list li a{
    color: #777c87;
}

/*---- Home Version 1 Color CSS End*---- */

/*---- Home Version 2 Color CSS Start*---- */
.home-2-common-button-before-bg-color, .home-2 .theme-button::before, .home-2-banner-area .theme-button::before, .home-2-domain-search-area .domain-search-wrapper form button.theme-button::before{
    background: var(--home-2-button-gradient-color1);
}

.home-2-common-button-after-bg-color, .home-2 .theme-button::after, .home-2-banner-area .theme-button::after, .home-2-domain-search-area .domain-search-wrapper form button.theme-button::after{
    background: var(--home-2-button-gradient-color2);
}

.home-2-common-border-radius-25, .home-2-domain-search-area .domain-search-wrapper form, .home-2-domain-search-area .domain-search-custom-placeholder{
    border-radius: var(--home-2-border-radious-25);
}

.home-2-common-border-radius-50, .home-2 .theme-button, .home-2 .theme-button::after, .home-2 .theme-button::before, .home-2-banner-area .theme-button, .home-2-banner-area .theme-button::after, .home-2-banner-area .theme-button::before, .home-2-domain-search-area .domain-search-wrapper form button.theme-button,
.home-2-domain-search-area .domain-search-wrapper form button.theme-button::before,
.home-2-domain-search-area .domain-search-wrapper form button.theme-button::after, .home-2 #scroll{
    border-radius: var(--home-2-border-radious-50);
}
.home-2 a:hover {
    color: var(--home-2-color-pink);
}
/*---- Home Version 2 Color CSS End*---- */


/*----- Blog Page Bg/Color CSS -----*/
.blog-sidebar-color, .widget ul li a, .widget-categories ul li a, .widget-recent-posts ul li a p{
    color: #4f535b;
}
/*--------------------------------
    2.3 Theme Font Family, Font Size
-----------------------------------*/
.font-nunito, .contact-form-wrapper form label, .widget-recent-posts ul li a p, .widget ul li a{
    font-family: 'Nunito', sans-serif;
}
.font-weight-light{
     font-weight: 300;
 }
.font-weight-normal, .single-blog-content h6, .single-blog-content h6 > a{
    font-weight: 400;
}
.font-semi-bold, .widget-recent-posts ul li a p > span, .widget ul li a, .pricing-details-wrap table tbody tr td:first-child, .pricing-table-box-price,
.service-price-btn > a{
    font-weight: 500;
}
.font-w-600, .counter-number{
    font-weight: 600;
}
.font-bold, .pricing-table-box a, .single-service-content a, .single-blog-content > a, .speciality-content p span, .domain-name span, .subm-btn.theme-button input, .top-nav ul li a, .contact-page-address-wrap div:nth-child(2) .contact_us_box{
     font-weight: 700;
 }
.font-50, .hero-area-content h1, h1.header-caption-heading{
    font-size: 50px;
}
.font-18, h5.small-heading, .blog-content-with-media-title, p.section-subheading{
    font-size: 18px;
}
.font-17, #accordion6 .panel-title, #accordion7 .panel-title{
    font-size: 17px;
}
.font-14, .widget-search .form-inline > button > i, .widget-recent-posts ul li a p > span, .single-blog-content h6, .single-blog-content h6 i, .top-nav ul li a, .login-yet, .home-2 .theme-button i::before, .copyright-text > p, .footer-social-links li a{
    font-size: 14px;
}
/*--------------------------------
    2.4 Theme Margin and Padding
-----------------------------------*/
.mb-15, .why-choose-inner-content, .speciality-content p span, .footer-widget h4 {
    margin-bottom: 15px;
}
.mb-30, .single-blog-post{
    margin-bottom: 30px;
}

/*--------------------------------
   2.4 Smart-Host Template Default CSS
-----------------------------------*/

/*----Template Main Section ----*/

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}
.section-title-area {
    text-align: center;
}
h2.section-heading {
    font-size: 46px;
    margin-bottom: 15px;
    line-height: 36px;
}
h2.section-heading > span {
    height: 2px;
    width: 80px;
    background: linear-gradient(to right, rgb(42, 22, 155) 10%, rgb(41, 137, 216) 50%, rgb(44, 212, 217) 95%);
    margin: 20px auto;
}
p.section-subheading {
    width: 53%;
    margin: 18px auto 50px;
}

section{
    padding: 0;
    position: relative;
    z-index: 9;
}
.default-overflow-hidden, .faq-area, .our-speciality-area, .team-area, .all-blog-posts-area, .pricing-table-area, .features-area, .why-choose-us-area, .login-page-area{
    overflow-x:hidden;
}
.section-overlay{
    height: 100%;
    width: 100%;
}
.page-banner-area .section-overlay {
    background-color: rgba(0,0,0,.1);
}

.all-section-after::after{
    font-family: 'Nunito', sans-serif;
    position: absolute;
    color: #f7f5f8;
    font-size: 200px;
    right: 26%;
    top: 47px;
    font-weight: 900;
    z-index: -1;
}
.padding-zero{
    padding: 0 0;
}
.border-radius-5, .single-team, .about-media-box {
    border-radius: 5px;
}
/*Flat Icon Default Settings*/
[class^="flaticon-"]::before, [class*=" flaticon-"]::before, [class^="flaticon-"]::after, [class*=" flaticon-"]::after {
    margin-left: 0;
}
.text-center, .count-content, .counter-box, .pricing-details-wrap table tr td, .service-pricing-item{
    text-align: center;
}

/*-------Page Banner Area CSS--------*/
.page-banner-area #pink-side-bubble-1 {
    left: -350px;
    width: 400px;
}
.page-banner-area #pink-side-bubble-2{
    left: -232px;
    top: 140px;
    width: 300px;
}
.page-banner-area #blue-side-bubble-1{
    right: -141px;
    bottom: 212px;
    width: 380px;
}
/*-------Page Banner Area CSS--------*/

/*--------------------------------
   2.5 Defaul Image Overlay CSS
-----------------------------------*/


/*------------------------------------------
            2.  Typography End
-------------------------------------------*/

/*--------------------------------------------
            3. Button Style
---------------------------------------------*/
.btn{
  padding: 0;
}
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}
button{
    background-color: transparent;
}
button:focus {
    outline: 0;
}
/*Slider Default Button CSS*/
  .testi_prev, .testi_next {
      cursor: pointer;
      line-height: 39px;
      position: absolute;
      z-index: 9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
/*Common Slier Dot CSS*/
.owl-dots {
    text-align: center;
    display: block !important;
}
.owl-carousel button.owl-dot {
    background-color: #dee5ec;
    display: inline-block;
    height: 15px;
    margin: 0 8px;
    width: 15px;
    border-radius: 50%;
}
.owl-dot.active {
    background-color: #4cbcf3 !important;
    box-shadow: 0 0 0 6px rgba(76,188,243,.2);
}

/*-----Theme Button Style-----*/
.theme-button {
    position: relative;
    color: #ffffff !important;
    display: inline-block;
    cursor: pointer;
    transition: all 0.7s ease 0s;
    outline: none;
    text-transform: capitalize;
    z-index: 99;
    padding: 10px 40px 14px;
    font-weight: bold;
    border-radius: 5px;
}
.theme-button::before {
    content: "";
    position: absolute;
    background: linear-gradient(-150deg, #00e8d3, #008ded);
    opacity: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 5px;
    transition: all 0.7s ease 0s;
}
.theme-button:hover::before {
    opacity: 0;
}
.theme-button::after {
    content: "";
    position: absolute;
    background: linear-gradient(-150deg, #008ded, #00e8d3);
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 5px;
    transition: all 0.7s ease 0s;
}
.theme-button:hover::after {
    opacity: 1;
}

/*-------------------------------------------
           4. Nav Area CSS
-------------------------------------------*/

/*------Top Nav/Menu Area Start------*/
.top-nav {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    position: absolute;
    width: 100%;
    background: transparent;
}
.top-nav ul li {
    display: inline;
}
.top-nav ul li a {
    display: inline-block;
    padding-right: 11px;
}
.top-nav ul li a:hover i {
    animation: bounceIn 2s infinite;
}
.top-nav ul li a i {
    padding-right: 5px;
    font-size: 12px;
}

/*------Top Nav/Menu Area End------*/

.menu-section-area {
    padding: 0;
    z-index: 999;
}
.menu-section-area .navbar {
    padding: 0;
}
#mainNav {
    background-color:transparent;
    height: 108px;
    display: flex !important;
    transition: all ease .6s;
    top:0px;
    background:#002848;
}
#mainNav.navbar-shrink {
    background-color: #fff;
    box-shadow: 0 0 9px 3px rgba(50,29,154,.2);
    top:0
}
#mainNav .navbar-brand {
    position: relative;
    top: -3px;
}
#mainNav .navbar-nav .nav-item .nav-link {
    font-size: 20px;
    padding: 0.75em 10px;
    position: relative;
    font-weight: bold;
    color: #fff;
    transition: 500ms;
}
#mainNav .navbar-nav .nav-item .nav-link.active{
    color:#FF7901
}
#mainNav .navbar-nav .nav-item:last-child .nav-link{
    padding-right: 0;
}
#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link.active {
    color: #FF7901;

}
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
    color: #0a8aff;
}
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover, #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link.active {
    color: #321d9a!important;
}
#mainNav .navbar-nav .nav-item:not(:last-child) .nav-link.active::after, #mainNav .navbar-nav .nav-item:not(:last-child) .nav-link:hover::after{
    width: 60%;
    opacity: 1;
    background: #321d9a;
}
/*---- Dropdown Menu CSS ----*/
#mainNav ul.navbar-nav li.nav-item.dropdown-box {
    position: relative;
}
#mainNav ul.navbar-nav li.nav-item.dropdown-box .dropdown-list {
    background-color: #fff;
    top: 213%;
    position: absolute;
    transition: .5s;
    visibility: hidden;
    opacity: 0;
    width: 200px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 12px 15px rgba(0,0,0,.10);
    border: 1px solid #0a8aff;
}
#mainNav ul.navbar-nav li.nav-item.dropdown-box:hover .dropdown-list {
    top: 100%;
    visibility: visible;
    opacity: 1;
}
.dropdown-list li a {
    padding: 6px 10px;
    display: block;
}
#mainNav .navbar-nav .nav-item .nav-link > i.fa-angle-down {
    padding-left: 5px;
    position: relative;
    top: 2px;
}
@media (min-width: 992px) {

}
 /* Mean Menu / Mobile Menu Style */
.mean-container .mean-nav ul {
    margin: 14px 0 0 0;
    background-color: transparent;
}
.mean-container .mean-nav ul li a:hover {
    background-color: var(--home-1-color-blue);
    color: var(--white-color) !important;
}
.mean-container .mean-bar {
    background-color: var(--white-color);
    height: 54px;
    z-index: 999;
    padding: 0;
}
.mean-container .mean-nav {
    background-color: var(--white-color);
    margin-top: 0;
    height: 100%;
}
.mean-container .mean-nav ul li a.mean-expand {
    padding: 0 !important;
    margin-top: 3px;
    top: -2px;
    background: rgba(255,255,255,.1);
    width: 45px;
    height: 45px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mobile-logo {
    position: relative;
    top: 14px;
    left: 16px;
    height: 23px;
}
.mean-container a.meanmenu-reveal {
    top: 5px;
    color: var(--home-1-color-blue);
}
.mean-container .mean-nav ul.menu {
    margin: 0 0 0 0;
    background-color: #2c303a;
    display: flex;
    position: relative;
    top: 30px;
}
.mean-container a.meanmenu-reveal span {
    background-color: var(--home-1-color-blue);
}
  .mean-container .mean-nav ul li a{
  }
  .mean-container .mean-nav ul li a:hover {
  }
  .mean-container .mean-nav ul li.mean-last a.section-button:hover, .mean-container .mean-nav ul li.dropdown a:hover {
  }
  .mean-container .mean-nav ul li a {
      color: #fff;
  }
.mean-container .mean-nav ul li.mean-last {
    border-top: 1px solid rgba(0, 0, 0, .4);
}
.mean-container .mean-nav ul li.mean-last a {
    border-top: 0;
}

/*-------------------------------------------
            4. Chat Bot Area
-------------------------------------------*/
.chat-bot-box {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
    font-size: 19px;
    z-index: 9;
}
.chat-bot-box:hover{
    box-shadow: 0 0 39px 4px rgba(205, 205, 205, 0.40);
}
/*-------------------------------------------
            4. Chat Bot Area
-------------------------------------------*/

/*-------------------------------------------
            5. Scroll To Top Area
-------------------------------------------*/
#scroll {
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: none;
    z-index: 10;
    border-radius: 5px;
    font-size: 24px;
    text-align: center;
    color: var(--home-1-color-cyan);
    line-height: 48px;
}
#scroll i{
    animation: fade-slide-up 1s 1s ease-out forwards,
    pulse 2s 2s ease-out infinite;
    opacity: 0;
}
@keyframes fade-slide-up {
    0% {
        opacity: 0;
        transform: translateY(4rem);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes pulse {
    0% {
        opacity: 1;
        transform: none;
    }
    50% {
        opacity: .8;
        transform: scale(.8);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/*-------------------------------------------
            5. Scroll To Top Area End
-------------------------------------------*/

/*-------------------------------------------
            6. Preloader Area Start
-------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999999;
}

.loader {
    position: absolute;
    left: 53%;
    top: 53%;
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
    border: 10px solid var(--home-1-color-blue);
    border-radius: 50%;
    border-top: 10px solid var(--home-2-color-blue);
    border-bottom: 10px solid var(--home-2-color-blue);
    width: 90px;
    height: 90px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@media only screen and (min-width:300px) and (max-width:479px){
    .loader {
        margin: -100px 0 0 -60px;
    }
}
/*-------------------------------------------
            6. Preloader Area End
-------------------------------------------*/

/*-------------------------------------------
            7. Header Area
-------------------------------------------*/
.home-banner-area {
    height: 99vh;
}
.hero-area-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.hero-area-content {
    border: 5px solid #fff;
    padding: 45px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-cloud-image-wrap {
     width: 60%;
 }
.hero-cloud-image-wrap img {
    height: 612px;
    position: absolute;
    right: 0;
    top: 23%;
}
.hero-area-content h1 {
    margin-bottom: 46px;
    text-align: center;
}
.hero-area-content p {
    margin: 26px 0 54px;
}
.hero-button-box a.theme-button.btn {
    margin-right: 23px;
}
.theme-button i {
    padding-right: 8px;
}
.hero-button-box a > img {
    border-radius: 5px;
}
.hero-button-box .theme-button{
    box-shadow: 0 6px 15px 0 rgba(0,0,0,.2);
    padding: 10px 26px 14px;
}

/*----Hero Effect CSS----*/
#wrapper {
    width: 369px;
    height: 530px;
    position: absolute; left: 50%; top:50%;
    transform-style: preserve-3d;
    transform:translate(-50%,-50%) perspective(600px)  rotatey(20deg) rotatex(10deg);
}
/*----Hero Effect CSS----*/

/*----Hero Particle Effect CSS----*/

@keyframes bubblemove {
    0% {
        transform: scale(1) translate(10px, -30px)
    }
    38% {
        transform: scale(.8, 1) translate(10vw, 5vh) rotate(160deg)
    }
    40% {
        transform: scale(.8, 1) translate(10vw, 5vh) rotate(160deg)
    }
    78% {
        transform: scale(1.3) translate(0vw, 5vh) rotate(-20deg)
    }
    80% {
        transform: scale(1.3) translate(0vw, 5vh) rotate(-20deg)
    }
    100% {
        transform: scale(1) translate(10px, -30px)
    }
}

.bubble {
    animation: bubblemove 50s ease-in-out infinite;
    transform-origin: 50% 50%
}

.bubble.slow {
    animation: bubblemove 75s ease-in-out infinite
}

#pink-side-bubble-1, #pink-side-bubble-11, #pink-side-bubble-111, #middle-bubble{
    position: absolute;
    left: -300px;
    top: 0;
    width: 600px;
    opacity: 0.3;
}

#pink-side-bubble-2, #pink-side-bubble-22, #pink-side-bubble-222{
    position: absolute;
    left: -80px;
    top: 250px;
    width: 400px;
    opacity: 0.3;
}
#blue-side-bubble-1, #blue-side-bubble-11 , #blue-side-bubble-111, #middle-bubble {
    position: absolute;
    right: 131px;
    bottom: 212px;
    width: 238px;
    opacity: 0.5;
}

@media (max-width: 991px) and (min-width: 767px){
    #pink-side-bubble-1, #pink-side-bubble-11, #pink-side-bubble-111, #middle-bubble {
        width: 400px;
        left: -200px;
    }

    #pink-side-bubble-2, #pink-side-bubble-22, #pink-side-bubble-222 {
        width: 300px;
        left: -150px;
    }

    #blue-side-bubble-11, #blue-side-bubble-111{
        width: 400px;
        right: -200px;
    }
}
@media (max-width: 767px){
    #pink-side-bubble-1, #pink-side-bubble-2, #pink-side-bubble-11, #pink-side-bubble-22, #pink-side-bubble-111, #pink-side-bubble-222 {
        left: -50%;
    }

    #blue-side-bubble-1, #blue-side-bubble-11, #blue-side-bubble-111{
        right: -50%;
    }
}
footer #pink-side-bubble-111 {
    top: 73px;
    left: -394px;
    width: 410px;
}
footer #blue-side-bubble-111 {
    right: 154px;
    width: 250px;
}
footer #pink-side-bubble-222 {
    top: 157px;
    left: -245px;
    width: 300px;
}
/*----Hero Particle Effect CSS----*/

/*----Hero Wave Effect CSS----*/

header .footer-wave {
    max-width: 102%;
    width: 100%;
    position: absolute;
    height: 187.8px;
    left: 0;
    z-index: 1;
    bottom: -67px;
    background: url(../img/all-effect-img/hero-wave.svg) repeat-x;
}
/*----Hero Wave Effect CSS----*/

/*---- Hero Scroll to bottom Button CSS----*/
.scroll-to-bottom a {
    position: absolute;
    bottom: 40px;
    left: 48%;
    z-index: 2;
    display: inline-block;
    padding-top: 70px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
}
.scroll-to-bottom a:hover {
    opacity: .5;
}
#scroll-bottom a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    -webkit-animation: scroll-bottom 1.5s infinite;
    animation: scroll-bottom 1.5s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes scroll-bottom {
    0% {
        -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}
@keyframes scroll-bottom {
    0% {
        transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}
/*---- Hero Scroll to bottom Button CSS----*/

/*-------------------------------------------
            7. Header Area End
-------------------------------------------*/

/*-------------------------------------------
        8. Domain Name Search CSS Start
-------------------------------------------*/
.domain-search-wrapper {
    background-color: #fff;
    box-shadow: 0 0 33px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 60px;
    border-radius: 5px;
}
.domain-search-wrapper form {
    background: #fff;
    width: 63%;
    margin: 0 auto;
    border: 1px solid #dfe5e5;
    border-radius: 5px;
}
.domain-search-wrapper .form-group {
    margin-bottom: 0;
}
.form-row {
    justify-content: center;
}
input#domain-name {
    width: 426px;
    min-width: 100%;
    height: 55px;
}
.select-bar {
    height: 100%;
    width: 78px;
    border-radius: 0;
    border-bottom: 0;
    padding: 0;
}
.select-bar select {
    border: medium none;
    outline: 0 none;
    padding: 0px 20px;
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    background: #fff;
    color: #777c87;
    height: 55px;
    border-left: 1px solid #dfe5e5;
    border-radius: 0;
    width: 80px;
}
.slecet_caret {
    position: absolute;
    right: 11px;
    top: 51%;
}
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.domain-search-wrapper form button.theme-button,
.domain-search-wrapper form button.theme-button:after,
.domain-search-wrapper form button.theme-button:before{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.domain-search-wrapper form button.theme-button {
    padding: 14px 44px 17px;
}
.domain-name-img-box {
    justify-content: space-evenly;
    width: 65%;
    margin: 30px auto 0;
}
.domain-name {
    flex-direction: column;
}
.domain-name span {
    margin-top: 6px;
}
/*----Domain Name Custome Placeholder CSS----*/
.domain-search-custom-placeholder {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 13px;
    background: #fff;
    border-radius: 5px;
}
/*----Domain Name Custome Placeholder CSS----*/

/*----Domain Name Select Menu CSS----*/
/*the container must be positioned relative:*/
.custom-select select {
    display: none; /*hide original SELECT element:*/
}
.select-selected {
    background-color: #fff;
    top: -1px;
    position: relative;
    padding: 15px 26px 15px 11px !important;
}

/*style the arrow inside the select element:*/
.select-selected::after {
    position: absolute;
    content: "";
    top: 25px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #777c87 transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #777c87 transparent;
    top: 19px;
}

/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
    color: #495057;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
}

/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #dfe5e5;
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}
/*----Domain Name Select Menu CSS----*/

/*-------------------------------------------
        8. Domain Name Search CSS End
-------------------------------------------*/

/*-------------------------------------------
        9. Services Area CSS Start
-------------------------------------------*/
.services-area{
    padding-bottom: 70px;
}
/*.single-service:hover .single-service-content h4, .single-service:hover .single-service-content p, .single-service:hover .single-service-content a{
    color: #fff;
}*/
.single-service img {
    height: 60px;
}
.single-service-content h4, .single-features h4 {
    padding: 5px 0 5px 10px;
    text-align: left;
    font-weight: normal;

}
.single-service-content p {
    padding-bottom: 20px;
}
.single-service-content a {
    transition: none;
}
.single-service .theme-button {
    padding: 5px 12px 7px;
}
.single-service:hover a i,
.pricing-table-box:hover a i,
.single-blog-post:hover a i, .service-price-btn:hover > a > i{
    position: relative;
    animation-name:arrow;
    animation-duration:2s;
    animation-timing-function:linear;
    animation-delay:.5s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-play-state:running;
    -webkit-animation-name:arrow;
    -webkit-animation-duration:2s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:.5s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-animation-play-state:running;
}

@keyframes arrow
{
    0%   {left:-5px;}
    75% {left:5px;}
    100% {left:-5px;}
}
@-webkit-keyframes arrow
{
    0%   {left:-5px;}
    75% {left:5px;}
    100% {left:-5px;}
}

/*Service Box Effect Start*/
.single-service, .single-features {
    background: #fff;
    position: relative;
    text-align: center;
    display: block;
    overflow: hidden;
    padding-bottom: 5px;
    border-radius: var(--border-radious-5);
    margin-bottom: 30px;
    -webkit-box-shadow: 0 14px 45px 0 rgba(205, 205, 205, 0.35);
    box-shadow: 0 14px 45px 0 rgba(205, 205, 205, 0.35);
    transition: all 500ms ease;
}
/*近一周热词  hover  动画*/
/*.single-service:before{
    content: '';
    width: 273px;
    height: 273px;
    background: #4299e0;
    border-radius: 50%;
    position: absolute;
    top: -148px;
    left: -83px;
    transform: scale(0);
    z-index: -1;
}

.single-service:hover:before{
    transform: scale(1);
    transition: all 0.5s linear;
    transition-delay: 0.1s;
}

.single-service:hover {border-color: transparent;}*/

.single-service .hover-content {
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background: #2cd4d9;
    z-index: -3;
    opacity: 0;
    transition: all 0.3s linear;
}

.single-service:hover .hover-content {
    opacity: 1;
}

.single-service .hover-content:before {
    content: '';
    width: 493px;
    height: 493px;
    background: #2989d8;
    border-radius: 50%;
    position: absolute;
    top:-250px;
    left:-180px;
    z-index: 1;
    transform: translate(-50% , -50%);
    opacity: 0;
}

.single-service:hover .hover-content:before {
    opacity: 1;
    transform: translate(0% , 0%);
    transition: all 0.9s linear;
}

.single-service .hover-content:after{
    content: '';
    width: 602px;
    height: 602px;
    background: #42dadf;
    border-radius: 50%;
    position: absolute;
    top:-196px;
    left:-180px;
    z-index: -1;
    transform: translate(-50% , -50%);
    opacity: 0;
}

.single-service:hover .hover-content:after {
    opacity: 1;
    transform: translate(0% , 0%);
    transition: all 1.3s linear;
}

.single-service:hover{
    transform: translateY(-10px);
    box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.1);
}
.single-service:hover .icon-box::before{
    opacity: 0;
}

.single-service .icon-box i {
    color: #fff;
    font-size: 22px;
    position: relative;
    z-index: 1;
}

/*Service Box Effect End*/

/*-------------------------------------------
        9. Services Area CSS End
-------------------------------------------*/

/*-------------------------------------------
        10. Pricing Table CSS Start
-------------------------------------------*/
.pricing-table-area{
    padding-top: 30px;
}
.pricing-table-box{
    transition:  all ease-in-out 0.5s;
    text-align: center;
    transform: translateY(0px);
    position: relative;
    margin: 0 0 30px;
}


.pricing-table-name{
    margin-bottom: 17px;
}
.pricing-table-box-price{
    font-size: 48px;
    color: #0a8aff;
    line-height: 52px;
    margin-bottom: 20px;
    position: relative
}
.pricing-table-box a, .single-service-content a, .single-blog-content > a {
    display: flex;
    justify-content: center;
    width: 128px;
    margin: 0 auto;
    align-items: center;
}
.service-price-btn a {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pricing-table-box a > i, .single-service-content a > i, .single-blog-content > a > i, .service-price-btn > a > i {
    padding-right: 10px;
    padding-top: 3px;
}
.pricing-table-box.active a{
    color: #fff;
}
.pricing-table-box-price span{
    font-size: 16px;
    color: #0a8aff;
}
.discount-tag{
    font-size: 20px;
    line-height: 24px;
    color: #321d9a;
    margin-bottom: 30px
}
.discount-tag span{
    font-size: 16px;
    line-height: 24px;
    color: #5a5f69
}
.pricing-table-listing li{
    line-height: 30px;
    color: #5a5f69}
.pricing-table-listing{
    margin-bottom: 30px;
    margin-top: 30px
}
.pricing-table-box.active{
    background: #321d9a; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #008ded 0%, #00e8d3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #008ded 0%, #00e8d3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #008ded 0%, #00e8d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.popular-price-tag {
    position: absolute;
    background: linear-gradient(135deg, #008ded 0%, #00e8d3 100%);
    padding: 7px 46px;
    color: #fff;
    transform: rotate(-45deg);
    left: -31px;
    top: 28px;
    border-radius: 5px;
}
.pricing-table-box.active .pricing-table-name, .pricing-table-box.active .pricing-table-box-price, .pricing-table-box.active .pricing-table-box-price span, .pricing-table-box.active .discount-tag, .pricing-table-box.active .discount-tag span, .pricing-table-box.active .pricing-table-listing li{
    color: var(--white-color);
}
/*-------------------------------------------
        10. Pricing Table CSS End
-------------------------------------------*/

/*-------------------------------------------
        11. Features Area CSS Start
-------------------------------------------*/
.features-area {
    padding: 100px 0 70px;
}
.single-features {
    padding: 30px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 14px 45px 0 rgba(205, 205, 205, 0.35);
}
.single-features::after {
    content: "";
    position: absolute;
    height: 112px;
    width: 132px;
    background-color: rgba(41,237,216,.2);
    right: -68px;
    border-radius: 50%;
    bottom: -65px;
    transform: scale(0);
    -webkit-transition: all 0.7s linear;
    transition: all 0.7s linear;
}
.single-features:hover::after {
    transform: scale(1);
}
.single-features h4 {
    padding: 12px 0 15px;
}
.single-features i {
    color: transparent;
    background: -webkit-linear-gradient(0deg, #2989d8, #2cd4d9 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.single-features i::before {
    font-size: 46px;
}

/*Features Area Bubble Effect Start*/
.bubbles-1, .bubbles-2, .bubbles-3, .bubbles-4, .bubbles-5, .bubbles-7 {
    width: 13px;
    height: 13px;
    border: 2px solid #4b53a2;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    -webkit-animation: zoom-fade-two 5s infinite linear;
    animation: zoom-fade-two 5s infinite linear;
    opacity: .2;
    background-color: transparent;
}
.bubbles-1 {
    top: 29px;
    left: 26px;
}
.bubbles-2 {
    bottom: 30px;
    left: 215px;
    border: 2px solid #7c35a4;
}
.bubbles-3 {
    right: 90px;
    bottom: 205px;
    border: 2px solid #308695;
}
.bubbles-4 {
    right: 357px;
    top: 80px;
    width: 17px;
    height: 17px;
    border: 2px solid #d47df1;
}
.bubbles-5 {
    left: 480px;
    top: 261px;
    width: 9px;
    height: 9px;
    border: 2px solid #308695;
}
.bubbles-7 {
    right: 435px;
    top: 389px;
    width: 10px;
    height: 10px;
    border: 2px solid #05128b;
}
.features-area .bubbles-1{
    -webkit-box-shadow: 2px 30px 34px rgba(186, 185, 185, 0.80);
    box-shadow: 2px 30px 34px rgba(186, 185, 185, 0.80);
}

.features-area .bubbles-2{
    -webkit-box-shadow: 2px 30px 34px rgba(186, 185, 185, 0.80);
    box-shadow: 2px 30px 34px rgba(186, 185, 185, 0.80);
}

.features-area .bubbles-3{
    -webkit-box-shadow: 2px 30px 34px rgba(186, 185, 185, 0.80);
    box-shadow: 2px 30px 34px rgba(186, 185, 185, 0.80);
}

.features-area .bubbles-4{
    border: 2px solid #d47df1;
    -webkit-box-shadow: 2px 30px 34px rgba(186, 185, 185, 0.80);
    box-shadow: 2px 30px 34px rgba(186, 185, 185, 0.80);
}
/*Features Area Bubble Effect End*/

/*Features SVG Icon Effect Start*/
.icon-wave-bg img {
    height: 60px;
    width: 60px;
}
/*Feature SVG Icon Effect End*/

/*-------------------------------------------
        11. Features Area CSS End
-------------------------------------------*/

/*-------------------------------------------
        12. Why Choose Us CSS Start
-------------------------------------------*/
.why-choose-inner-content i {
    padding-right: 12px;
    font-size: 17px;
    padding-top: 9px;
}
.why-choose-content-box h4 {
    margin-bottom: 20px;
}
.row.single-choose-box {
    align-items: center;
}

.why-choose-wrapper .row:nth-child(2n) {
    flex-direction: row-reverse;
}
/*Why Choose single-choose-box CSS*/
.why-choose-image-box {
    text-align: right;
}
.why-choose-bg-shape {
    height: 443px;
}
.why-choose-img {
    right: 40px;
    top: 102px;
    height: 234px;
}
.why-choose-wrapper .row:nth-child(2n) .why-choose-image-box {
    text-align: left;
}
.why-choose-wrapper .row:nth-child(2n) .why-choose-img {
    left: 51px;
}
.why-choose-wrapper .row:nth-child(even) .why-choose-content-box {
    padding-left: 30px;
}
.why-choose-wrapper .row:nth-child(3n) .why-choose-img {
    right: 94px;
}
.why-choose-wrapper .row:nth-child(4n) .why-choose-img {
    height: 285px;
    top: 76px;
}
/*-------------------------------------------
        12. Why Choose Us CSS End
-------------------------------------------*/

/*-------------------------------------------
        13. Counter Area CSS Start
-------------------------------------------*/
/*Counter Options*/
.counter-wrapper {
    display: flex;
    justify-content: space-between;
}
.single-counter {
    /*box-shadow: 0px 14px 45px 0px rgba(205, 205, 205, 0.35);*/
    /*background-color: #fff;*/
}
.single-counter h4 {
    text-align: left;
    font-weight: normal;
    padding: 5px 0 5px 20px;
}
.counter-icon img {
    height: 50px;
}
.count-content {
    font-size: 42px;
}
.counter-number {
/*    font-size: 41px;
    line-height: 35px;*/
}
.counter-box i::before {
    font-size: 59px;
}
/*----About Page Counter CSS----*/
.about-page-counter-area .single-counter {
    box-shadow: none;
    background-color: transparent;
}
.about-page-counter-area .single-counter h4, .about-page-counter-area .counter-number {
    color: var(--white-color);
}
.about-us-content h2.section-heading {
    line-height: 32px;
}
.about-us-content p.section-subheading {
    margin: 18px 0 34px;
    width: 100%;
}

/*-------------------------------------------
        13. Counter Area CSS End
-------------------------------------------*/

/*-------------------------------------------
        14. Our Speciality CSS Start
-------------------------------------------*/
.our-speciality-area{
    overflow: hidden;
}
.our-speciality-area .our-speciality-content-wrap {
    padding: 50px 50px 50px;
    box-shadow: 0 30px 30px 0 rgba(205, 205, 205, 0.35);
    border-radius: var(--border-radious-5);
}
.speciality-box {
    padding: 23px;
}
.speciality-content p span {
    display: block;
    line-height: 11px;
}
.speciality-content i {
    font-size: 17px;
    padding-right: 12px;
}

/*-------------------------------------------
        14. Our Speciality CSS End
-------------------------------------------*/

/*-------------------------------------------
    15. Testimonial Area Start
-------------------------------------------*/
.testimonial-area {
    padding: 100px 0 70px;
}
.testimonial-slider .item {
    padding: 22px 0 60px;
}
.testimonial-slide-box {
    width: 70%;
    margin: 20px auto 0;
    text-align: center;
    box-shadow: 0 14px 30px 12px rgba(205, 205, 205, 0.35);
    background-color: #fff;
    position: relative;
    border-radius: 5px;
    padding: 60px 40px 40px;
}
.testimonial-slide-box::before {
    position: absolute;
    background: linear-gradient(-150deg, #00e8d3, #44cfd6);
    content: "";
    height: 20px;
    width: 95%;
    bottom: -14px;
    left: 19px;
    z-index: -1;
    border-radius: 5px;
    box-shadow: 0 0 30px 0 rgba(0,0,0,.3);
}
.testimonial-slide-box::after {
    position: absolute;
    background: linear-gradient(-150deg, #00e8d3, #00e8d3);
    content: "";
    height: 20px;
    width: 90%;
    bottom: -30px;
    left: 39px;
    z-index: -11;
    border-radius: 5px;
}
.testimonial-slide-box img {
    height: 70px;
    width: 70px !important;
    margin: -80px auto 0;
    background: linear-gradient(to right, rgb(42, 22, 155) 39%, rgb(41, 137, 216) 78%, rgb(44, 212, 217) 95%);
    border-radius: 50%;
    padding: 3px;
}
.testimonial-slide-box h5 {
    margin: 20px 0;
}
.testi_prev, .testi_next {
    width: 70px;
    height: 70px;
    border-radius: 0;
}

.owl-dots {
    text-align: center;
    bottom: 5%;
    margin-left: 57px;
}
.owl-carousel button.owl-dot {
    background-color: transparent;
    height: 6px;
    width: 6px;
}
.owl-carousel button.owl-dot.active {
    background-color: #fff !important;
}
.testimonial-slider.owl-carousel button.owl-dot.active {
    border: 5px solid #2cd4d9;
}
.testimonial_slide_nav .testi_prev {
    right: 0%!important;
    transform: rotate(90deg);
    top: 0;
}
.testimonial_slide_nav .testi_next {
    right: 0 !important;
    transform: rotate(90deg);
    bottom: 40px !important;
}
.testimonial-slider.owl-carousel button.owl-dot {
    display: block;
    margin: 13px 0;
    height: 10px;
    width: 10px;
    border: 5px solid #2989d8;
}
.testimonial-slider.owl-carousel .owl-dots {
    bottom: 39%;
    position: absolute;
    right: 13px;
    margin-left: 0;
}
/*Client Logo Slider CSS*/

/*Icon Color Gradient CSS*/
.testimonial_slide_nav i::before {
    font-size: 28px;
}
.testimonial_slide_nav i , .pagination-area ul li i{
    background: -webkit-linear-gradient(to right, #2cd4d9, #2989d8 70%);
    background: linear-gradient(to right, #2cd4d9, #2989d8 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .7s;
}
.testimonial_slide_nav i:hover, .pagination-area ul li i:hover {
    background: -webkit-linear-gradient(to right, #2989d8, #2cd4d9 70%);
    background: linear-gradient(to right, #2989d8, #2cd4d9 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*-------------------------------------------
    15. Testimonial  Area End
-------------------------------------------*/

/*-------------------------------------------
    16. Call To Action Area Start
-------------------------------------------*/
.call-to-action-area, .about-page-counter-area {
    background-image: url(../img/call-to-action.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    padding: 150px 0;
}
.about-page-counter-area{
    padding: 100px 0;
}
.call-to-content {
    display: flex;
    justify-content: flex-end;
    margin-right: 43px;
}
.call-to-content h2{
    font-size: 40px;
}
.call-to-action-area .call-to-content h2 a {
    color: var(--white-color);
    padding-top: 15px;
    font-size: 32px;
}
.call-to-action-area .call-to-content h2 a i {
    font-size: 24px;
}
.call-center-float-box {
    position: absolute;
    z-index: 9;
    bottom: -159px;
    left: 0;
}
.call-center-float-box img {
    height: 450px;
}
.call-to-action-area .section-overlay , .about-page-counter-area .section-overlay{
    position: absolute;
    top: 0;
    z-index: -1;
    background: linear-gradient(to right, rgb(42, 22, 155) 39%, rgba(41, 137, 216,.95) 78%, rgb(44, 212, 217) 100%);
}
/*-------------------------------------------
    16. Call To Action Area End
-------------------------------------------*/

/*-------------------------------------------
    17. Home Blog Posts Area Start
-------------------------------------------*/
.all-blog-posts-area {
    padding: 100px 0 70px;
}
.all-blog-posts-area .section-subheading {
    width: 53%;
    margin: 18px auto 50px;
}
.single-blog-post {
    border-radius: 5px;
    overflow: hidden;
    box-shadow:0 14px 45px 0 rgba(205, 205, 205, 0.35);
    text-align: center;
    transition: all ease-in-out 0.5s;
}
.single-blog-post:hover {
    box-shadow: 0 18px 33px 6px rgba(0,0,0,0.1);
}
.single-blog-post img {
    width: 100%;
}
.single-blog-content {
    padding: 30px 30px 38px;
}
.single-blog-content img {
    height: 35px;
    width: 35px;
    margin-right: 10px;
}
.single-blog-content h4, .single-blog-content h6{
    text-transform: capitalize;
}
.single-blog-content h4 {
    margin: 25px 0 15px;
}
.single-blog-content h6 i {
    padding: 0 5px 0 20px;
    position: relative;
}

/*-------------------------------------------
    17. Home Blog Posts Area End
-------------------------------------------*/

/*-------------------------------------------
    18. FAQ Area Start
-------------------------------------------*/
.faq-area {
    background-image: url('../img/faq.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0 80px;
    overflow: hidden;
}
.faq-wrapper .section-title-area {
    text-align: left;
}
.faq-img-box {
    position: absolute;
    left: -60px;
    top: 74px;
}
.faq-img-box img {
    height: 360px;
}
/*Accordion Area-----------*/
#accordion6 .panel-heading,
#accordion7 .panel-heading {
    padding: 0;
    position: relative;
}
#accordion6 .panel-title a > img,
#accordion7 .panel-title a > img {
    margin-right: 25px;
}
#accordion6 .panel,
#accordion7 .panel {
    padding: 22px 0 4px 20px;
    border: 1px solid #2cd4d9;
    box-shadow: -13px 0 33px -7px rgba(0,0,0,.1);
    margin-bottom: 20px;
    border-radius: var(--border-radious-5);
}
.panel-collapse {
    padding: 0 17px 16px 2px;
}
#accordion6 .panel-title a,
#accordion7 .panel-title a {
    display: block;
    border: none;
    position: relative;
    font-size: 26px;
    text-transform: capitalize;
    margin-bottom: 20px;
}
#accordion6 .panel-title a::before, #accordion6 .panel-title a.collapsed::before,
#accordion7 .panel-title a::before, #accordion7 .panel-title a.collapsed::before {
    content: "\f068";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 24px;
    height: 24px;
    line-height: 23px;
    font-size: 14px;
    text-align: center;
    position: absolute;
    top: 5px;
    right: 10px;
    transition: all 0.5s ease 0s;
}
#accordion6 .panel-title a.collapsed:before, #accordion7 .panel-title a.collapsed:before{ content: "\f067"; }
#accordion6 .panel-title a > i ,
#accordion7 .panel-title a > i {
    margin-right: 20px;
}
#accordion6 .panel-title a > i::before,
#accordion7 .panel-title a > i::before {
    font-size: 40px;
    color: #7ad5f4;
}
#accordion6 .panel-body p,
#accordion7 .panel-body p {
    margin-bottom: 7px;
    color: rgba(255,255,255,.9);
}
/*Accordion Area-----------*/
/*-------------------------------------------
    18. FAQ Area End
-------------------------------------------*/

/*-------------------------------------------
    19. Client Logo Slider Area Start
-------------------------------------------*/
.single-client-logo-box img {
    width: 130px !important;
    margin: 0 auto;
}
/*-------------------------------------------
    19. Client Logo Slider Area End
-------------------------------------------*/

/*-------------------------------------------
    20. Contact/Support Forum Area Start
-------------------------------------------*/
.contact-area .row {
    align-items: center;
}
.contact-area h2.section-heading > span {
    margin: 20px 0;
}
.support-forum-img-box img {
    height: 489px;
}
.contact-form-wrapper .form-control {
    height: 50px;
    padding: .375rem .75rem;
    font-size: 1rem;
    color: #495057;
    border: none;
    border-radius: .25rem;
    border-bottom: 1px solid #2cd4d9;
}
.message-area .form-control {
    height: 150px;
}
.contact-address ul li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: #42454f;
}
.contact-address ul li span {
    margin-right: 15px;
}
.contact-form-wrapper {
    position: relative;
    background: #fff;
    z-index: 99;
    margin-left: 113px;
}
.subm-btn.theme-button input {
    padding: 10px 26px 14px;
}
.subm-btn.theme-button {
    padding: 0;
}
/*-------------------------------------------
    20. Contact/Support Forum Area Start
-------------------------------------------*/

/*-------------------------------------------
    21. Footer Area/Copyright Area
-------------------------------------------*/
.footer-area {
    background: linear-gradient(to top, rgb(42, 22, 155) 39%, rgb(41, 137, 216) 78%, rgb(44, 212, 217) 95%);
    padding: 100px 0 50px;
    position: relative;
    margin-top: 62px;
}
.footer-newsletter-form {
    margin: 20px 0 0;
}
.footer-newsletter-form form input.form-control {
    width: 360px;
    min-width: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.footer-newsletter-form form .theme-button {
    padding: 12px 40px 14px;
    margin-left: -2px;
}
.footer-newsletter-form form .theme-button, .footer-newsletter-form form .theme-button:after, .footer-newsletter-form form .theme-button:before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.footer-main-content-area {
    padding: 70px 0 50px;
}
.footer-logo img {
    margin-bottom: 20px;
}
.footer-logo p a {
    display: block;
}
.footer-logo p a > i::before {
    padding-right: 9px;
    font-size: 13px;
}
.footer-links-list li {
    padding-bottom: 10px;
}
.copyright-area {
    padding: 22px 0
}
.copyright-text {
    border-top: 1px solid rgba(44, 212, 217, .2);
    padding-top: 50px;
}
.footer-social-links li a {
    padding: 7px;
}
.footer-wave {
    max-width: 102%;
    width: 100%;
    position: absolute;
    height: 187.8px;
    bottom: CALC(91% - 7px);
    left: 0;
    z-index: 7;
    background: url(../img/all-effect-img/footer-wave-v6.svg) repeat-x;
    animation: wave 10s cubic-bezier(.44, .66, .67, .37) infinite;
}

@keyframes wave {
    0% {
        background-position: 0
    }

    100% {
        background-position: 1440px
    }
}
/*Footer Wave Effect CSS End*/

/*-------------------------------------------
    21. Footer Area/Copyright Area End
-------------------------------------------*/

/*-------------------------------------------
    22. Video Play CSS Start
-------------------------------------------*/
.play-button {
    color: #0a8aff;
    background-color: #fff;
    height: 70px;
    width: 70px;
    position: absolute;
    text-align: center;
    border-radius: 50%;
    top: 42%;
    left: 45%;
    line-height: 59px;
    font-size: 23px;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    animation: shadow-pulse 2s infinite;

    z-index: 9;
}
/*Video Play Button Effect */
@keyframes shadow-pulse
{
    0% {
        box-shadow: 0 0 0 0 rgba(44, 212, 217, 0.7);
    }
    100% {
        box-shadow: 0 0 0 25px rgba(44, 212, 217, 0);
    }
}

@keyframes shadow-pulse-big
{
    0% {
        box-shadow: 0 0 0 0 rgba(44, 212, 217, 0.7);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(44, 212, 217, 0);
    }
}
/*Video Play Button Effect */
/*-------------------------------------------
    22. Video Play CSS End
-------------------------------------------*/

/*-------------------------------------------
    23. About Page Style Start
-------------------------------------------*/
.about-media-box{
    overflow: hidden;
}
.about-media-box::before {
    position: absolute;
    content: "";
    z-index: 9;
    height: 100%;
    width: 100%;
    opacity: .9;
}
.about-media-box img {
    width: 100%;
}
.about-media-box .play-button {
    top: 44%;
    left: 47%;
}
/*----Team Member Area CSS----*/
.single-team{
    box-shadow: 0px 14px 45px 0px rgba(205, 205, 205, 0.35);
    margin-bottom: 30px;
    overflow: hidden;
}
.team-content {
    padding: 25px;
    text-align: center;
}
/*-------------------------------------------
    23. About Page Style End
-------------------------------------------*/

/*-------------------------------------------
    24. Blog Page Style Start
-------------------------------------------*/
/*--------Breadcrumb Area CSS--------*/
header.page-banner-area {
    height: 550px;
}
header.page-banner-area .header-caption-heading {
    padding: 19px 0 18px;
}
.breadcrumb{
    background-color: transparent;
    padding: 0;
    justify-content: center;
}
.breadcrumb li.breadcrumb-item{
    font-size: 18px;
}
.breadcrumb-item.active {
    color: #fff;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "";
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}
.breadcrumb-item i {
    padding-right: 7px;
    line-height: 31px;
}
/*--------Breadcrumb Area CSS--------*/
.header-caption {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
    text-align: center;
}
.blog-page-area .card {
    border: none;
    box-shadow: 0 6px 9px 0 rgba(16,17,39,.2);
    background-color: #fff;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 0;
}
.blog-page-area .card:hover {
    box-shadow: 0 6px 9px 0 rgba(16,17,39,.3);
}
  .blog-page-area .card > img{
      width: 100%;
      height: auto;
      border-radius: var(--default-border-radious-5);
  }
.blog-page-area .card-body {
    padding: 18px 22px 22px 22px;
}
.blog-page-area a .card-title {
    font-size: 20px;
    line-height: 30px;
}
.blog-page-area .card-footer {
    padding: 8px 0 30px 0;
    background-color: #fff;
    border: none;
}
  .blog-page-area .card-footer-box {
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
  }
  .blog-page-area .card-footer, .blog-page-area .card-footer .author-box a > span{
      color: #777c87;
  }
.blog-page-area .card-footer .flaticon-calendar::before {
    font-size: 14px;
}
  .blog-page-area .card-footer .author-box a > span {
      padding-left: 14px;
  }

  /*Blog Thumb Pagination-----*/
.pagination-area {
    margin: 30px auto 0;
}
.pagination-area .page-link {
    border: none;
    text-align: center;
}
.pagination-area li .page-link {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin: 0 5px;
    padding: 10px;
}
.pagination-area li:first-child .page-link, .pagination-area li:last-child .page-link {
    border-radius: 0;
    height: auto;
    width: auto;
    margin: 0;
}
/* Grid Blog Page CSS-----*/
.all-blog-posts-area.grid-blog-page {
    padding: 100px 0;
}
/* Classic Blog Page CSS-----*/
.classic-blog-page .block-1, .services-classic-page .block-1 {
    padding-bottom: 30px;
    border-bottom: 1px solid #dfe5e5;
    margin-bottom: 30px;
}
.classic-blog-button-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}
.classic-blog-button-box .theme-button {
    padding: 10px 26px 14px;
}
/*-------------------------------------------
        24. Blog Page Style End
-------------------------------------------*/

/*-------------------------------------------
    25. Blog Details Page Style Start
-------------------------------------------*/
.single-blog-banner-area{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
  /*Block 1 Style*/
#content {
    padding-right: 30px;
}
  #content .card-footer-box div {
      margin-right: 37px;
  }
  .block-1 {
  }
  #content .block-1 p {
      margin-bottom: 20px;
  }
  #content .author-box img {
    margin-right: 15px;
    height: 36px;
    border-radius: 50%;
    width: 36px !important;
   }
  #content .blog-date i{
      margin-right: 6px;
  }
  #content .card {
      border-radius: 0;
      box-shadow: none;
      margin-bottom: 0;
  }
    #content .card a > img {
        width: 100%;
        border-radius: 5px;
    }
  #content .card-body {
      padding: 28px 0 2px 0;
  }

   /*----- Blog Content Media -------*/
.blog-content-with-media {
    display: flex;
}
.blog-content-media {
    margin: 30px 0 35px;
    border-radius: var(--default-border-radious-5);
}
.blog-content-media::after {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.3);
    content: "";
    top: 0;
    border-radius: var(--default-border-radious-5);
    left: 0;
}
.blog-content-media img {
    width: 100%;
    border-radius: var(--default-border-radious-5);
}
.blog-content-with-media h6 {
    margin: 5% 0 2%;
}
.blog-media-box .video-btn {
    z-index: 99;
    position: absolute;
}
.blog-content-media .blog-media-box:first-child::after {
    background-color: rgba(0,0,0,.30);
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 9;
    display: block;
}
#content blockquote {
    padding: 22px 60px 22px 60px;
    margin: 2% 0;
}
#content .block-1 blockquote p {
    margin-bottom: 0;
    border-left: 5px solid #0a8aff;
    padding-left: 14px;
    font-style: italic;
}
#content .share-box {
    text-transform: capitalize;
}
  #content .share-article {
      border-top: 1px solid #ebedf3;
      border-bottom: 1px solid #ebedf3;
      padding: 40px 0;
      margin-top: 30px;
  }
  #content .share-box a ,  #content .share-box > button{
      color: #777c87;
  }
  #content .share-box > button {
      padding-right: 5px;
      cursor: pointer;
  }
  .share-box i {
      padding-right: 8px;
  }
  #content .author-details {
      padding-left: 26px;
  }
#content .author-social ul li {
    display: inline-block;
}
#content .author-social a {
    color: #777c87;
    padding: 4px 12px;
    font-size: 18px;
    display: inline-block;
}
#content .author-details p {
    padding: 15px 0 15px;
}
#content .about-author {
  border-bottom: 1px solid #ebedf3;
  margin: 33px 0;
  padding-bottom: 33px;
}
.author-img img {
    border-radius: 50%;
}
.author-img.blog-writer img {
    height: 100px;
    width: 100px;
}
.comment-date-time {
    color: #777c87;
    font-size: 12px;
    padding-top: 4px;
    display: block;
}
  .reply-btn{
      cursor: pointer;
  }
  /*--- 22.1 Block 3 Style--- */
  #content .main-comment {
      clear: both;
  }
#content .main-comment .under-comments {
    width: 90%;
    float: right;
    min-width: 48%;
    max-width: 90%;
}
  #content .main-comment .about-author {
      border-bottom: none;
      margin: 0;
      padding: 22px 0 13px;
  }
  /*--- 22.2 Leave a Comment Style --- */
.block-3 h2 {
    margin-bottom: 20px;
}
.leave-comment-area > h2 {
    margin: 40px 0 40px;
}
  #content h4.author-name {
    font-size: 22px;
  }
  .leave-comment-area .form-group {
      margin-bottom: 33px;
  }
  .leave-comment-area textarea.form-control{
      min-height: 170px;
  }
.leave-comment-area form .btn.section-button {
    margin: 0;
}
  /* ---- 22.3 Blog Aside Area ---- */
  /*Widget Search*/
.widget-search form .form-control {
    width: calc(100% - 55px);
    float: left;
    background-color: #fff;
    border: 1px solid var(--home-1-color-blue);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.widget-search .form-inline {
    width: 100%;
    background-color: #eeeff0;
}
.widget-search .form-inline > button {
    width: 55px;
    height: 50px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0;
}
.widget-search .form-inline > button::before, .widget-search .form-inline > button::after  {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.widget-search .form-inline > button i {
    padding-right: 0;
}
  /*Widget Title*/
  .widget h4.widget-title {
      margin: 61px 0 43px;
  }
.widget h4.widget-title::after {
    position: absolute;
    height: 2px;
    width: 30%;
    content: "";
    left: 0;
    background: linear-gradient(to right, rgb(42, 22, 155) 10%, rgb(41, 137, 216) 50%, rgb(44, 212, 217) 95%);
    bottom: -9px;
}
.widget ul li a {
    padding-bottom: 20px;
}
.widget ul li a img {
    width: 33%;
    border-radius: var(--default-border-radious-5);
}
  /*Widget Categories*/
.widget-categories ul li a {
    display: block;
    text-transform: capitalize;
}
.widget-categories ul li a span.cat-number{
    float: right;
    position: relative;
}
.widget-categories ul li a span.cat-number::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 1px;
    background-color: #e8e8e8;
    left: -62px;
    bottom: 7px;
}
  .widget-categories ul li a > i {
      font-size: 12px;
      padding-right: 9px;
  }

  /*Widget Recent Post*/
  .widget-recent-posts ul li:first-child a, .widget-categories ul li:first-child a {
      padding-top: 0;
  }
  .widget-recent-posts ul li:last-child a, .widget-categories ul li:last-child a  {
      padding-bottom: 0;
  }
.widget-recent-posts ul li a p {
    line-height: 21px;
    padding-left: 10px;
    width: 67%;
}
.widget-recent-posts ul li a p > span {
    display: block;
    padding-top: 10px;
    color: #949aa7;
}
  /*Widget Popular Tags*/
  .widget-popular-tags ul li {
      display: inline-block;
  }
.widget-popular-tags ul li a {
    background-color: #edeeef;
    display: block;
    float: left;
    padding: 5px 9px;
    margin: 1px;
    font-size: 14px;
    color: #777c87;
    text-transform: capitalize;
    border-radius: var(--default-border-radious-5);
}
  /*Widget Instagram */
  .widget-instagram ul li {
      display: flex;
      float: left;
  }
  .widget-instagram ul li a:last-child img {
      padding-right: 0;
  }
.widget-instagram ul li a figure {
    margin-bottom: 8px;
    margin-right: 8px;
}
/*-------------------------------------------
    25. Blog Details Page Style End
-------------------------------------------*/

/*-------------------------------------------
    26. Services Page Style Start
-------------------------------------------*/
.service-page-pricing-table-area .pricing-details-wrap table tr {
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
}
.service-page-pricing-table-area .pricing-details-wrap table thead tr{
    border-left:  1px solid transparent;
}
.service-page-pricing-table-area .pricing-details-wrap table thead tr:hover{
    background-color: transparent;
}
.pricing-details-wrap table tbody tr:hover td:first-child,
.pricing-details-wrap table tbody tr:hover td{
    color: var(--white-color);
}
.service-page-pricing-table-area .pricing-details-wrap table tr:hover{
    background-color: var(--home-1-color-blue);
}
.pricing-details-wrap table tr td, .pricing-details-wrap table tr th {
    padding: 15px 0;
    border: 1px solid #eee;
    width: 10%;
}
.pricing-details-wrap {
    width: 100%;
    padding: 50px 30px;
    margin-top: 100px;
    border-top: 2px solid var(--home-1-color-blue);
    border-radius: var(--default-border-radious-5);
    box-shadow: 0px 14px 45px 0px rgba(205, 205, 205, 0.35);
}
.pricing-details-wrap table thead tr th:first-child {
    border: 0;
}
.pricing-details-wrap table tbody tr td:first-child {
    color: #5a5f69;
}
.service-page-pricing-table-area .fas.fa-check {
    color: green;
}
.service-page-pricing-table-area .fas.fa-times {
    color: red;
}
/*-------------------------------------------
    26. Services Page Style End
-------------------------------------------*/

/*-------------------------------------------
    27. FAQ Page Start
-------------------------------------------*/
.faq-area.faq-page-area {
    background-image: none;
}
.faq-page-area .faq-questions-area {
    display: flex;
}
.faq-page-area #accordion6 .panel,
.faq-page-area #accordion7 .panel{
    border-color: #060297;
}
/*-------------------------------------------
    27. FAQ Page End
-------------------------------------------*/

/*-------------------------------------------
    28. 404 Page Start
-------------------------------------------*/
.error-page-area img {
    height: 350px;
}
.error-page-area .section-subheading {
    margin: 40px 0 20px;
}
/*-------------------------------------------
    28. 404 Page End
-------------------------------------------*/

/*-------------------------------------------
    29. Contact Page Start
-------------------------------------------*/
.row.contact-page-address-wrap {
    padding-bottom: 70px;
}
.contact_us_box {
    box-shadow: 0 0 33px 6px rgba(0,0,0,0.1);
    padding: 50px;
    text-align: center;
    height: 240px;
    margin-bottom: 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-page-address-wrap div:nth-child(2) .contact_us_box{
    background: linear-gradient(135deg, #008ded 0%, #00e8d3 100%);
}
.contact_us_box h4 {
    margin-bottom: 20px;
}
.contact-page-area .support-forum-img-box img {
    height: 350px;
}
/*-------------------------------------------
    29. Contact Page End
-------------------------------------------*/

/*-------------------------------------------
    30. Home Version 2 Page CSS Start
-------------------------------------------*/

/*---- Home 2 Default Style ----*/

.home-2 .theme-button i {
    padding-right: 0;
    line-height: 45px;
}
.home-2  h2.section-heading > span {
    background: var(--home-2-button-gradient-color1);
}
.home-2 .chat-bot-box{
    background-color: var(--home-2-color-blue);
}
.home-2 .chat-bot-box:hover{
    color: var(--white-color);
}
.home-2.mean-container a.meanmenu-reveal{
    color: var(--home-2-color-blue);
}
.home-2.mean-container a.meanmenu-reveal span {
    background-color: var(--home-2-color-blue);
}
.home-2.mean-container .mean-nav ul li a:hover {
    background-color: var(--home-2-color-blue);
}
.home-2 #scroll {
    background: var(--home-2-button-gradient-color2);
    animation: fade-slide-up1 1s 1s ease-out forwards,
    pulse1 2s 2s ease-out infinite;
    opacity: 0;
}
@keyframes fade-slide-up1 {
    0% {
        opacity: 0;
        transform: translateY(4rem);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes pulse1 {
    0% {
        opacity: 1;
        transform: none;
    }
    50% {
        opacity: .8;
        transform: scale(.8);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

.home-2 .scroll-to-bottom a:hover {
    opacity: 1;
}
/*---- Home 2 Menu Area CSS ----*/
.home-2-menu-area #mainNav ul.navbar-nav li.nav-item.dropdown-box .dropdown-list {
    border: 1px solid var(--home-2-color-pink);
}
.home-2-menu-area #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover, .home-2 #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link.active {
    color: var(--home-2-color-pink) !important;
}
/*---- Home 2 Menu Area CSS ----*/

/*---- Home 2 Hero Area CSS ----*/

.home-2-banner-area {
    background: var(--home-2-bg-gradient);
}
.home-2-banner-area .hero-area-content {
    width: 100%;
    height: 100%;
    text-align: center;
    border: 0;
    padding: 0;
}
.home-2-banner-area .hero-button-box.text-center {
    position: absolute;
    bottom: 220px;
    left: 0;
    right: 0;
}
.home-2-banner-area .theme-button , .home-2 .theme-button {
    width: 45px;
    height: 45px;
    padding: 0;
}
.home-2-banner-area .theme-button i {
    line-height: 42px;
}

/*---Hero Area Animation Effect Start---*/
#ui {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#ui .text {
    position: absolute;
    font-size: 4.5rem;
    color: var(--white-color);
    mix-blend-mode: screen;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    left: 50%;
    line-height: 93px;
}
#ui .text:nth-child(1) {
    -webkit-clip-path: polygon(-30% 0, -20% 0, 20% 100%, 0% 100%);
    clip-path: polygon(-30% 0, -20% 0, 20% 100%, 0% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -10000ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -10000ms ease-in-out infinite alternate;
}
#ui .text:nth-child(2) {
    -webkit-clip-path: polygon(-25% 0, -15% 0, 25% 100%, 5% 100%);
    clip-path: polygon(-25% 0, -15% 0, 25% 100%, 5% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -9800ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -9800ms ease-in-out infinite alternate;
}
#ui .text:nth-child(3) {
    -webkit-clip-path: polygon(-20% 0, -10% 0, 30% 100%, 10% 100%);
    clip-path: polygon(-20% 0, -10% 0, 30% 100%, 10% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -9600ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -9600ms ease-in-out infinite alternate;
}
#ui .text:nth-child(4) {
    -webkit-clip-path: polygon(-15% 0, -5% 0, 35% 100%, 15% 100%);
    clip-path: polygon(-15% 0, -5% 0, 35% 100%, 15% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -9400ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -9400ms ease-in-out infinite alternate;
}
#ui .text:nth-child(5) {
    -webkit-clip-path: polygon(-10% 0, 0% 0, 40% 100%, 20% 100%);
    clip-path: polygon(-10% 0, 0% 0, 40% 100%, 20% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -9200ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -9200ms ease-in-out infinite alternate;
}
#ui .text:nth-child(6) {
    -webkit-clip-path: polygon(-5% 0, 5% 0, 45% 100%, 25% 100%);
    clip-path: polygon(-5% 0, 5% 0, 45% 100%, 25% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -9000ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -9000ms ease-in-out infinite alternate;
}
#ui .text:nth-child(7) {
    -webkit-clip-path: polygon(0% 0, 10% 0, 50% 100%, 30% 100%);
    clip-path: polygon(0% 0, 10% 0, 50% 100%, 30% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -8800ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -8800ms ease-in-out infinite alternate;
}
#ui .text:nth-child(8) {
    -webkit-clip-path: polygon(5% 0, 15% 0, 55% 100%, 35% 100%);
    clip-path: polygon(5% 0, 15% 0, 55% 100%, 35% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -8600ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -8600ms ease-in-out infinite alternate;
}
#ui .text:nth-child(9) {
    -webkit-clip-path: polygon(10% 0, 20% 0, 60% 100%, 40% 100%);
    clip-path: polygon(10% 0, 20% 0, 60% 100%, 40% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -8400ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -8400ms ease-in-out infinite alternate;
}
#ui .text:nth-child(10) {
    -webkit-clip-path: polygon(15% 0, 25% 0, 65% 100%, 45% 100%);
    clip-path: polygon(15% 0, 25% 0, 65% 100%, 45% 100%);
    -webkit-animation:home-2-hero-wave-2 2000ms -8200ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -8200ms ease-in-out infinite alternate;
}
#ui .text:nth-child(11) {
    -webkit-clip-path: polygon(20% 0, 30% 0, 70% 100%, 50% 100%);
    clip-path: polygon(20% 0, 30% 0, 70% 100%, 50% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -8000ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -8000ms ease-in-out infinite alternate;
}
#ui .text:nth-child(12) {
    -webkit-clip-path: polygon(25% 0, 35% 0, 75% 100%, 55% 100%);
    clip-path: polygon(25% 0, 35% 0, 75% 100%, 55% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -7800ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -7800ms ease-in-out infinite alternate;
}
#ui .text:nth-child(13) {
    -webkit-clip-path: polygon(30% 0, 40% 0, 80% 100%, 60% 100%);
    clip-path: polygon(30% 0, 40% 0, 80% 100%, 60% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -7600ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -7600ms ease-in-out infinite alternate;
}
#ui .text:nth-child(14) {
    -webkit-clip-path: polygon(35% 0, 45% 0, 85% 100%, 65% 100%);
    clip-path: polygon(35% 0, 45% 0, 85% 100%, 65% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -7400ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -7400ms ease-in-out infinite alternate;
}
#ui .text:nth-child(15) {
    -webkit-clip-path: polygon(40% 0, 50% 0, 90% 100%, 70% 100%);
    clip-path: polygon(40% 0, 50% 0, 90% 100%, 70% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -7200ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -7200ms ease-in-out infinite alternate;
}
#ui .text:nth-child(16) {
    -webkit-clip-path: polygon(45% 0, 55% 0, 95% 100%, 75% 100%);
    clip-path: polygon(45% 0, 55% 0, 95% 100%, 75% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -7000ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -7000ms ease-in-out infinite alternate;
}
#ui .text:nth-child(17) {
    -webkit-clip-path: polygon(50% 0, 60% 0, 100% 100%, 80% 100%);
    clip-path: polygon(50% 0, 60% 0, 100% 100%, 80% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -6800ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -6800ms ease-in-out infinite alternate;
}
#ui .text:nth-child(18) {
    -webkit-clip-path: polygon(55% 0, 65% 0, 105% 100%, 85% 100%);
    clip-path: polygon(55% 0, 65% 0, 105% 100%, 85% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -6600ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -6600ms ease-in-out infinite alternate;
}
#ui .text:nth-child(19) {
    -webkit-clip-path: polygon(60% 0, 70% 0, 110% 100%, 90% 100%);
    clip-path: polygon(60% 0, 70% 0, 110% 100%, 90% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -6400ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -6400ms ease-in-out infinite alternate;
}
#ui .text:nth-child(20) {
    -webkit-clip-path: polygon(65% 0, 75% 0, 115% 100%, 95% 100%);
    clip-path: polygon(65% 0, 75% 0, 115% 100%, 95% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -6200ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -6200ms ease-in-out infinite alternate;
}
#ui .text:nth-child(21) {
    -webkit-clip-path: polygon(70% 0, 80% 0, 120% 100%, 100% 100%);
    clip-path: polygon(70% 0, 80% 0, 120% 100%, 100% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -6000ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -6000ms ease-in-out infinite alternate;
}
#ui .text:nth-child(22) {
    -webkit-clip-path: polygon(75% 0, 85% 0, 125% 100%, 105% 100%);
    clip-path: polygon(75% 0, 85% 0, 125% 100%, 105% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -5800ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -5800ms ease-in-out infinite alternate;
}
#ui .text:nth-child(23) {
    -webkit-clip-path: polygon(80% 0, 90% 0, 130% 100%, 110% 100%);
    clip-path: polygon(80% 0, 90% 0, 130% 100%, 110% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -5600ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -5600ms ease-in-out infinite alternate;
}
#ui .text:nth-child(24) {
    -webkit-clip-path: polygon(85% 0, 95% 0, 135% 100%, 115% 100%);
    clip-path: polygon(85% 0, 95% 0, 135% 100%, 115% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -5400ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -5400ms ease-in-out infinite alternate;
}
#ui .text:nth-child(25) {
    -webkit-clip-path: polygon(90% 0, 100% 0, 140% 100%, 120% 100%);
    clip-path: polygon(90% 0, 100% 0, 140% 100%, 120% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -5200ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -5200ms ease-in-out infinite alternate;
}
#ui .text:nth-child(26) {
    -webkit-clip-path: polygon(95% 0, 105% 0, 145% 100%, 125% 100%);
    clip-path: polygon(95% 0, 105% 0, 145% 100%, 125% 100%);
    -webkit-animation: home-2-hero-wave-2 2000ms -5000ms ease-in-out infinite alternate;
    animation: home-2-hero-wave-2 2000ms -5000ms ease-in-out infinite alternate;
}

@-webkit-keyframes home-2-hero-wave-2 {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0.9) rotateX(20deg) rotateY(20deg) rotateZ(0deg);
        transform: translate(-50%, -50%) scale(0.9) rotateX(20deg) rotateY(20deg) rotateZ(0deg);
        color: #001e64;
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: translate(-50%, -50%) scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        color: #32e6ff;
    }
}

@keyframes home-2-hero-wave-2 {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0.9) rotateX(20deg) rotateY(20deg) rotateZ(0deg);
        transform: translate(-50%, -50%) scale(0.9) rotateX(20deg) rotateY(20deg) rotateZ(0deg);
        color: #001e64;
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: translate(-50%, -50%) scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        color: #32e6ff;
    }
}
/*---Hero Area Animation Effect End---*/

/*--- Home Version 2 Domain Name Search Start---*/

.home-2-domain-search-area .domain-search-wrapper form {
    width: 59%;
}
.home-2-domain-search-area input#domain-name {
    width: 440px;
    border-top-left-radius: var(--home-2-border-radious-25);
    border-bottom-left-radius: var(--home-2-border-radious-25);
}
.home-2-domain-search-area .domain-search-wrapper form button.theme-button {
    padding: 0;
    margin-left: 9px;
}
/*--- Home Version 2 Domain Name Search End---*/

/*--- Home Version 2 Services Area Start---*/
.home-2-services-area .single-service::before {
    background: #1E5CFF;
}
.home-2-services-area .single-service .hover-content {
    background: #FF58DA;
}
.home-2-services-area .single-service .hover-content::before {
    background: #2F72FF;
}
.home-2-services-area .single-service .hover-content::after {
    background: #E765FF;
}
/*--- Home Version 2 Services Area End---*/

/*--- Home Version 2 Pricing Table CSS Start---*/

.home-2 .pricing-table-box.active {
    background: #321d9a;
    background: -moz-linear-gradient(-45deg, var(--home-2-color-blue) 0%, var(--home-2-color-pink) 100%);
    background: -webkit-linear-gradient(-45deg, var(--home-2-color-blue) 0%, var(--home-2-color-pink) 100%);
    background: linear-gradient(-45deg, var(--home-2-color-blue) 0%, var(--home-2-color-pink) 100%);
}
.home-2 .pricing-table-box a:hover{
    color: var(--home-2-color-pink);
}
.home-2 .discount-tag ,.home-2 .testimonial-slide-box h5{
    color: var(--home-2-color-blue);
}
.home-2 .popular-price-tag {
    background: var(--home-2-button-gradient-color2);
}
/*--- Home Version 2 Pricing Table CSS End---*/

/*--- Home Version 2 Testimonial CSS Start---*/
.home-2-testimonial-area .testimonial-slide-box::before {
    background: var(--home-2-button-gradient-color2);
}
.home-2-testimonial-area .testimonial-slide-box::after {
    background: var(--home-2-button-gradient-color1);
}
.home-2-testimonial-area .testimonial-slide-box img {
    background: var(--home-2-button-gradient-color1);
}
.home-2-testimonial-area  .testimonial-slider.owl-carousel button.owl-dot.active {
    border: 5px solid var(--home-2-color-pink);
}
.home-2 .owl-dot.active {
    box-shadow: 0 0 0 6px rgba(255,0,126,.2);
}
.home-2-testimonial-area  .testimonial-slider.owl-carousel button.owl-dot {
    border: 5px solid var(--home-2-color-blue);
}
.home-2-testimonial-area .testimonial_slide_nav i, .home-2 .pagination-area ul li i {
    background: var(--home-2-button-gradient-color1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .7s;
}
.home-2-testimonial-area .testimonial_slide_nav i:hover, .home-2 .pagination-area ul li i:hover {
    background: var(--home-2-button-gradient-color2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*--- Home Version 2 Testimonial CSS End---*/

/*--- Home Version 2 Call To Action CSS Start---*/
.home-2-call-to-action-area {
    background-image: none;
    padding: 150px 0;
}
.home-2-call-to-action-area .section-overlay {
    background: var(--home-2-bg-gradient);
}
/*--- Home Version 2 Call To Action CSS End---*/

/*--- Home Version 2 FAQ CSS Start---*/
.home-2-faq-area {
    background: linear-gradient(to right, #1633ff 0%, #ff007e 100%);
}
.home-2-faq-area #accordion6 .panel, #accordion7 .panel {
    border: 1px solid var(--white-color);
}
.home-2-faq-area #accordion6 .panel-title a{
    color: var(--white-color);
}
/*--- Home Version 2 FAQ CSS End---*/

/*--- Home Version 2 Support Forum/Contact CSS Start---*/
.contact-area-2 .subm-btn.theme-button {
    text-align: center;
    line-height: 40px;
    position: relative;
}
.contact-area-2 .subm-btn.theme-button i{
    line-height: 44px;
}
.contact-area-2 .subm-btn.theme-button input {
    padding: 0;
    color: var(--home-2-color-blue);
    position: absolute;
    top: 7px;
    left: 50px;
    line-height: 26px;
}
.contact-area-2 .subm-btn.theme-button:hover input {
    left: 55px;
}
.contact-area-2 .graphic--nao {
    stroke: var(--home-2-color-blue);
}
/*--- Home Version 2 Support Forum/Contact CSS End---*/

/*--- Home Version 2 Footer 2 CSS Start---*/
.footer-area-2.footer-area {
    background: linear-gradient(to top, #0800B5 0%, #f700f1 100%);
}
.footer-area-2 .footer-wave {
    background: url(../img/all-effect-img/footer-2-wave-v6.svg) repeat-x;
}
.footer-area-2 .footer-newsletter-form form input {
    border-radius: var(--home-2-border-radious-25);
    width: 540px;
    padding: 10px 20px;
    height: 55px;
}
.footer-area-2 .footer-newsletter-form form .theme-button, .footer-area-2 .footer-newsletter-form form .theme-button::after, .footer-area-2 .footer-newsletter-form form .theme-button::before {
    border-top-left-radius: var(--home-2-border-radious-50);
    border-bottom-left-radius: var(--home-2-border-radious-50);
    padding: 0;
}
.footer-area-2 .footer-newsletter-form form .theme-button {
    margin-left: -70px;
    line-height: 30px;
}
.footer-area-2 .copyright-text p a{
    color: var(--home-2-color-pink);
}
.footer-area-2 .copyright-text p a:hover{
    color: var(--white-color);
}
/*--- Home Version 2 Footer CSS End---*/

/*-------------------------------------------
    30. Home Version 2 CSS End
-------------------------------------------*/

/*-------------------------------------------
    31. Home Version 3 CSS Start
-------------------------------------------*/
/* Home Version 3 Default CSS*/
.home-3 a:hover {
    color: var(--home-3-color-gold);
}
.home-3 .theme-button, .home-3 .theme-button:before{
    background: var(--home-3-default-gradiant-color1);
}
.home-3 .theme-button:after{
    background: var(--home-3-default-gradiant-color2);
}
.home-3 .theme-button, .home-3 .theme-button:before, .home-3 .theme-button:after{
    border-radius: var(--home-2-border-radious-25);
}
.home-3 h2.section-heading > span {
    background: var(--home-3-default-gradiant-color1);
}
.home-3.mean-container a.meanmenu-reveal{
    color: var(--home-3-color-gold);
}
.home-3.mean-container a.meanmenu-reveal span {
    background-color: var(--home-3-color-gold);
}
.home-3.mean-container .mean-nav ul li a:hover {
    background-color: var(--home-3-color-gold);
}
.home-3 #scroll {
    background: transparent;
    color: var(--home-3-color-orange);
}
.home-3 .chat-bot-box {
    background: var(--home-3-color-gold);
}
.home-3 .chat-bot-box:hover {
    color: var(--white-color);
}
.home-3 .bubbles-1, .home-3 .bubbles-2, .home-3 .bubbles-3, .home-3 .bubbles-4, .home-3 .bubbles-5, .home-3 .bubbles-7 {
    opacity: .3;
}
/* Home Version 3 Default CSS*/

/*Main Menu Area CSS Start*/
.home-3-menu-area .top-nav {
    border-bottom: 1px solid rgb(218, 218, 218);
}
.home-3-menu-area #mainNav .navbar-nav .nav-item .nav-link, .home-3-menu-area .top-nav ul li a{
    color: #080245;
}
.home-3-menu-area #mainNav .navbar-nav .nav-item .nav-link:hover, .home-3-menu-area  #mainNav .navbar-nav .nav-item .nav-link.active, .home-3-menu-area #mainNav ul.navbar-nav li.nav-item.dropdown-box .dropdown-list a:hover,
.home-3-menu-area .top-nav ul li a:hover{
    color: var(--home-3-color-orange);
}
.home-3-menu-area #mainNav ul.navbar-nav li.nav-item.dropdown-box .dropdown-list {
    border: 1px solid var(--home-3-color-orange);
}
.home-3-menu-area #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover, .home-3-menu-area #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link.active {
    color: var(--home-3-color-orange) !important;
}
/*Main Menu Area CSS End*/

/*Header Area CSS Start*/

.home-3-banner-area {
    background: rgba(250, 240, 240, 0.3);
}
.home-3-banner-area .footer-wave {
    background: url(../img/all-effect-img/home-3-hero-wave.svg) repeat-x;
}
.home-3-banner-area .overlay {
    position: absolute;
    background: rgba(245,246,250,0.1);
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#particles {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#hero-area-intro {
    position: absolute;
    left: 0;
    top: 36%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    right: 0;
    width: 100%;
    margin: 0 auto;
}
.home-3-hero-content {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#hero-area-intro h1 {
    font-size: 50px;
}
#hero-area-intro .hero-button-box {
    margin-top: 40px;
    justify-content: flex-start;
    display: flex;
}
.home-3-hero-img img {
    height: 400px;
}

/*Header Area CSS End*/

/*--- Home Version 3 Domain Name Search Area Start---*/
.home-3-domain-name-search-area .domain-search-wrapper form, .home-3-domain-name-search-area input#domain-name,
.home-3-domain-name-search-area .domain-search-custom-placeholder{
    border-radius: var(--home-2-border-radious-25);
}
/*--- Home Version 3 Domain Name Search Area End---*/

/*--- Home Version 3 Services Area Start---*/
.home-3-services-area .single-service::before {
    background: #f22328;
}
.home-3-services-area .single-service .hover-content {
    background: #fe9e1f;
}
.home-3-services-area .single-service .hover-content::before {
    /*background: #0BA7FF;*/
    background: #fb3e54;
}
.home-3-services-area .single-service .hover-content::after {
    background: #fcaf3d;
}
/*--- Home Version 3 Services Area End---*/
/*--- Home Version 3 Pricing Table CSS Start---*/

.pricing-table-area-3 .pricing-table-box.active {
    background: #321d9a;
    background: -moz-linear-gradient(-45deg, var(--home-3-color-orange) 0%, var(--home-3-color-gold) 100%);
    background: -webkit-linear-gradient(-45deg, var(--home-3-color-orange) 0%, var(--home-3-color-gold) 100%);
    background: linear-gradient(-45deg, var(--home-3-color-orange) 0%, var(--home-3-color-gold) 100%);
}
.pricing-table-area-3 .pricing-table-box a:hover, .pricing-table-area-3 .discount-tag ,.pricing-table-area-3 .testimonial-slide-box h5, .home-3-all-blog-posts-area .single-blog-content > a:hover, .home-3-all-blog-posts-area .single-blog-content h4 a:hover{
    color: var(--home-3-color-orange);
}
.pricing-table-area-3 .pricing-table-box-price, .pricing-table-area-3 .pricing-table-box-price span {
    color: var(--home-3-color-gold);
}
.pricing-table-area-3 .popular-price-tag {
    background: var(--home-3-color-orange);
    height: 70px;
    width: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -8px;
    top: -10px;
    font-size: 13px;
    padding: 10px;
}
.pricing-table-area-3 .pricing-table-box a, .pricing-table-area-3 .single-service-content a, .pricing-table-area-3 .single-blog-content > a {
    color: var(--default-deep-heading-color);
}
.pricing-table-area-3 .pricing-table-box.active a {
    color: var(--white-color);
}
/*--- Home Version 3 Pricing Table CSS End---*/

/*--- Home Version 3 Why Choose Us CSS Start---*/
.home-3-why-choose-us-area .why-choose-content-box h4, .home-3-why-choose-us-area .why-choose-inner-content i, .home-3-our-speciality-area .speciality-content i, .home-3-our-speciality-area .speciality-content p span,
.home-3-testimonial-area .testimonial-slide-box h5, .home-3-counter-area .counter-number{
    color: var(--home-3-color-gold);
}
/*--- Home Version 3 Why Choose Us CSS End---*/

/*--- Home Version 3 Testimonial CSS Start---*/
.home-3-testimonial-area .testimonial-slide-box::before {
    background: var(--home-3-default-gradiant-color2);
}
.home-3-testimonial-area .testimonial-slide-box::after {
    background: var(--home-3-default-gradiant-color1);
}
.home-3-testimonial-area .testimonial-slide-box img {
    background: var(--home-3-default-gradiant-color1);
}
.home-3-testimonial-area  .testimonial-slider.owl-carousel button.owl-dot.active {
    border: 5px solid var(--home-3-color-orange);
}
.home-3 .owl-dot.active {
    box-shadow: 0 0 0 6px rgba(242,35,40,.2);
}
.home-3-testimonial-area  .testimonial-slider.owl-carousel button.owl-dot {
    border: 5px solid var(--home-3-color-gold);
}
.home-3-testimonial-area .testimonial_slide_nav i, .home-3 .pagination-area ul li i {
    background: var(--home-3-default-gradiant-color1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .7s;
}
.home-3-testimonial-area .testimonial_slide_nav i:hover, .home-3 .pagination-area ul li i:hover {
    background: var(--home-3-default-gradiant-color2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*--- Home Version 3 Testimonial CSS End---*/

/*--- Home Version 3 Call To Action CSS Start---*/
.home-3-call-to-action-area .section-overlay{
    background: #f5f6fa;
}
.home-3-call-to-action-area .call-to-content h2, .home-3-call-to-action-area .call-to-content h2 > span{
    color: var(--home-3-color-gold);
}
/*--- Home Version 3 Call To Action CSS End---*/

/*--- Home Version 3 FAQ CSS Start---*/
.home-3-faq-area {
    background: linear-gradient(to right, #f22328 0%, #fe9e1f 100%);
}
.home-3-faq-area #accordion6 .panel, #accordion7 .panel {
    border: 1px solid var(--white-color);
}
.home-3-faq-area #accordion6 .panel-title a{
    color: var(--white-color);
}
/*--- Home Version 3 FAQ CSS End---*/

/*--- Home Version 3 Contact/Support CSS Start---*/
.home-3-contact-area .contact-form-wrapper {
    margin-left: 100px;
    padding: 50px;
    border-radius: var(--border-radious-5);
}
.contact-form-wrapper .input--nao{
    width: 100%;
}
.home-3-contact-area .graphic--nao {
    stroke: var(--home-3-color-gold);
}
/*--- Home Version 3 Contact/Support CSS End---*/

/*--- Home Version 3 Footer 3 CSS Start---*/
.footer-area-3.footer-area {
    background: var(--white-color);
}
.footer-area-3 .footer-wave {
    background: url(../img/all-effect-img/home-3-hero-wave.svg) repeat-x;
    transform: rotate(180deg);
}
.footer-area-3 .footer-newsletter-form form input {
    border-radius: var(--home-2-border-radious-25);
    width: 540px;
    padding: 10px 20px;
    height: 55px;
    border: 1px solid rgb(218, 218, 218);
}
.footer-area-3 .footer-newsletter-form form .theme-button, .footer-area-3 .footer-newsletter-form form .theme-button::after, .footer-area-3 .footer-newsletter-form form .theme-button::before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 14px 30px 16px;
}
.footer-area-3 .footer-newsletter-form form .theme-button {
    margin-left: -130px;

}
.footer-area-3 .copyright-text {
    border-top: 1px solid rgb(218, 218, 218);
}
.footer-area-3 .copyright-text p a {
    color: var(--home-3-color-gold);
}
.footer-area-3 .footer-widget h4, .footer-area-3 .footer-links-list li a, .footer-area-3 .copyright-text p, .footer-area-3 .footer-social-links li a {
    color: var(--default-deep-heading-color);
}
.footer-area-3 .footer-logo p, .footer-area-3 .footer-logo p a{
    color: var(--default-deep-heading-color);
}
.footer-area-3 .footer-links-list li a:hover, .footer-area-3 .footer-social-links li a:hover, .footer-area-3 .copyright-text p a:hover {
    color: var(--home-3-color-orange);
}
.footer-area-3 .footer-newsletter h3{
    color: var(--home-3-color-gold);
}
/*--- Home Version 3 Footer 3 CSS End---*/

/*-------------------------------------------
    31. Home Version 3 CSS End
-------------------------------------------*/

/*-------------------------------------------
    32. Login Page CSS End
-------------------------------------------*/
.login-form-1 {
    padding: 5%;
    box-shadow: 0 0 33px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    border-radius: var(--border-radious-5);
}
.login-form-1 h3{
    text-align: center;
}
.login-wrapper .subm-btn.theme-button {
    margin-bottom: 1em;
}
.login-container form{
    padding: 10%;
}

.login-form-1 .login-yet a {
    color: #0062cc;
    display: inline-block;
}
/*-------------------------------------------
    32. Login Page CSS End
-------------------------------------------*/

/*-------------------------------------------
    33. Responsive Design CSS
-------------------------------------------*/

/*=====================================
    Extra Large Screen
========================================*/

  @media only screen and (min-width: 1920px){
  }

/*=====================================
    For Large Screen
========================================*/

  /*------Max 1200px Width Screen------*/

  @media only screen and (max-width: 1775px) {

  }

/*--------Max 1680px Width Screen---------*/
@media only screen and (max-width: 1680px) {
}

/*--------Max 1366px Width Screen---------*/

@media only screen and (max-width: 1366px) {

    /*Default for Max 1366px Width Devices*/
    body , .form-control{
        font-size: 14px;
    }
    h2.section-heading {
        font-size: 42px;
    }
    p.section-subheading{
        font-size: 17px;
    }
    h4 {
        font-size: 22px;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 20px;
    }
    .call-to-content h2 {
        font-size: 31px;
    }
    .call-to-action-area .call-to-content h2 a {
        font-size: 26px;
    }
    .call-to-action-area .call-to-content h2 a i {
        font-size: 20px;
    }

    /*---- Header CSS ---*/
    #wrapper {
        width: 330px;
        height: 425px;
    }
    .domain-search-wrapper form {
        width: 62%;
    }
    input#domain-name {
        width: 421px;
        font-size: 14px;
    }
    .domain-search-wrapper form button.theme-button {
        padding: 16px 44px 18px;
    }
    #blue-side-bubble-1{
        width: 250px;
    }
    .page-banner-area #blue-side-bubble-1 {
        right: 80px;
        width: 141px;
    }
    #pink-side-bubble-1{
        width: 450px;
    }
    #pink-side-bubble-2{
        width: 350px;
    }
    #pink-side-bubble-11{
        width: 380px;
    }
    #pink-side-bubble-22{
        width: 220px;
    }
    #blue-side-bubble-11{
        right: -339px;
        bottom: 273px;
        width: 400px;
    }

    /*---- FAQ CSS ---*/
    .faq-img-box {
        left: 19px;
        top: 74px;
    }
    .faq-img-box img {
        height: 310px;
    }
    .footer-newsletter-form form .theme-button {
        padding: 14px 40px 15px;
    }
    /*---- Home 2 CSS ----*/
    #ui .text {
        font-size: 4rem;
    }
    .home-2-banner-area .theme-button i {
        line-height: 47px;
    }
    /*---- Home 3 CSS ----*/
    .footer-area-3 .footer-newsletter-form form .theme-button {
        margin-left: -124px;
        padding: 16px 30px 17px;
    }

}

/*--------Max 1200px Width Screen---------*/

  @media only screen and (max-width: 1200px) {
      body {
          font-size: 14px;
      }
      h2.section-heading {
          font-size: 40px;
      }
      p.section-subheading{
          font-size: 16px;
      }
      h4 {
          font-size: 21px;
      }
  }

/*--------Min 1200px Width Screen--------*/
  @media only screen and (min-width: 1200px) {

  }

/*=====================================
    For Medium Screen
========================================*/

@media only screen and (max-width: 1199px){
    .widget-recent-posts ul li a p {
        line-height: 18px;
    }
    .contact_us_box {
        padding: 50px 16px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px){
    /*Domain Area CSS*/
    p{
        font-size: 14px;
    }
    input#domain-name {
        width: 291px;
    }
    .single-service, .single-features {
        padding: 30px;
    }
    .single-blog-content h6 {
        font-size: 13px;
    }
    .single-blog-content {
        padding: 30px 15px 38px;
    }
    .single-counter h4 {
        font-size: 17px;
    }
    .single-counter {
        padding: 30px 15px;
    }
    .counter-number {
        font-size: 31px;
    }
    #accordion6 .panel-title a, #accordion7 .panel-title a {
        font-size: 21px;
    }
    .faq-img-box {
        left: 19px;
        top: 102px;
    }
    .faq-img-box img {
        height: 279px;
    }
    .support-forum-img-box img {
        height: 375px;
    }
    /*---- Home 2 CSS ----*/
    #ui .text {
        font-size: 3.25rem;
    }
    .home-2-domain-search-area input#domain-name {
        width: 310px;
    }
}

@media only screen and (max-width: 992px) {

}

/*======================================
        Tablet layout
=========================================*/

  @media only screen and (max-width: 991px) {
      p {
          font-size: 14px;
      }
      .single-service img {
          height: 42px;
      }
      .why-choose-bg-shape {
          height: 326px;
      }
      .why-choose-img {
          right: 30px;
          top: 82px;
          height: 165px;
      }
      .why-choose-wrapper .row:nth-child(3n) .why-choose-img {
          right: 57px;
      }
      .why-choose-wrapper .row:nth-child(3n) .why-choose-img {
          right: 57px;
      }
      .why-choose-wrapper .row:nth-child(4n) .why-choose-img {
          height: 200px;
          top: 58px;
      }
      .why-choose-wrapper .row.single-choose-box {
          margin-bottom: 30px;
      }
      .why-choose-wrapper .row.single-choose-box:last-child {
          margin-bottom: 0;
      }
      .our-speciality-area .our-speciality-content-wrap {
          padding: 50px 10px 36px;
          box-shadow: 0 0 33px 0 rgba(205, 205, 205, 0.35);
      }
      .our-speciality-area .our-speciality-content-wrap .section-title-area {
          margin-bottom: 0;
      }
      .our-speciality-area .our-speciality-content-wrap p.section-subheading {
          margin: 18px auto 30px;
      }
      .speciality-box {
          padding: 18px 23px;
      }
      .testimonial_slide_nav .testi_prev {
          top: 23px;
      }
      .testimonial_slide_nav .testi_next {
          bottom: 20px !important;
      }
      .testimonial-slider.owl-carousel .owl-dots {
          bottom: 33%;
      }
      .call-to-action-area{
          padding: 100px 0;
      }
      .call-center-float-box {
          bottom: -110px;
      }
      .call-center-float-box img {
          height: 330px;
      }
      .call-to-content {
          margin-right: 95px;
      }
      .single-blog-content h6 {
          font-size: 12px;
          display: flex;
          flex-direction: column;
      }
      .single-blog-content img {
          height: 25px;
          width: auto;
      }
      .single-blog-content {
          padding: 20px 6px 20px;
      }
      .single-blog-content h6 span {
          margin-top: 10px;
      }
      .single-blog-content h4 {
          margin: 20px 0 10px;
      }
      /*Counter Area*/
      .single-counter h4 {
          margin: 17px 0 12px;
          font-size: 17px;
      }
      .counter-number {
          font-size: 25px;
      }
      .counter-icon img {
          height: 45px;
      }
      .single-counter {
          padding: 16px 10px;
          min-height: 180px;
      }
      .row.faq-wrapper {
          justify-content: center;
      }
      .row.faq-wrapper .col-md-5 , .contact-area .col-12.col-sm-12.col-md-3.col-lg-5{
          display: none;
      }
      .faq-questions-area h2.section-heading {
          text-align: center !important;
      }
      .contact-area .row {
          justify-content: center;
      }
      .contact-form-wrapper {
          margin-left: 0;
      }
      .testimonial-area {
          padding: 100px 0 70px;
      }
      /*About Page CSS*/
      .icon-wave-bg img {
          height: 44px;
      }
      .single-features {
          min-height: 286px;
      }
      .about-page-counter-area {
          padding: 70px 0;
      }
      .subm-btn.theme-button input {
          font-size: 14px;
          padding: 13px 26px 14px;
      }
      .about-media-box .play-button {
          top: 40%;
          left: 45%;
      }
      .widget-search {
          width: 60%;
          margin-top: 30px;
      }
      .widget ul li a img {
          width: 10%;
      }
      .pricing-details-wrap table tbody tr td:first-child {
          width: 15%;
          padding: 0 5px;
      }
      .faq-page-area #accordion6 .panel-title a, .faq-page-area #accordion7 .panel-title a {
          font-size: 20px;
      }
      .error-page-area img {
          height: 210px;
      }
      .service-details-page-area-2 aside#sidebar {
          border-top: 1px solid #e5e9ec;
          margin-top: 30px;
      }
      .home-3-contact-area .contact-form-wrapper {
          margin-left: 0;
      }

  }
  @media only screen and (min-width: 991px) {

  }

  @media only screen and (min-width: 768px) and (max-width: 991px){

      /*Main Menu Bar*/
      #mainNav, .top-nav{
          /*display: none!important;*/
      }
      .domain-search-wrapper form {
          width: 90%;
      }
      .domain-name-search-area .section-heading {
          font-size: 23px;
      }
      .domain-name-search-area .section-title-area {
          margin-bottom: 40px;
      }
      .domain-name img {
          height: auto;
          width: 55px;
      }
      input#domain-name {
          width: 301px;
      }
      /*Service CSS*/
      .single-service, .single-features {
          padding: 26px 16px 18px;
      }
      .single-service-content p {
          padding-bottom: 5px;
      }
      h4 {
          font-size: 19px;
      }
      /*Pricing Table CSS*/
      .pricing-table-box {
          padding: 27px 8px;
      }
      .pricing-table-box-price {
          font-size: 33px;
          line-height: 36px;
          margin-bottom: 9px;
      }
      .pricing-table-listing {
          margin-bottom: 8px;
          margin-top: 0;
      }
      .discount-tag {
          font-size: 17px;
          margin-bottom: 20px;
      }
      .popular-price-tag {
          padding: 7px 25px;
          left: -28px;
          top: 8px;
          font-size: 12px;
      }
      footer #blue-side-bubble-111 {
          width: 128px;
      }
      #ui .text {
          font-size: 3.25rem;
      }
      .home-2-domain-search-area input#domain-name {
          width: 188px;
      }
      .footer-area-2 .footer-newsletter-form form input {
          width: 340px;
      }
      .pricing-table-area-3 .popular-price-tag {
          height: 50px;
          width: 50px;
          left: -13px;
          top: -15px;
          font-size: 10px;
      }
      /*---- Home 3 CSS ----*/
      #hero-area-intro h1 {
          font-size: 40px;
      }
      .home-3-hero-img img {
          height: 300px;
      }

  }

@media only screen and (max-width: 768px) {
    /*Main Menu Bar*/
    #mainNav, .top-nav {
        display: none !important;
    }

}

/*=======================================
        For Small Devices
=========================================*/
  @media only screen and (max-width: 767px) {
      p.section-subheading {
          width: 70%;
          max-width: 100%;
      }

      /*Domain CSS*/
      .domain-search-wrapper {
          padding: 30px 30px 36px;
      }
      .domain-search-wrapper form {
          width: 100%;
      }
      input#domain-name {
          width: 239px;
          min-width: 100%;
      }
      .domain-name-img-box {
          width: 90%;
          max-width: 100%;
      }

      /*Services CSS*/
      .single-service, .single-features, .pricing-table-box {
          padding: 61px 40px 58px 40px;
          width: 70%;
          margin: 0 auto 30px;
      }

      /*Why Choose US CSS*/
      .row.single-choose-box {
          flex-direction: column-reverse;
      }
      .why-choose-image-box {
          justify-content: center;
          display: flex;
      }
      .why-choose-img {
          right: 120px;
      }
      .why-choose-image-box {
          margin-bottom: 28px;
          padding-left: 30px;
      }
      .why-choose-wrapper .row:nth-child(2n) {
          flex-direction: column-reverse;
      }
      .why-choose-wrapper .row:nth-child(2n) .why-choose-img {
          left: 126px;
      }
      .why-choose-wrapper .row:nth-child(3n) .why-choose-img {
          right: 150px;
      }
      .call-to-content {
          margin-right: -50px;
      }
      /*Our Blog CSS*/
      .single-blog-post {
          width: 65%;
          margin: 0 auto 30px;
      }
      .single-blog-content {
          padding: 20px 20px 20px;
      }
      /*Counter Section CSS*/
      .counter-area {
          padding: 100px 0 70px;
      }
      .single-counter {
          margin-bottom: 30px;
      }
      #accordion6 .panel-title a, #accordion7 .panel-title a {
          font-size: 21px;
      }
      /*Footer CSS*/
      .footer-widget {
          border-top: 1px solid rgba(44, 212, 217, .2);
          padding: 30px 0 0 0;
          margin-top: 30px;
      }
      .footer-logo {
          padding: 0;
      }
      .footer-logo img {
          margin-bottom: 20px;
          padding: 15px;
          background-color: #fff;
      }
      .subm-btn.theme-button input {
          font-size: 14px;
      }
      /*About CSS*/
      .about-us-area .row {
          flex-direction: column-reverse;
      }
      .about-us-img {
          text-align: center;
      }
      .about-us-img img {
          height: 272px;
          margin-bottom: 30px;
      }
      .client-logo-slider-area {
          padding: 70px 0;
      }
      .about-media-box .play-button {
          top: 36%;
      }
      .about-page-counter-area {
          padding: 70px 0 25px;
      }
      .team-content {
          padding: 15px;
      }
      .team-content h4 {
          font-size: 17px;
      }
      .team-content p {
          font-size: 13px;
      }
      /*Blog CSS*/
      .pagination-area li .page-link {
          height: 30px;
          width: 30px;
          padding: 0;
      }
      .widget-recent-posts ul li a p > span {
          padding-top: 5px;
      }
      .pricing-table-box-price {
          font-size: 36px;
      }
      #blue-side-bubble-1, #blue-side-bubble-11, footer #blue-side-bubble-111, #pink-side-bubble-22, #pink-side-bubble-11{
          display: none;
      }
      .contact-page-area .support-forum-img-box img {
          margin-bottom: 30px;
      }
      .faq-page-area .faq-questions-area {
          flex-direction: column;
      }
      /*---- Home 2 CSS ----*/
      .home-2-domain-search-area .domain-search-wrapper form {
          width: 100%;
      }
      .home-2-domain-search-area input#domain-name {
          width: 290px;
      }
      #ui .text {
          font-size: 2.60rem;
      }
      .footer-area-2 .footer-newsletter-form form input {
          width: 300px;
          min-width: 100%;
      }
      .domain-search-wrapper .section-title-area {
          margin-bottom: 45px;
      }
      /*---- Home 3 CSS ----*/
      .home-3-hero-img {
          display: none;
      }
      .home-3-hero-content {
          text-align: center;
      }
      .home-3-hero-content p {
          margin-top: 20px;
      }
      #hero-area-intro .hero-button-box {
          justify-content: center;
      }
      .footer-area-3 .footer-newsletter-form form input {
          width: 340px;
      }
      .footer-area .footer-wave{
          bottom: CALC(95% - 7px);
      }
      .footer-area-3 .footer-widget {
          border-top: 1px solid rgb(218, 218, 218);
      }
      .footer-area-2 .footer-widget {
          border-top: 1px solid rgba(44, 212, 217, .2);
      }
      .footer-area {
          margin-top: 0;
      }

  }

  /*========================================
            For large mobile
  =========================================*/

@media only screen and (max-width: 766px){
    /*Header CSS*/
    .home-banner-area, .hero-area-wrapper {
        height: 550px;
    }
    .hero-area-content h1 {
        font-size: 36px;
        margin-bottom: 28px;
    }
    #wrapper {
        width: 100%;
        height: auto;
    }
    .hero-area-content {
        border: 0;
        padding: 20px;
    }
    .scroll-to-bottom a {
        padding-top: 33px;
    }
    #scroll-bottom a span {
        top: -26px;
    }
    #pink-side-bubble-2 {
        top: 140px;
        width: 210px;
    }
    #blue-side-bubble-1 {
        width: 280px;
    }
    #pink-side-bubble-1 {
        width: 320px;
    }
    /*Domain CSS*/
    .domain-search-wrapper {
        padding: 30px 25px 36px;
    }
    .domain-search-wrapper form {
        width: 69%;
    }
    input#domain-name {
        width: 173px;
    }
    .domain-search-wrapper form button.theme-button {
        padding: 16px 11px 18px;
    }
    .domain-name img {
        height: auto;
        width: 40px;
    }
    .domain-name span {
        margin-right: 7px;
        font-size: 12px;
    }
    .section-title-area {
        margin-bottom: 30px;
    }
    .single-service, .single-features, .pricing-table-box {
        padding: 33px 40px 30px 40px;
        width: 76%;
    }
    .popular-price-tag {
        padding: 7px 33px;
        left: -20px;
        top: 21px;
    }
    p.section-subheading {
        width: 90%;
    }
    .why-choose-wrapper .row:nth-child(2n) .why-choose-content-box {
        padding-left: 0;
    }
    #pink-side-bubble-22 {
        width: 236px;
        top: 102px;
    }
    #pink-side-bubble-11 {
        width: 264px;
    }
    .testimonial-slide-box {
        width: 100%;
        padding: 60px 20px 40px;
        box-shadow: 0 0 12px 0 rgba(205, 205, 205, 0.35);
    }
    .testimonial-slide-box p {
        padding: 0 15px;
    }
    .testimonial-slider.owl-carousel .owl-dots {
        margin-left: 0;
    }
    .testimonial-slider .item {
        padding: 0 0 30px;
    }
    .call-to-content {
        margin-right: 0;
    }
    .call-to-content h2 {
        font-size: 26px;
    }
    .call-to-action-area .call-to-content h2 a {
        font-size: 20px;
    }
    .call-to-action-area .call-to-content h2 a i {
        font-size: 15px;
    }
    .all-blog-posts-area .section-subheading {
        width: 80%;
    }
    .single-blog-post {
        width: 70%;
    }
    .single-counter {
        padding: 26px 10px;
    }
    h2.section-heading {
        font-size: 38px;
    }
    #accordion6 .panel-title a, #accordion7 .panel-title a {
        font-size: 18px;
    }
    .footer-newsletter-form form input.form-control {
        width: 200px;
    }
    .footer-newsletter-form form .theme-button {
        padding: 14px 11px 15px;
    }
    .footer-main-content-area {
        padding: 70px 20px 50px;
    }
    .footer-wave {
        bottom: CALC(95% - 7px);
    }
    .single-features {
        min-height: auto;
    }
    h1.header-caption-heading {
        font-size: 38px;
    }
    .features-area .bubble-box{
        display: none;
    }
    #ui .text{
        line-height: 56px;
    }
    .home-2-banner-area .hero-button-box.text-center {
        bottom: 124px;
    }
    .home-2-banner-area .scroll-to-bottom a {
        font-size: 11px;
    }
    .home-2-banner-area #scroll-bottom a span {
        width: 16px;
        height: 16px;
        top: -5px;
    }
    .footer-area-2 .footer-newsletter-form form input{
        width: 255px;
    }
    .footer-area-3 .footer-newsletter-form form input {
        width: 340px;
    }

}

  @media only screen and (min-width: 480px) and (max-width: 766px){
      .single-service, .single-features, .pricing-table-box, .single-blog-post {
          width: 74% !important;
          margin-left: auto!important;
          margin-right: auto!important;
      }
      .home-3-domain-name-search-area .domain-search-wrapper form {
          border: 1px solid #dfe5e5;
      }
      .home-3-domain-name-search-area input#domain-name, .home-3-domain-name-search-area .domain-search-custom-placeholder {
          border: 1px solid transparent;
      }
  }

@media only screen and (max-width:480px){

    .select-bar, .why-choose-image-box , .call-center-float-box, footer #pink-side-bubble-222,
    footer #pink-side-bubble-111{
        display: none;
    }
    .domain-search-wrapper {
        padding: 30px 25px 36px;
    }
    input#domain-name {
        width: 173px;
    }
    .domain-search-wrapper form button.theme-button {
        padding: 16px 11px 18px;
    }
    .domain-name img {
        height: auto;
        width: 40px;
    }
    .domain-name span {
        margin-right: 7px;
        font-size: 12px;
    }
    .single-service, .single-features, .pricing-table-box {
        width: 100%;
    }
    .single-blog-post {
        width: 100%;
    }
    .footer-area {
        padding: 50px 0 50px;
    }
    .subm-btn.theme-button input {
        padding: 10px 15px 14px;
    }
    #content .card-footer-box div {
        margin-right: 15px;
    }
    .pricing-details-wrap table .pricing-table-box-price {
        padding: 0 10px;
    }
    .domain-search-wrapper form {
        width: 60%;
        border: 1px solid transparent;
    }
    input#domain-name, .domain-search-custom-placeholder{
        border: 1px solid #dfe5e5;
    }
    .call-to-content {
        justify-content: center;
    }
    .support-forum-img-box {
        text-align: center;
    }
    .contact-page-area .support-forum-img-box img {
        height: 203px;
    }
    #ui .text {
        font-size: 2rem;
    }
    .home-2-domain-search-area .domain-search-wrapper form {
        width: 90%;
        border: 1px solid #dfe5e5;
    }
    .home-2-domain-search-area input#domain-name, .home-2-domain-search-area .domain-search-custom-placeholder {
        border: 1px solid transparent;
    }
    .why-choose-us-area {
        padding: 100px 0 80px;
    }
    .footer-area .bubble-box{
        display: none;
    }
    #hero-area-intro h1 {
        font-size: 36px;
    }
    .row.login-wrapper {
        margin: 0 5%;
    }

}

/*=========================================
        For very little mobile
=========================================*/
  @media only screen and (min-width:300px) and (max-width:479px){
    /*Header Area*/
      .scroll-to-bottom a {
          left: 45%;
      }
      .play-button {
          height: 50px!important;
          width: 50px!important;
          top: 33% !important;
          left: 42% !important;
          font-size: 17px;
      }
      .widget-search {
          width: 100%;
      }
      h2.section-heading {
          font-size: 36px;
      }
      #content .card-body h2 {
          line-height: 24px;
          font-size: 22px;
      }
      .widget ul li a img {
          width: 17%;
      }
      #content .share-article {
          flex-direction: column;
      }
      #content .share-box {
          margin-bottom: 10px;
      }
      #content blockquote {
          padding: 12px 30px 22px 30px;
      }
      .domain-search-wrapper form {
          width: 100%;
      }
      .testimonial-slide-box {
          width: 75%;
      }
      .error-page-area img {
          height: 135px;
      }
      #ui .text {
          font-size: 38px;
          line-height: 47px;
      }
      .home-2-banner-area .hero-button-box.text-center {
          bottom: 105px;
      }
      .home-2-banner-area .scroll-to-bottom a{
          display: none;
      }
      .home-2-domain-search-area .domain-search-wrapper form {
          width: 100%;
      }
      .home-2-domain-search-area .domain-search-wrapper form .form-row.align-items-center {
          display: flex;
          justify-content: space-between;
          padding: 0 14px;
      }
      .home-2-domain-search-area .domain-search-wrapper {
          padding: 30px 15px 36px;
      }
      .home-2-domain-search-area input#domain-name {
          width: 168px;
      }
      .home-3-domain-name-search-area .domain-search-wrapper form {
          border: 1px solid transparent;
          width: 100%;
      }
      .home-3-domain-name-search-area input#domain-name, .home-3-domain-name-search-area .domain-search-custom-placeholder {
          border: 1px solid #dfe5e5;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
      }
      .footer-area-3 .footer-newsletter-form form input {
          width: 288px;
      }
      #content .card-footer-box div {
          margin-right: 12px;
      }
      .blog-page-area .card-footer-box {
          font-size: 12px;
      }
      #content .card-footer-box div.author-box span{
          display: none;
      }
      .classic-blog-button-box .theme-button {
          padding: 9px 18px 10px;
          font-size: 12px;
      }

  }