/*
-------------------------------------------------
  Theme Name: And Host - Domain Hosting HTML Template
  Theme URL: http://demo.anditthemes.com/html/and-host/
  Author: webguru071
  Author URL:  
  Creation Date: 20/02/2020
  Description:A default stylesheet for  And Host - Domain Hosting HTML Template
  Version: 1.00
  Primary use: Business,Domain, hosting, host, responsive, bootstrap, html5, clean, modern, creative, landing page, app landing etc.
  Support: andimpex@gmail.com,

  ---------------------------------------------------
  Developed By: Suraiya Aysha
  Developer URL: http://ayshatech.com/

  ---------------------------------------------------

  --------------------------------------------------
  Table of Contents
  --------------------------------------------------
  1. General CSS
  2. Typography CSS
  3. Button CSS
  4. Chat Bot Area CSS
  5. Scroll To Top Area
  6.Preloader Area Start
  7. Header Area
  8. Domain Name Search Area
  9. Services Area
  10. Pricing Table
  11. Features CSS
  12. Why Choose Us
  13. Counter Area CSS
  14. Our Speciality Area
  15. Testimonial Area CSS
  16. Call To Action CSS
  17. Home Blog Posts
  18. FAQ Area CSS
  19. Client Logo Slider
  20. Contact/Support Forum CSS
  21. Footer Area/Copyright Area
  22. Video Play CSS
  23. About Page
  24. Blog Page
  25. Blog Details Page
  26. Services Page CSS
  27. FAQ Page CSS
  28. 404 Page CSS
  29. Contact Page CSS
  30. Home Version 2
  31. Home Version 3 Page
  32. Login Page CSS
  33. Responsive CSS

------------------------------------------------ */


/* Use font link */

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap');

/* 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 {
      height: 100%;
      margin: 0;
  }

body {
    background: #fff none repeat scroll;
    font-size: 16px;
    font-weight: normal;
    font-family: 'Lato', sans-serif;
    color: #777c87;
    letter-spacing: 0.05em;
    overflow-x: hidden;
}

p{
  line-height: 1.75;
  color: #777c87;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
}

a {
  color: #101127;
}
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;
      color: #0a8aff;
  }

  ::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: 'Nunito', 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 {
    margin-bottom: 60px;
    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: 100px 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: 94px;
    display: flex !important;
    transition: all ease .6s;
    top:54px
}
#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: 16px;
    padding: 0.75em 15px;
    letter-spacing: 1px;
    position: relative;
    font-weight: bold;
    color: #fff;
}
#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: #2cd4d9;
}
#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: 25px 0 10px;
}
.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: 61px 40px 58px 40px;
    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;
}

.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: 100px 0 70px;
}
.pricing-table-box{
    background-color: #fff;
    box-shadow: 0 14px 45px 0 rgba(205, 205, 205, 0.35);
    border-radius: 5px;
    padding: 50px 15px;
    transition:  all ease-in-out 0.5s;
    text-align: center;
    transform: translateY(0px);
    position: relative;
    margin: 0 0 30px;
}
.pricing-table-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 33px 6px rgba(0,0,0,0.1);
}
.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;
    padding: 30px 20px;
}
.single-counter h4 {
    margin: 20px 0 15px;
    font-size: 22px;
}
.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: 14px;
    }
    .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;
      }

  }
  /*-------------------------------------------
        24. Responsive Design End
  -------------------------------------------*/