/*
-------------------------------------------------
  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 */



/* Use style sheet */

@import url('https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css');
@import url('iconfont.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(https://cdn.bootcdn.net/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css);
@import url(https://cdn.bootcdn.net/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css);
@import url(https://cdn.bootcdn.net/ajax/libs/venobox/1.8.6/venobox.min.css);
@import url(https://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css);
@import url(https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css);
@import url(meanmenu.min.css);

/***

/*-----------------------------------------------
            1. General Style
-------------------------------------------------*/
#particle-canvas {
    width: 100%;
    height: 90vh;
    vertical-align: middle;
}
  * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
  }

  body,
  html {
      height: auto;
      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, .all-blog-posts-area, .our-speciality-area{
    background-color: #fff;
}
.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);
}
.breadcrumb li.breadcrumb-item a {
    color: var(--home-1-color-blue);
}
.breadcrumb li.breadcrumb-item.active a {
    color: var(--default-deep-heading-color);
}
.primary-font-color, .pricing-table-box a, .why-choose-content-box h4, .why-choose-inner-content span, .speciality-content span, .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, .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 span,
.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 h4 {
    color:#f5f6fa;
}
/*---- 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 > span, .widget-recent-posts ul li a p > span, .single-blog-content h6, .single-blog-content h6 span, .top-nav ul li a, .login-yet, .home-2 .theme-button span::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: 50px 0;
    position: relative;
    z-index: 9;
}
.default-overflow-hidden, .services-area, .faq-area, .our-speciality-area, .team-area, .all-blog-posts-area, .pricing-table-area, .features-area, .why-choose-us-area, .login-page-area{
    overflow: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 span {
    animation: bounceIn 2s infinite;
}
.top-nav ul li a span {
    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:24px
}
#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: 110px;
    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: 7px;
    left: 16px;
    height: 40px;
}
.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 span{
    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 span {
    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 a.services-a {
    display: block;
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radious-5);
}
.single-service img {
    height: 60px;
}
.single-service-content h4, .single-features h4 {
    padding: 25px 0 10px;
}
.single-service-content p {
    padding-bottom: 20px;
    text-indent: 2em;
    text-align: left;
}
.single-service-content a {
    transition: none;
}
.single-service .theme-button {
    padding: 5px 12px 7px;
}
.single-service:hover a span,
.pricing-table-box:hover a span,
.single-blog-post:hover a span, .service-price-btn:hover > a > span {
    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 span {
    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 {
    padding: 30px 0;
}
.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: 30px 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;
    margin: 0 auto;
    align-items: center;
}
.service-price-btn a {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pricing-table-box a > span, .single-service-content a > span, .single-blog-content > a > span, .service-price-btn > a > span {
    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 span {
    color: transparent;
    background: -webkit-linear-gradient(0deg, #2989d8, #2cd4d9 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.single-features span::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 span {
    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 span::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);
    margin-top: 50px;
}
.our-speciality-area .our-speciality-content-wrap:first-child{
    margin-top: 0;
}
.speciality-box {
    padding: 23px;
}
.speciality-content p span {
    display: block;
    line-height: 11px;
}
.speciality-content span {
    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 span::before {
    font-size: 28px;
}
.testimonial_slide_nav span , .pagination-area ul li span{
    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 span:hover, .pagination-area ul li span: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 span {
    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: 50px 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 a.single-blog-a{
    display: block;
    width: 100%;
    height: 240px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.single-blog-post img {
    width: 100%;
}
.single-blog-content {
    padding: 30px 20px 38px;
}
.single-blog-content img {
    height: 35px;
    width: 35px;
    margin-right: 10px;
}
.single-blog-content h5, .single-blog-content h6{
    text-transform: capitalize;
}
.single-blog-content h5 {
    margin: 25px 0 15px;
}
.single-blog-content h6 span {
    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 > span ,
#accordion7 .panel-title a > span {
    margin-right: 20px;
}
#accordion6 .panel-title a > span::before,
#accordion7 .panel-title a > span::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 20px;
}
.footer-logo img {
    margin-bottom: 20px;
    max-width: 85%;
}
.footer-logo p a {
    display: block;
}
.footer-logo p a > span::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(89% - 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;
    -webkit-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: #333;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "";
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}
.breadcrumb-item span {
    padding-left: 7px;
}
/*--------Breadcrumb Area CSS--------*/
.header-caption {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
    text-align: center;
}
.blog-page-area {
    padding: 0 0 50px;
}
.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: 50px 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 span {
      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;
  }

 #content img {
	  width: 90%; height: auto;text-align: center;
  }
 #content p {
	 text-indent:2em;;
  }



   /*----- 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 span {
      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 span {
    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 > span {
      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 span {
    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 span {
    line-height: 42px;
}


@-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 span, .home-2 .pagination-area ul li span {
    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 span:hover, .home-2 .pagination-area ul li span: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 span{
    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;
    color:#fff;
}
#hero-area-intro p {
    color:#999;
}
#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 span, .home-3-our-speciality-area .speciality-content span, .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 span, .home-3 .pagination-area ul li span {
    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 span:hover, .home-3 .pagination-area ul li span: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
-------------------------------------------*/
.page {
    text-align: center;
}
#pagination {
    display: inline-block;
}
#pagination li {
    display: inline;
}
ul.pagination > li > a {
    margin-right:5px;
    border-radius: 5px;
    font-size: 16px;
    padding: 5px 14px;
    /* color:#027938; */
  }
  ul.pagination > li.active > a, 
  ul.pagination > li:hover > a {
    background: -moz-linear-gradient(-45deg, #008ded 0%, #00e8d3 100%);
    background: -webkit-linear-gradient(-45deg, #008ded 0%, #00e8d3 100%);
    background: linear-gradient(135deg, #008ded 0%, #00e8d3 100%);
    color: #fff;
  }


/* 新闻中心--------------------------------------------------------------- */
.index_news_l { float: left; width: 600px; margin-right: 13px; z-index:-99;}/*轮播焦点图容器*/
.index_news_c { float: right; width: 494px;padding-top: 3px; background: url(../images/index/2021new_top_bg.jpg) no-repeat top; }/*新闻Tab容器*/
.index_notice_r { float: left; width: 228px; border:1px solid #D1D1D1;padding-top: 3px; }
/*newtabs*/
.new_tabnav_parent li.new_tab_nav_hover a{ color:#137FBF;}
#index_news_tabs #index_news_tabs .tabs_news { width: 100%; }
#index_news_tabs .new_tabnav_parent { display: block; height: 42px; border-bottom:2px solid #D6D6D6;}
#index_news_tabs .new_tabnav_parent ul{padding-left:15px; border-bottom:2px solid #D6D6D6; } 
#index_news_tabs .new_tabnav_parent li { font-family:"微软雅黑"; float: left; line-height: 29px; font-weight: bold; margin: 0; width: 106px; padding: 0px 15px 0px;20px;; font-size: 17px; color: #555;text-align: center; cursor: pointer; display: block; margin-right: 2px; }
#index_news_tabs .new_tabnav_parent li img { display: block; }
#index_news_tabs li.new_tab_nav_hover { color: #CC0000; background: url(../images/index/new02.jpg) no-repeat bottom ; height: 49px;}
#index_news_tabs .new_tab_nav { cursor: pointer; background: repeat-x 1px 0; border-right: none; cursor: pointer }
#index_news_tabs .new_tabs_body ul { padding: 5px; }
#index_news_tabs .new_tabs_body ul li { line-height:45px; font-size: 15px; color: #4E4D4D;  background: url(../images/index/new01.png) no-repeat left ; padding-left: 16px; width:480px;  }
#index_news_tabs .new_tabs_body ul li {clear: both; }
#index_news_tabs .new_tabs_body ul li span { float: right; color: #999; }
#index_news_tabs .new_tabs_body .shipinnews li { padding-left: 23px; background: url(../images/index/shipin.png) no-repeat left center; }
/*新闻中心*/


/* 内容部分样式 */
.section-first-box {
	padding: 20px 0;
	text-align: center;
	color: var(--special-color-dark);
}
.section-first-box h4 {
	font-size: 26px;
	letter-spacing: 2px;
}
.section-first-box p {
	font-size: 18px;
	margin-top: 15px;
}
.second-left-swiper {
	width: 640px;
	height: 420px;
	margin-right: 30px;
}
.second-left-swiper a {
	position: relative;
}
.second-left-swiper img {
	width: 640px;
	height: 420px;
}
.second-left-swiper p {
	position: absolute;
	bottom: 5px;
	left: 0;
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
	padding: 15px;
	width: 100%;
}
.second-swiper-container .swiper-pagination {
	text-align: right;
	padding-right: 20px;
	box-sizing: border-box;
	bottom: 20px !important;
}
.second-swiper-container .swiper-pagination-bullet {
	background: #fff !important;
	width: 15px;
	height: 15px;
	border-radius: 0;
	opacity: 0.4;
}
.second-swiper-container .swiper-pagination-bullet-active {
	background: #fff !important;
	opacity: 1;
}
.second-swiper-container .swiper-button-prev,
.second-swiper-container .swiper-button-next{
	background-color: rgba(0, 0, 0, 0.4);
	padding: 5px 8px;
	background-image: none;
}
.second-swiper-container .swiper-button-prev {
	left: 0;
}
.second-swiper-container .swiper-button-next {
	right: 0;
}
.second-swiper-container svg {
	margin-top: 6px;
}

.second-right-box {
	width: 100%;
}
.second-nav {
	margin-bottom: 10px;
}
.second-nav li {
	float: left;
	/* margin-right: 40px; */
	padding: 10px 0;
}
.second-nav li a {
	font-size: 22px;
	padding: 0 20px;
	color: #666;
	letter-spacing: 2px;
	font-weight: bold;
}
.second-nav li:first-child a {
	padding-left: 0;
}
.second-nav li.on a {
	color: var(--special-color-dark);
}
.second-nav-line {
	font-size: 20px;
	font-weight: bold;
	color: var(--special-color-dark);
}
.second-list {
	position: relative;
	margin-top: 5px;
}
.second-list a {
	height: 45px;
	font-size: 18px;
	line-height: 45px;
	color: #333;
}
.second-list a:hover .second-list-title {
	color: var(--special-color);
}
.second-list a>span:first-child {
	width: 75%;
}
.second-list-title {
	width: 90%;
	white-space: nowrap;      /* 保证文本在一行内显示 */
	overflow: hidden;         /* 隐藏溢出的内容 */
	text-overflow: ellipsis;  /* 使用省略号表示文本溢出 */
}
.second-list-time {
	color: #999;
	font-size: 16px;
}

.section-third-box {
	background: url(../images/img_networkSecurity.png) no-repeat;
	background-size: 100% 100%;
	height: 100px;
	margin: 20px 0;
}
.section-third-box .bd {
	height: 100px;
}
.section-third-box li {
	line-height: 100px;
	text-align: center;
	font-size: 34px;
	font-weight: bold;
	color: var(--special-color-light);
}

.section-forth-box {
	margin: 20px 0;
}
/*轮播图*/
.ln-cen1-left-pic { width: 600px; float: left; margin-right: 17px; }
.pub_slideplay { width: 600px; }
.pub_slideplay img { width: 600px; }