/*===============================================
Template Name: swimzo - Construction and Handyman HTML5 Template
Author:  https://Templatemonstar.com/authors/unique-theme
Description: Description
Version: 1.0.0
Text Domain: swimzo
Tags:   architecture, building, business, construction, engineer, exterior design, industry, roofing, air conditioning, cleaning services,, flooring, gadget repair,handyman services, plumber, plumbing services, repair services,
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. swimzo Nav Menu Area Css 
02. swimzo Slider Area Css
03. swimzo Section Title Css
04. swimzo Service Area css
05. swimzo About Area Css
06. swimzo Counter Area Css
07. swimzo Case Study Area Css
08. swimzo Testimonial Area Css
09. swimzo Team Area Css
10. swimzo Faq Area Css
12. swimzo Brand Section Css
13. swimzo Call Do Section Css
14. swimzo Form Box Css
15. swimzo Blog Area Css
16. swimzo footer Area Css
17. swimzo Subscribe Area Css
18. swimzo Lines CSS
19. swimzo Prossess Ber Css
20. swimzo Scrollup Section
21. swimzo Bounce Animation Css 
22. swimzo Animation Dance
23. swimzo Breadcumb Area Css
24. swimzo abouts_areas Css
25. swimzo Feture-Area Css
26. swimzo Pricing Section Css
27. swimzo Web Development Section CSS
28. swimzo Contact  US Css
29. swimzo Blog Sidber Widget CSS
30. swimzo Case Study Details Css
31. swimzo Search Box Css
32. swimzo Loader Css
=======================*/

/*================================
<--  swimzo Nav Menu Area Css -->
==================================*/
.swimzo_nav_manu {
  background: #fff;
  position: relative;
  z-index: 2;
}

.sticky {
  left: 0;
  margin: auto;
  position: fixed !important;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  transition: 0.5s;
  z-index: 9;
}
/* swimzo Menu Css*/

nav.swimzo_menu {
  display: flex;
  align-items: center;
  justify-content: end;
}
.swimzo_menu ul {
  list-style: none;
  display: inline-block;
}

.swimzo_menu > ul > li {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.swimzo_menu > ul > li > a {
  display: block;
  margin: 36px 20px;
  transition: 0.5s;
  font-size: 16px;
  color: #373737;
  font-weight: 400;
  font-family: "Nunito", sans-serif;
}

.swimzo_menu > ul > li > a:hover {
  color: #0c5adb;
}

.swimzo_menu > ul > li > a:hover i {
  color: #0c5adb;
}
ul.nav_scroll li a span {
  color: #373737;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.6;
}
.header-button {
  display: inline-block;
}
.header-button a {
  display: inline-block;
  color: #fff;
  background: #ddeaff;
  padding: 12px 42px;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  border: 1px solid transparent;
  border-radius: 5px;
  margin-left: 20px;
}
.header-button a:hover {
  color: #0c5adb;
}

.header-button a:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #0c5adb;
  z-index: -1;
  transition: 0.5s;
}

.header-button a:hover::before {
  transform: rotateX(90deg);
}

.header-button a:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #0c5adb;
  z-index: -1;
  transition: 0.5s;
}

.header-button a:hover::after {
  transform: rotateY(90deg);
}
/*** Sub Menu Style ***/
.swimzo_menu ul .sub-menu {
  position: absolute;
  left: 0;
  top: 130%;
  width: 225px;
  text-align: left;
  background: #fff;
  margin: 0;
  z-index: 1;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

.swimzo_menu ul li:hover > .sub-menu {
  visibility: visible;
  top: 100%;
  opacity: 1;
}

.swimzo_menu ul .sub-menu li {
  position: relative;
}

.swimzo_menu ul .sub-menu li a {
  display: block;
  padding: 12px 20px;
  margin: 0;
  line-height: 1.3;
  letter-spacing: normal;
  transition: 0.1s;
  visibility: inherit !important;
  color: #211e3b !important;
  font-size: 16px;
  font-weight: 500;
  font-family: "Nunito", sans-serif;
}

.swimzo_menu ul .sub-menu li:hover > a,
.swimzo_menu ul .sub-menu .sub-menu li:hover > a,
.swimzo_menu ul .sub-menu .sub-menu .sub-menu li:hover > a,
.swimzo_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
  background: #0d6efd;
  color: #fff !important;
}
/* sub menu 2 */
.swimzo_menu ul .sub-menu .sub-menu {
  left: 100%;
  top: 130%;
  opacity: 0;
  visibility: hidden;
}

.swimzo_menu ul .sub-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  top: 0%;
}

/* sub menu 3 */
.swimzo_menu ul .sub-menu .sub-menu li {
  position: relative;
}

.swimzo_menu ul .sub-menu .sub-menu .sub-menu {
  right: 100%;
  left: auto;
  top: 130%;
  opacity: 0;
  visibility: hidden;
}

.swimzo_menu ul .sub-menu .sub-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  top: 0%;
}

ul.sub-menu li a span {
  background: #ff5e14;
  padding: 4px 9px;
  color: #fff;
  opacity: 1;
  border-radius: 2px;
  margin-left: 4px;
  transition: 0.5s;
}

ul.sub-menu li:hover a span {
  background: rgba(255, 255, 255, 0.2);
}

/* sub menu 4 */
.swimzo_menu ul .sub-menu .sub-menu .sub-menu li {
  position: relative;
}

.swimzo_menu ul .sub-menu .sub-menu .sub-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  top: 0%;
}

.swimzo_menu li a:hover:before {
  width: 101%;
}

.swimzo_nav_manu.sticky .logo_img {
  display: none;
}

.main_sticky {
  display: none;
}

.swimzo_nav_manu.sticky .main_sticky {
  display: inherit;
}

.swimzo_nav_manu.sticky a.dtbtn {
  color: #fff;
  background: #f16722;
  border: 2px solid #f16722;
}

.swimzo_nav_manu.sticky a.dtbtn:hover {
  color: #43baff;
}

.mobile-menu.mean-container {
  overflow: hidden;
}

/*
<!-- ============================================================== -->
<!-- Start swimzo Slider Area Css -->
<!-- ============================================================== -->*/
.slider-area {
  background: url("https://default-1307016754.cos.ap-nanjing.myqcloud.com/home-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 630px;
}

/*slider content*/
.slider-content {
  text-align: center;
}
.slider-title h5 {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 23px;
}
.slider-title h5::before {
  position: absolute;
  content: "";
  background: #fff;
  left: -25px;
  top: -2px;
  width: 187px;
  height: 35px;
  opacity: 0.141;
  z-index: -1;
}
.slider-title h1 {
  font-size: 60px;
  color: #fff;
  font-weight: 600;
  line-height: 56px;
}
.slider-text p {
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  width: 48%;
  margin: 38px auto 34px;
}

.slider-button a {
  background: #0c5adb;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  padding: 12px 42px;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.slider-button a:hover {
  color: #0c5adb;
}

.slider-button a:before {
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: -50px;
  border-bottom: 55px solid #ffffff;
  border-right: 30px solid transparent;
  -webkit-transition: all 600ms ease;
  -moz-transition: all 600ms ease;
  -ms-transition: all 600ms ease;
  -o-transition: all 600ms ease;
  transition: all 600ms ease;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  z-index: -1;
}
.slider-button a:hover:before {
  -webkit-transform: translateX(-40%);
  transform: translateX(-40%);
}
.slider-button a:after {
  position: absolute;
  content: "";
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: -50px;
  border-left: 30px solid transparent;
  border-bottom: 55px solid #ffffff;
  -webkit-transition: all 600ms ease;
  -moz-transition: all 600ms ease;
  -ms-transition: all 600ms ease;
  -o-transition: all 600ms ease;
  transition: all 600ms ease;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  z-index: -1;
}
.slider-button a:hover:after {
  -webkit-transform: translateX(40%);
  transform: translateX(40%);
}

/**
======================================================
<--  swimzo Section Title Css -->
======================================================**/
.section-title h6 {
  color: #0c5adb;
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  font-style: italic;
}
.section-title h2 {
  color: #0c0e18;
  font-weight: 600;
  font-size: 36px;
  line-height: 28px;
  margin-top: 15px;
}
.section-desc p {
  color: #373737;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  width: 91%;
  margin: 0;
  padding: 20px 0 30px;
}
.section-title-left {
  margin-bottom: 52px;
}
/* swimzo btn */

/***
======================================================
<-- swimzo Feature Area Css -->
======================================================***/
.feature-area {
  padding: 90px 0 83px;
}
.single-feature-box {
  margin-top: 55px;
}
.feature-thumb img {
  width: 100%;
}
.feature-content {
  text-align: center;
  background: #fff;
  filter: drop-shadow(0 0 9px rgba(2, 2, 2, 0.1));
  padding: 13px 30px 8px 28px;
  position: relative;
  z-index: 1;
}
.feature-content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.9s;
  transition: 0.9s;
  transform: perspective(500px) rotateX(90deg);
  z-index: -1;
  background: #0d6efd;
}

.feature-title h3 {
  font-size: 24px;
  font-weight: 600;
  color: #0c0e18;
  line-height: 28px;
  font-family: "Barlow";
  font-style: italic;
  transition: 0.5s;
}

.feature-text p {
  color: #373737;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  margin-top: 16px;
  transition: 0.5s;
}

/* all hover */
.single-feature-box:hover .feature-content:before {
  visibility: visible;
  opacity: 0.9;
  transform: perspective(500px) rotateX(0deg);
}
.single-feature-box:hover .feature-title h3 {
  color: #fff;
}
.single-feature-box:hover .feature-text p {
  color: #fff;
}

/***
======================================================
<-- swimzo About Area Css -->
======================================================***/
.about-area {
  background-color: #e8f1fa;
  padding: 85px 0 70px;
}
.about-thumb img {
  width: 100%;
}
.about-thumb2 img {
  width: 100%;
}
.about-thumb img:first-child {
  margin-bottom: 20px;
}
.about-content {
  margin-top: 110px;
  margin-left: 80px;
}
/***
======================================================
<-- swimzo course Area Css -->
======================================================***/
.course-area {
  padding: 65px 0 85px;
}
.row.m-topp {
  margin-top: 30px;
}
.single-course {
  display: flex;
  margin-top: 30px;
}
.course-content {
  background: #fff;
  filter: drop-shadow(0 0 9px rgba(2, 2, 2, 0.1));
  padding: 0px 36px 0px 36px;
}
.course-title h3 {
  font-size: 24px;
  line-height: 26px;
  font-weight: 600;
  color: #0c0e18;
  padding: 25px 0px 21px;
}
.course-text p {
  color: #373737;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 0;
}
.meta-blog-post {
  position: relative;
  z-index: 1;
  transition: 0.9s;
}
.meta-blog-post:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 1px;
  width: 25%;
  background: #1081e8;
  z-index: -1;
  transition: 0.9s;
}
.single-course:hover .meta-blog-post:before {
  width: 100%;
}
.meta-blog-post:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 1px;
  width: 100%;
  border-top: 1px solid #373737;
  opacity: 0.2;
}
.meta-blog {
  padding-top: 25px;
  margin-top: 25px;
}
.meta-blog ul li {
  list-style: none;
  display: inline-block;
  color: #373737;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
.meta-blog ul li.mt {
  float: right;
}
.meta-blog ul li i {
  margin-right: 6px;
  color: #0c5adb;
}
/***======================================================
<-- swimzo contact Area Css -->
======================================================***/
.contact-area {
  background: url(../image/contact.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 70px 0 73px;
}
.section-title h2.white {
  color: #fff;
  font-weight: 600;
  font-size: 36px;
  line-height: 28px;
  margin-bottom: 10px;
}
.section-title p.white {
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  width: 42%;
  margin: 20px auto 45px;
}
.row.active {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12.5px);
  padding: 26px 13px;
  border-radius: 5px;
}
.input-box input {
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 0px 10px 20px;
  border-radius: 5px;
  border-color: transparent;
  color: #fff;
  width: 100%;
}
.input-box input::placeholder {
  color: #fff;
  font-size: 16px;
}
.input-box input:focus {
  outline: 0;
  border: 1px solid transparent;
}
.submit-buton button {
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 42px;
  border: 1px solid transparent;
  width: 100%;
  border-radius: 5px;
  transition: 0.5s;
}
.submit-buton button:hover {
  background: #0c5adb;
}
/***======================================================
<-- swimzo Team Area Css -->
======================================================***/
.team-area {
  padding: 70px 0 83px;
}
.single-team {
  margin-top: 48px;
}
.team-thumb img {
  width: 100%;
}
.team-content {
  background: #e8f1fa;
  padding: 12px 0px 5px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}
.team-content:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  z-index: -1;
  background: #0c5adb;
  transition: 0.5s;
}
.single-team:hover .team-content:before {
  width: 50%;
}
.team-content:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  height: 100%;
  width: 0;
  z-index: -1;
  background: #0c5adb;
  transition: 0.5s;
}
.single-team:hover .team-content:after {
  width: 50%;
}
.team-content h4 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  transition: 0.5s;
}
.single-team:hover .team-content h4 {
  color: #fff;
}
.team-content p {
  color: #373737;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  transition: 0.5s;
}
.single-team:hover .team-content p {
  color: #fff;
}
/***
======================================================
<--  swimzo article Area Css -->
======================================================***/
.article-area {
  background-color: #e8f1fa;
  padding: 70px 0 83px;
}
.single-article {
  margin-top: 55px;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  transition: 0.5s;
}
.article-thumb {
  position: relative;
}
.article-thumb img {
  width: 100%;
}
.thumb-text {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.thumb-text h6 {
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  background-color: #0c5adb;
  padding: 1px 22px 1px;
}
.article-content {
  background: #fff;
  padding: 20px 0px 20px 23px;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}
.article-content:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #0d6efd;
  z-index: -1;
  transform: perspective(500px) rotateY(90deg);
  transition: 0.8s;
}

.article-date span {
  color: #373737;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  transition: 0.5;
}
.article-date span i {
  color: #0c5adb;
  margin-right: 8px;
}
.article-title h3 {
  color: #232323;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.article-button a {
  display: inline-block;
  color: #0c5adb;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  margin-top: 12px;
}
.article-button a i {
  margin-left: 5px;
}

/* all hover*/
.single-article:hover {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}
.single-article:hover .article-content:before {
  transform: perspective(500px) rotateY(0deg);
}
.single-article:hover .article-date span {
  color: #fff;
}
.single-article:hover .article-date span i {
  color: #fff;
}
.single-article:hover .article-title h3 {
  color: #fff;
}
.single-article:hover .article-button a {
  color: #fff;
}
/***======================================================
<-- swimzo instagram Area Css -->
=====================================================***/
.instagram-area {
  padding: 90px 0 90px;
}
.instagram-thumb {
  overflow: hidden;
  margin: 0 15px;
}
.instagram-thumb img {
  width: 100%;
}

/**======================================================
<--  swimzo Footer Area Css -->
======================================================**/
.footer-area {
  background-color: #16428c;
  padding: 80px 0 63px;
}
.footer-logo {
  margin-bottom: 30px;
}
.footer-desc p {
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  width: 107%;
}
.footer-icon ul li {
  list-style: none;
  display: inline-block;
  margin-right: 10px;
}
.footer-icon ul li a i {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  transition: 0.5s;
  height: 30px;
  width: 30px;
  margin-top: 9px;
}
.footer-icon ul li a i:hover {
  color: #0c5adb;
  background: #fff;
}
.footer-content.upper {
  margin-left: 30px;
}
.footer-title {
  margin-bottom: 15px;
}
.footer-title h4 {
  font-size: 24px;
  line-height: 28px;
  color: #fff;
  font-weight: 600;
}
.upper.footer-title h4 {
  display: inline-block;
  padding: 0 0 0px;
}
.footer-list ul li a {
  display: inline-block;
  color: #fff;
  margin-top: 10px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
.footer-list ul li a i {
  margin-right: 5px;
  font-size: 10px;
}
.single-widget-item {
  display: flex;
  margin-bottom: 10px;
}
.recent-post-icon a i {
  color: #fff;
  font-size: 16px;
  margin-right: 15px;
}
.recent-post-text p {
  color: #fff;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  margin-bottom: 0;
}
.recent-post-text span {
  color: #fff;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}
.footer-botom.area {
  padding: 30px 0 15px;
}
.footer-botom {
  text-align: center;
}
.footer-botom p {
  color: #373737;
  font-size: 16px;
  font-weight: 400;
}

/*========================================
<--Start  swimzo Inner page Css -->
==========================================*/

/*<!-- ============================================================== -->
<!-- Start swimming breadcumb Menu  -->
<!-- ============================================================== -->*/

.breadcumb-section {
  background: url(../image/breadcumb-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 400px;
}
.breadcumb-title h1 {
  margin: auto;
  font-size: 60px;
  color: #ffffff;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.breadcumb-content ul {
  list-style: none;
  margin-top: 2px;
}
.breadcumb-content ul li {
  display: inline-block;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  margin-top: 30px;
}
.breadcumb-content ul li a {
  display: inline-block;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  transition: 0.5s;
}

.breadcumb-content ul li a:hover {
  color: #0d6efd;
}

/*<!-- ============================================================== -->
	<!-- End swimming breadcumb Menu  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
<!-- Start swimming about2 Section  -->
<!-- ============================================================== -->*/

.about-section2 {
  padding: 120px 0px;
}

.about-thumb3 {
  margin-left: 8%;
}
.section-title h1 {
  margin: auto;
  font-size: 36px;
  font-weight: 600;
  line-height: 43px;
  color: #232323;
}
.section-title h5 {
  font-size: 16px;
  color: #0d6efd;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  margin: 0 auto 18px;
}
.section-title p {
  width: 92%;
  font-weight: 400;
  margin: 13px auto 0 0;
  font-size: 16px;
  line-height: 28px;
  color: #888787;
  font-family: "Nunito", sans-serif;
}
.about1-box {
  position: relative;
  z-index: 1;
  top: 27px;
  border-top: 1px solid #ddd;
  padding-top: 30px;
}
.about-img {
  position: relative;
  display: inline-block;
  margin-right: 15px;
}

.about1-play-button {
  position: absolute;
  top: 36px;
  left: 77px;
}
.about1-play-button a {
  padding: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  display: inline-block;
  text-align: center;
  font-size: 30px;
  color: #0d6efd;
  webkit-animation: ripple-white 1s linear infinite;
  animation: ripple-blue 1s linear infinite;
  -webkit-transition: 0.5s;
}
@-webkit-keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}

.about1-text {
  display: inline-block;
  position: relative;
  top: 15px;
}

.about1-text h4 {
  font-size: 18px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow", sans-serif;
  margin: auto;
}

.about1-button a {
  display: inline-block;
  font-size: 18px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  margin-top: 3px;
}

/*<!-- ============================================================== -->
	<!-- End swimming about2 Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
<!-- Start swimming swimming Section  -->
<!-- ============================================================== -->*/

.swimming-section {
  padding: 110px 0 112px;
  background: url(../image/swimming-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.swimming-section .section-title h1 {
  color: #ffff;
}

.swimming-section .section-title p {
  width: 91%;
  color: #ffffff;
}

/*<!-- ============================================================== -->
 <!-- Start swimming blog Section  -->
<!-- ============================================================== -->*/

.blog-section {
  padding: 110px 0 90px;
}
.single-blog-box {
  background: #ffffff;
  margin-bottom: 30px;
  filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.15));
  margin-top: 40px;
}
.blog-thumb {
  position: relative;
}

.blog-thumb:before {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #79dbf7;
  transition: 0.5s;
  opacity: 0;
}

.single-blog-box:hover .blog-thumb:before {
  width: 100%;
  left: 0;
  opacity: 0.5;
}

.blog-thumb img {
  width: 100%;
  transition: 0.5s;
}

.blog-date {
  position: absolute;
  bottom: -25px;
  right: 30px;
  background: #0d6efd;
  padding: 3px 18px;
}

.blog-date h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  margin: auto;
}

.blog-date p {
  font-size: 13px;
  color: #ffffff;
  font-family: "Berlin Sans FB";
  margin: -5px auto 0;
}

.blog-meta-icon ul li {
  display: inline;
}

.blog-meta-icon ul {
  list-style: none;
}

.blog-meta-icon ul li i {
  color: #0d6efd;
  font-size: 16px;
  padding-right: 2px;
}

.blog-meta-icon ul li span {
  display: inline-block;
  font-size: 16px;
  color: #888787;
  font-family: "Berlin Sans FB";
  margin: auto;
}

.blog-meta-icon ul li.up {
  margin-right: 15px;
}

.blog-content {
  padding: 17px 40px 35px;
}

.blog-content h3 {
  margin: auto;
}

.blog-content h3 a {
  margin: inherit;
  display: inline-block;
  transition: 0.5s;
  width: 90%;
  font-size: 24px;
  line-height: 32px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  padding-top: 5px;
}

.single-blog-box:hover .blog-content h3 a {
  color: #0d6efd;
}

.blog-content p {
  padding: 12px 0 8px;
  font-size: 16px;
  line-height: 28px;
  color: #888787;
  font-weight: 400;
  width: 99%;
  font-family: "Barlow", sans-serif;
}
.blog-button a {
  display: inline-block;
  font-size: 16px;
  color: #0d6efd;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.blog-button a i {
  display: inline-block;
  color: #0d6efd;
  font-size: 18px;
  padding-left: 5px;
  position: relative;
  left: -40px;
  top: 3px;
  transition: 0.5s;
  opacity: 0;
}

.single-blog-box:hover .blog-button a i {
  opacity: 1;
  margin-left: 40px;
}

.single-blog-box:hover .blog-button a {
  color: #000000;
}

.single-blog-box:hover .blog-button a i {
  color: #000000;
}

/*=================================*/
/*-- start blog-grid --*/
/*=================================*/

.paginations {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 28px;
}
.page-numbers li {
  display: inline-block;
}
.paginations a,
.page-numbers span.current {
  width: 35px;
  height: 35px;
  line-height: 35px;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  margin: auto 5px;
  border: 1px solid #ddd;
  color: #888;
}
.paginations a:hover,
.paginations a.current,
.page-numbers span.current {
  background: linear-gradient(90deg, #0d6efd 0%, #692fd5 100%);
  border-color: linear-gradient(90deg, #0d6efd 0%, #692fd5 100%);
  color: #fff;
}

/*=================================*/
/*-- End blog-grid --*/
/*=================================*/

/* Circle Progress */
.circle-progress {
  display: inline-block !important;
  position: relative;
  margin-bottom: 13px;
}

.circle-progress.align-items-center.d-flex.upper {
  margin-right: 30%;
}

.progress {
  width: 132px !important;
  height: 132px !important;
  line-height: 150px;
  margin: 0;
  box-shadow: none;
  display: inline-block;
  position: relative;
  background: transparent !important;
}

.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 90%;
  height: 90%;
  background: none;
  border-width: 3px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #ffff;
}
.progress .progress-left .progress-bar {
  left: 91%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -96%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  display: flex;
  border-radius: 50%;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.progress .progress-value span {
  font-size: 24px;
  text-transform: uppercase;
}

/* This for loop creates the 	necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(100deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(150deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}

.swimming-content h2 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  margin: auto;
}

.swimming-content p {
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  width: 85%;
  margin: 11px auto 14px 0;
}

.swimming-button a {
  display: inline-block;
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.swimming-button a i {
  font-size: 16px;
  top: 2px;
  position: relative;
  left: -20px;
  opacity: 0;
  transition: 0.5s;
}

.swimming-content:hover .swimming-button a i {
  left: 10px;
  opacity: 1;
}

/*<!-- ============================================================== -->
<!-- End swimming swimming Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
	<!-- Start swimming pricing Section  -->
<!-- ============================================================== -->*/

.pricing-section {
  padding: 115px 0 90px;
}

.pricing-single-box {
  padding: 0px 0 32px;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.2));
  background-color: #ffffff;
  transition: 0.5s;
  margin-bottom: 30px;
}

.pricing-single-box:hover {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
  background-color: #ffffff;
}

.pricing-head {
  text-align: center;
  background: #e8f1fa;
  padding: 27px 0 22px;
  position: relative;
  z-index: 1;
}

.pricing-head:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.9s;
  transition: 0.9s;
  transform: perspective(500px) rotateX(90deg);
  z-index: -1;
  background: #0d6efd;
}

.pricing-single-box:hover .pricing-head:before {
  visibility: visible;
  opacity: 0.9;
  transform: perspective(500px) rotateX(0deg);
}

h4.price-top-title {
  font-size: 24px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  text-align: center;
  margin: auto;
  transition: 0.5s;
}

h2.price-title {
  margin: 12px 0 7px;
  font-size: 43px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  text-align: center;
  transition: 0.5s;
}

.pricing-text span {
  font-size: 16px;
  color: #888787;
  font-family: "Nunito", sans-serif;
  text-align: center;
  display: inline-block;
  transition: 0.5s;
}

/*pricing boody*/

.pricing-boody {
  position: relative;
  margin-left: 70px;
  margin-top: 25px;
}

.pricing-boody ul li {
  list-style: none;
  display: block;
  padding: 0 0 11px 0;
  font-weight: 400;
  font-size: 16px;
  color: #888787;
  font-family: "Nunito", sans-serif;
}

.pricing-boody ul li i {
  display: inline-block;
  color: #108bea;
  font-size: 18px;
  margin-right: 4px;
  position: relative;
  top: 4px;
}

.price-btn {
  margin-top: 16px;
  text-align: center;
}

.price-btn a {
  padding: 15px 40px;
  display: inline-block;
  background: #0d6efd;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  font-size: 16px;
  color: #0d6efd;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.price-btn a:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #ddeaff;
  z-index: -1;
  transition: 0.5s;
}

.price-btn a:hover::before {
  transform: rotateX(90deg);
}

.price-btn a:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #ddeaff;
  z-index: -1;
  transition: 0.5s;
}

.price-btn a:hover::after {
  transform: rotateY(90deg);
}

.price-btn a:hover {
  color: #ffff;
}

.pricing-single-box:hover h4.price-top-title {
  color: #ffff;
}
.pricing-single-box:hover h2.price-title {
  color: #ffff;
}
.pricing-single-box:hover .pricing-text span {
  color: #ffff;
}

/*<!-- ============================================================== -->
<!-- End swimming pricing Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Start swimming subscribe Section  -->
<!-- ============================================================== -->*/

.subscribe-section {
  padding: 110px 0 88px;
  background: url(../image/subseribe-bg.png);
  background-position: center center;
  background-size: cover;
}

.section-title.up h1 {
  font-size: 36px;
  line-height: 43px;
  color: #ffffff;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.mail-address {
  text-align: right;
}

.mail-address input {
  display: inline-block;
  padding: 0 0 0 30px;
  width: 503px;
  height: 55px;
  background: #ffffff;
  border: none;
  outline: 0;
}

.mail-address input::placeholder {
  font-size: 16px;
  color: #888787;
  font-family: "Nunito", sans-serif;
}

.Subcribe-button button {
  display: inline-block;
  z-index: 1;
  position: relative;
  top: -50px;
  left: -5px;
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  width: 173px;
  height: 45px;
  background: #0d6efd;
  border: none;
}

/*<!-- ============================================================== -->
<!-- End swimming subscribe  Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
<!-- Start swimming service2 Section  -->
<!-- ============================================================== -->*/

.service2-section {
  padding: 112px 0 90px;
}

.single-service2-box {
  filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.15));
  background-color: #ffffff;
  margin-bottom: 30px;
  padding: 30px 30px;
  transition: 0.5s;
  position: relative;
  z-index: 1;
}

.single-service2-box:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: #0d6efd;
  transition: 0.5s;
  z-index: -1;
}

.single-service2-box:hover:before {
  height: 100%;
}

.service-thumb {
  position: relative;
  z-index: 1;
}

.service-thumb:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #83dbfd;
  transition: 0.5s;
  opacity: 0;
}

.single-service2-box:hover .service-thumb:after {
  width: 100%;
  opacity: 0.5;
  left: 0;
}

.service-thumb img {
  width: 100%;
  transition: 0.5s;
}

.service-title h3 {
  font-size: 24px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  text-align: center;
  margin: 25px auto 0;
  transition: 0.5s;
}

.single-service2-box:hover .service-title h3 {
  color: #ffff;
}

/*<!-- ============================================================== -->
<!-- End swimming service2 Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
<!-- start swimming blog2 Section  -->
<!-- ============================================================== -->*/

.blog2-section {
  padding: 112px 0 90px;
}

.blog2-section.upper {
  margin-top: -6px;
  padding: 0 0 90px;
}

.single-blog2-box {
  margin-bottom: 30px;
  filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.15));
  border: 2px solid #e8f1fa;
  padding: 30px 30px 0;
  transition: 0.5s;
  position: relative;
  z-index: 1;
}
.single-blog2-box:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  border: 2px solid #0d6efd;
  transition: 0.5s;
  z-index: -1;
  opacity: 0;
}

.single-blog2-box:hover:before {
  height: 100%;
  opacity: 1;
}

.blog2-thumb {
  position: relative;
}

.blog2-thumb:before {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #79dbf7;
  transition: 0.5s;
  opacity: 0;
}

.single-blog2-box:hover .blog2-thumb:before {
  width: 100%;
  left: 0;
  opacity: 0.5;
}

.blog-content2 p {
  padding: 12px 0 8px;
  font-size: 16px;
  line-height: 28px;
  color: #888787;
  font-weight: 400;
  width: 95%;
  font-family: "Nunito", sans-serif;
}

.single-blog2-box:hover .blog2-thumb:before {
  width: 100%;
  left: 0;
  opacity: 0.5;
}

.blog2-thumb img {
  width: 100%;
  transition: 0.5s;
}

.blog-date {
  position: absolute;
  bottom: -25px;
  right: 30px;
  background: #0d6efd;
  padding: 3px 18px;
}

.blog-date h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  margin: auto;
}

.blog-date p {
  font-size: 13px;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  margin: -5px auto 0;
}

.blog-meta-icon ul li {
  display: inline;
}

.blog-meta-icon ul {
  list-style: none;
}

.blog-meta-icon ul li i {
  color: #0d6efd;
  font-size: 16px;
  padding-right: 2px;
}

.blog-meta-icon ul li span {
  display: inline-block;
  font-size: 16px;
  color: #888787;
  font-family: "Nunito", sans-serif;
  margin: auto;
}

.blog-meta-icon ul li.up {
  margin-right: 15px;
}

.blog-content2 {
  padding: 17px 0 23px;
}

.blog-content2 h3 {
  margin: auto;
}

.blog-content2 h3 a {
  margin: inherit;
  display: inline-block;
  transition: 0.5s;
  width: 100%;
  font-size: 24px;
  line-height: 32px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  padding-top: 5px;
}

.single-blog2-box:hover .blog-content2 h3 a {
  color: #0d6efd;
}

.blog-content2 p {
  padding: 12px 0 8px;
  font-size: 16px;
  line-height: 24px;
  color: #616161;
  font-weight: 400;
  width: 95%;
}

.blog-button a {
  display: inline-block;
  font-size: 16px;
  color: #0d6efd;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.blog-button a i {
  display: inline-block;
  color: #0d6efd;
  font-size: 18px;
  padding-left: 5px;
  position: relative;
  left: -40px;
  top: 3px;
  transition: 0.5s;
  opacity: 0;
}

.single-blog2-box:hover .blog-button a i {
  opacity: 1;
  margin-left: 40px;
}

.single-blog2-box:hover .blog-button a {
  color: #000000;
}

.single-blog2-box:hover .blog-button a i {
  color: #000000;
}

.section-title-left h5.up {
  position: relative;
  z-index: 1;
}

.section-title-left h5.up:before {
  position: absolute;
  content: "";
  left: -20px;
  top: -5px;
  width: 125px;
  height: 30px;
  background: #ddebff;
  z-index: -1;
}

/*<!-- ============================================================== -->
<!-- End swimming blog2 Section  -->
<!-- ============================================================== -->*/

/*============================================
<!-- Start swimming blog details Section  -->
=============================================*/

.blog-details-area {
  padding: 120px 0;
}

.blog-details-box {
  margin-bottom: 55px;
}

.single-img {
  float: left;
  padding-right: 25px;
}

.blog-details-thumb img {
  width: 100%;
  transition: 0.5s;
}

.meta-blog-details {
  padding: 30px 0 35px;
  position: relative;
  z-index: 1;
}

.meta-blog-details:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 17px;
  height: 1px;
  width: 100%;
  background: #ddd;
}

.meta-blog-details ul {
  list-style: none;
}

.meta-blog-details ul li {
  display: inline-block;
  padding-right: 32px;
}

.meta-blog-details ul li i {
  display: inline-block;
  color: #0d6efd;
  font-size: 16px;
  padding-right: 10px;
}

.meta-blog-details ul li a {
  display: inline-block;
  font-weight: 300;
  font-size: 16px;
  color: #888787;
  font-family: "Berlin Sans FB";
}

.blog-details-text p {
  font-weight: 400;
  width: 100%;
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 28px;
  color: #888787;
  font-family: "Nunito", sans-serif;
}
.blog-details-content.left {
  margin-top: -10px;
}

.blog-details-content.left h2 {
  line-height: 32px;
  margin: 0;
  font-size: 24px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.blog-details-content.left p {
  padding: 10px 0 4px;
  font-weight: 400;
  width: 100%;
  font-size: 16px;
  line-height: 28px;
  color: #888787;
  font-family: "Nunito", sans-serif;
}

.title ul {
  list-style: none;
}

.title ul li {
  color: #232323;
  padding-bottom: 7px;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.title ul li i {
  font-size: 18px;
  color: #232323;
  margin-right: 6px;
  position: relative;
  top: 2px;
}

.author-comment-box {
  background-color: rgb(238, 238, 238);
  padding: 28px 60px 30px;
  margin-top: 40px;
  border-left: 2px solid #0d6efd;
}

.comment p {
  font-weight: 400;
  font-style: italic;
  width: 86%;
  padding-bottom: 5px;
  font-size: 16px;
  line-height: 28px;
  color: #888787;
  font-family: "Nunito", sans-serif;
}

.author-thumb {
  display: inline-block;
  margin-right: 10px;
}

.author-thumb img {
  border-radius: 50px;
}

.comment-author {
  display: inline-block;
}

.comment-author h6 {
  color: #232323;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.author-disc p {
  font-weight: 400;
  font-style: italic;
  width: 99%;
  padding-bottom: 5px;
  font-size: 16px;
  line-height: 28px;
  color: #888787;
  font-family: "Nunito", sans-serif;
  margin: 22px auto 0;
}

.single-form-box.up {
  margin-top: 45px;
}
.single-form-box {
  background: #e8f1fa;
  border-radius: 8px;
  padding: 55px 0 72px;
}
.form-title h3 {
  font-size: 30px;
  color: rgb(35, 35, 35);
  font-weight: 500;
  text-align: center;
  margin-bottom: 38px;
}

.form-box {
  margin: 0 40px 0;
}

.form-box input {
  display: inline-block;
  width: 100%;
  height: 60px;
  border: 1px solid #dddd;
  margin-bottom: 24px;
  padding: 0 28px 0;
}

.form-box input::placeholder {
  opacity: 0.702;
  font-size: 16px;
  color: #555555;
  font-weight: 400;
}

.form-box textarea {
  border: 1px solid #ddd;
  width: 100%;
  height: 142px;
  padding: 17px 28px 0;
}

.form-box textarea::placeholder {
  opacity: 0.702;
  font-size: 16px;
  color: #555555;
  font-weight: 400;
}

.submit-button {
  margin: 20px 40px 0;
}

.submit-button button {
  display: inline-block;
  width: 100%;
  height: 60px;
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  background: #ffff;
  border: none;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}

.submit-button button:hover {
  color: #0d6efd;
}

.submit-button button:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #0d6efd;
  z-index: -1;
  transition: 0.5s;
}

.submit-button button:hover::before {
  transform: rotateX(90deg);
}

.submit-button button:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #0d6efd;
  z-index: -1;
  transition: 0.5s;
}

.submit-button button:hover::after {
  transform: rotateY(90deg);
}

.blog-details-content h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #0d6efd;
}

.blog-details-comment {
  margin-bottom: 60px;
  position: relative;
}

.blog-details-comment-reply {
  position: absolute;
  right: 25px;
}

.blog-details-comment-reply a {
  background: #0d6efd;
  padding: 3px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border-radius: 2px;
  display: inline-block;
  text-decoration: none;
}

.blog-details-comment-thumb {
  float: left;
  margin-right: 30px;
}

.blog-details-comment-thumb img {
  border-radius: 100%;
}

.blog-details-comment-content h2 {
  line-height: 32px;
  margin: 0;
  font-size: 24px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
}

.blog-details-comment-content {
  overflow: hidden;
  margin-bottom: 40px;
}

.blog-details-comment-content span {
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}

.blog-details-comment-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  width: 81%;
  margin: 0 auto 0 0;
  color: #8796a5;
  font-family: "Nunito", sans-serif;
}

.widget_search {
  padding: 45px 35px;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.15));
  background: #ffffff;
}

.widget_search input::placeholder {
  color: #888f99;
}

.widget_search form input {
  display: inline-block;
  padding: 12px 75px;
  border: 1px dashed #0d6efd;
  background: #ffff;
}

.widget_search form i {
  font-size: 17px;
  color: #0d6efd;
  position: absolute;
  left: 75px;
  top: 65px;
}

.widget-recent-post {
  border-bottom: 1px solid rgba(16, 18, 16, 0.10196078431372549);
  padding: 0 0 25px;
  margin-bottom: 25px;
}

.rpost-thumb {
  margin-right: 20px;
}

.rpost-thumb img {
  height: 90px;
  width: 90px;
}

h4.sidebar-title {
  padding: 0 0 30px;
}

.rpost-title h4 {
  margin-top: 2px;
}

.rpost-content h4 a {
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: #101010;
  display: inline-block;
  transition: 0.5s;
  font-family: "Barlow";
}

.rpost-content h4 a:hover {
  color: #0d6efd;
}

.rpost-title span {
  font-size: 15px;
  padding: 6px 0 0;
  display: inline-block;
  font-family: "Barlow";
}

.widget-sidebar-box {
  padding: 30px 30px 45px;
  border-bottom: 30px;
  margin-bottom: 30px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.15));
  background: #ffffff;
}

h4.sidebar-title.upp {
  padding: 0;
  margin: 0;
}
.sidebar-title {
  font-size: 24px;
  color: #01101e;
  font-weight: 700;
}

ul.sidebar-menu {
  list-style: none;
}

ul.sidebar-menu li a {
  font-size: 17px;
  color: #888f99;
  font-weight: 400;
  border: 1px dashed #0d6efd;
  display: inline-block;
  padding: 12px 0px 11px 0;
  margin: 30px 0 0;
  width: 100%;
  transition: 0.5s;
  font-family: "Barlow";
}

ul.sidebar-menu li a i {
  color: #888f99;
  font-size: 10px;
  display: inline-block;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border: 1px solid #888f99;
  border-radius: 15px;
  text-align: center;
  margin: 0 5px 0 22px;
  transition: 0.5s;
}

ul.sidebar-menu li a span {
  float: right;
  margin-right: 30px;
}

ul.sidebar-menu li a:hover {
  color: #0d6efd;
}

ul.sidebar-menu li a i:hover {
  color: #0d6efd;
  border-color: #0d6efd;
}

.blog-details-single-box {
  text-align: center;
  background: #fff;
  margin: 35px 0;
  padding: 35px 0 35px;
  border-radius: 5px;
  box-shadow: 10px 10px 57px rgba(16, 84, 200, 0.05);
}

.blog-content.up {
  padding: 12px 0 0;
}

.blog-content.up a {
  font-size: 22px;
  font-weight: 600;
}

.blog-details-icon a {
  font-size: 16px;
  color: #0d6efd;
  display: inline-block;
  border: 1px dashed #0d6efd;
  height: 40px;
  margin: 0 5px 0;
  transition: 0.5s;
  width: 40px;
  border-radius: 10px;
  line-height: 40px;
  text-align: center;
}

.blog-details-icon a:hover {
  background: #0d6efd;
  color: #fff;
}

.widget-sidebar-box.up {
  background: #ffff;
  padding: 30px 30px 45px;
  border-radius: 5px;
  border-bottom: 30px;
}

.sidebar-title-left {
  font-size: 22px;
  color: #01101e;
  font-weight: 700;
  margin-bottom: 25px;
}

.tag-item {
  text-align: center;
}

.tag-item ul {
  list-style: none;
}

.tag-item ul li {
  display: inline-block;
}

.tag-item ul li a {
  display: inline-block;
  padding: 5px 19px;
  border: 1px dashed #0d6efd;
  font-size: 15px;
  color: #656970;
  font-weight: 400;
  margin: 0 6px 10px;
  transition: 0.5s;
}

.tag-item ul li a:hover {
  color: #f1f5f9;
  background-color: #0d6efd;
}

.contact-section.up {
  margin-top: 0;
}

/* Calendar css */
.wrapper {
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 0 2px rgb(0 0 0 / 5%);
  margin-bottom: 30px;
}

.wrapper .current-month {
  display: flex;
  align-items: center;
  padding: 0 30px 0;
  justify-content: space-between;
  margin-bottom: 20px;
}

.icons {
  display: flex;
}

.icons span {
  display: inline-block;
  height: 38px;
  width: 38px;
  margin: 0 1px;
  cursor: pointer;
  color: #878787;
  text-align: center;
  line-height: 38px;
  font-size: 1.9rem;
  user-select: none;
  border-radius: 50%;
}

.icons span:last-child {
  margin-right: -10px;
}

.icons span:hover {
  background: #f2f2f2;
}

.icons span {
  background: #f2f2f2;
  transition: 0.5s;
}

.icons span:hover {
  background-color: rgb(37, 89, 158);
}

.icons span i {
  font-size: 16px;
}

/* Calender
====================*/

.curr-month {
  width: 100%;
  height: 40px;
  background: #d6d6d6;
  color: #000;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}
.all-days {
  width: 100%;
  height: 40px;
  background-color: #fff;
  float: left;
}
.tag-item .all-days ul,
.tag-item .all-date ul {
  list-style: none;
  display: block;
  height: 30px;
  width: 100%;
  margin: 0 auto;
  float: left;
  font-size: 15px;
  font-weight: 300;
}
.tag-item .all-days ul li,
.tag-item .all-date ul li {
  float: left;
  width: 59px;
  text-align: center;
  line-height: 41px;
  border: 1px solid #ccc;
  color: #333;
}
.tag-item .all-days ul li {
  font-weight: 500;
  font-family: "Fira Sans";
  font-size: 16px;
}
.all-date {
  width: 100%;
  height: 305px;
  float: left;
}
.all-date li {
  height: 40px;
  width: 50px;
  line-height: 40px;
  border: 1px solid #ccc;
  background-color: #fff;
}
element.style {
  background-color: rgb(13, 110, 253) !important;
  color: rgb(255, 255, 255);
}
.all-date li.monthdate:hover {
  background-color: #0d6efd;
  color: #fff;
}

/*============================================
	<!-- End swimming blog details Section  -->
=============================================*/

/*<!-- ============================================================== -->
	 <!-- Start swimming contact now Section  -->
<!-- ============================================================== -->*/

.contact-now-section {
  padding: 110px 0 90px;
  background: #f3f3f3;
}

.single_contact_now {
  text-align: center;
  background: #fff;
  margin-bottom: 30px;
  border-radius: 5px;
  padding: 30px 30px 30px;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.2));
  transition: 0.5s;
  margin-top: 65px;
}
.single_contact_now:hover {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
  background-color: #ffffff;
}

.single_contact_now_inner {
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: 0.5s;
}

.single_contact_now:hover .single_contact_now_inner {
  border: 2px solid #0d6efd;
}

.single_contact_now_icon {
  padding-top: 24px;
}

.single_contact_now_icon i {
  font-size: 40px;
  color: #0d6efd;
}

.single_contact_now_content {
  padding-bottom: 15px;
}

.single_contact_now_content h2 {
  font-size: 22px;
  padding-bottom: 12px;
}

.single_contact_now_content p {
  padding: 0;
  margin: 0;
  margin-bottom: 6px;
}

.contact_now_area .section_title_inner h2 {
  color: #fff;
}

.contact_now_area .section_title_text p {
  color: #fff;
}

/*<!-- ============================================================== -->
<!-- End swimming contact now Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
<!-- Start swimming contact Section  -->
<!-- ============================================================== -->*/

.contact-us-section {
  padding: 120px 0;
}

.contact-us-section .section-title {
  margin-bottom: 55px;
}

.contact-box {
  background: #e8f1fa;
  border-radius: 5px;
  padding: 25px 0 20px 30px;
  margin-right: 100px;
  margin-bottom: 30px;
}

.contact-icon {
  display: inline-block;
  position: relative;
  top: -12px;
  padding-right: 10px;
}

.contact-icon i {
  display: inline-block;
  background: #0d6efd;
  height: 45px;
  line-height: 45px;
  width: 45px;
  text-align: center;
  color: #ffff;
  font-size: 20px;
  border-radius: 27px;
}

.contact-content {
  display: inline-block;
}

.contact-content p {
  font-size: 16px;
  color: #555555;
  font-weight: 400;
  margin: auto;
}

.contact-content h4 {
  font-size: 20px;
  color: #232323;
  font-weight: 500;
  margin: auto;
}

.single-form-box {
  background: #e8f1fa;
  border-radius: 8px;
  padding: 55px 0 72px;
}

.form-title h3 {
  font-size: 30px;
  color: rgb(35, 35, 35);
  font-weight: 500;
  text-align: center;
  margin-bottom: 38px;
}

.form-box {
  margin: 0 40px 0;
}

.form-box input {
  display: inline-block;
  width: 100%;
  height: 60px;
  border: 1px solid #dddd;
  margin-bottom: 24px;
  padding: 0 28px 0;
}

.form-box input::placeholder {
  opacity: 0.702;
  font-size: 16px;
  color: #555555;
  font-weight: 400;
}

.form-box textarea {
  border: 1px solid #ddd;
  width: 100%;
  height: 142px;
  padding: 17px 28px 0;
}

.form-box textarea::placeholder {
  opacity: 0.702;
  font-size: 16px;
  color: #555555;
  font-weight: 400;
}

.submit-button {
  margin: 20px 40px 0;
}

.submit-button button {
  display: inline-block;
  width: 100%;
  height: 60px;
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  background: #ffff;
  border: none;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}

.submit-button button:hover {
  color: #0d6efd;
}

.submit-button button:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #0d6efd;
  z-index: -1;
  transition: 0.5s;
}

.submit-button button:hover::before {
  transform: rotateX(90deg);
}

.submit-button button:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #0d6efd;
  z-index: -1;
  transition: 0.5s;
}

.submit-button button:hover::after {
  transform: rotateY(90deg);
}

/*<!-- ============================================================== -->
	<!-- End swimming contact Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
<!-- start swimzo goggle Section  -->
<!-- ============================================================== -->*/

.google-map-section {
  padding: 0 0 112px;
}

.google-map iframe {
  width: 100%;
  height: 500px;
  border-radius: 10px;
  border: 10px solid #dddd;
}

/*<!-- ============================================================== -->
<!-- End swimzo goggle Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
<!-- Start swimzo team Section  -->
<!-- ============================================================== -->*/

.team-section {
  padding: 114px 0 90px;
}

.our-team-box {
  text-align: center;
  position: relative;
  color: #fff;
  border: 2px solid #e8f1fa;
  background-color: #ffff;
  padding: 20px 30px 0;
  margin-bottom: 30px;
  transition: 0.5s;
}

.our-team-box:hover {
  border: 2px solid #0d6efd;
}

.team-thumb img {
  width: 100%;
  height: 100%;
}

.our-team-box .team-social-icon {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  padding-top: 20%;
  transform: perspective(400px) rotateX(-90deg);
  transform-origin: center top 0;
  transition: all 0.5s ease 0s;
  opacity: 0;
}

.our-team-box:hover .team-social-icon,
.our-team-box.active .team-social-icon {
  opacity: 1;
  transform: perspective(400px) rotateX(0deg);
}

.our-team-box .social {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.social {
  float: right;
}

.our-team-box .social li a {
  display: block;
  color: #fff;
  font-size: 16px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 0;
  background: #747474;
  margin: 0 45px 10px 0;
  transition: all 0.5s ease 0s;
  position: relative;
}

.our-team-box .social li a:hover,
.our-team-box.active .social li a {
  border-radius: 50%;
  text-decoration: none;
  background: #0d6efd;
}

.team-content {
  padding: 18px 0 20px;
}

.team-content h3 {
  margin: 0 auto 7px;
}

.team-content h3 a {
  display: inline-block;
  font-size: 24px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  text-align: center;
  margin: auto;
}

.team-content span {
  display: inline-block;
  font-size: 16px;
  color: #888787;
  font-family: "Nunito", sans-serif;
  text-align: center;
}
/*<!-- ============================================================== -->
<!-- End swimzo team Section  -->
<!-- ============================================================== -->*/

/*============================================
<!-- Start swimzo Booking Section  -->
=============================================*/

.booking-section {
  padding: 120px 0;
}

/*============================================
	<!-- End swimzo Booking Section  -->
=============================================*/

/*<!-- ============================================================== -->
<!-- Start swimzo faq Section  -->
<!-- ============================================================== -->*/

.faq-section {
  padding: 110px 0;
}
/*accordion*/
.accordion li {
  position: relative;
  list-style: none;
  padding: 11px 30px 11px;
  background: #3e96fb;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #fff !important;
}
.accordion li a {
  width: 100%;
  display: block;
  cursor: pointer;
  font-weight: 600;
  line-height: 3;
  user-select: none;
  font-weight: 500;
  color: #fff !important;
  font-size: 20px !important;
}
.accordion li p {
  display: none;
  font-size: 16px;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 8px 0 21px;
  padding-top: 20px;
}
.accordion a:before {
  width: 2px;
  height: 12px;
  background: #fff;
  position: absolute;
  right: 43px;
  content: " ";
  top: 33px;
  transform: rotate(0deg);
  transition: all 0.2s ease-in-out;
}
.accordion a:after {
  width: 12px;
  height: 2px;
  background: #fff;
  position: absolute;
  right: 38px;
  content: " ";
  top: 38px;
  transition: all 0.2s ease-in-out;
}

a.active:after {
  transform: rotate(0deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

a.active:before {
  display: none;
}

/*<!-- ============================================================== -->
<!-- End swimzo faq Section  -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
<!-- Start swimming gallery Section  -->
<!-- ============================================================== -->*/

.gallery-section {
  padding: 114px 0 90px;
}

.single-gallery-box {
  margin-bottom: 30px;
  filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.15));
  background-color: #ffffff;
  overflow: hidden;
}

.gallery-thumb {
  overflow: hidden;
}

.gallery-thumb img {
  width: 100%;
  transition: 0.5s;
}

.single-gallery-box:hover .gallery-thumb img {
  transform: scale(1.1);
}

.gallery-title {
  padding: 25px 0;
  position: relative;
  z-index: 1;
}

.gallery-title:before {
  position: absolute;
  content: "'";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  transition: 0.5s;
  z-index: -1;
  background: #0d6efd;
}

.single-gallery-box:hover .gallery-title:before {
  height: 100%;
  top: 0;
}

.gallery-title h2 {
  font-size: 24px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  text-align: center;
  margin: auto;
  transition: 0.5s;
}

.single-gallery-box:hover .gallery-title h2 {
  color: #ffff;
}

/*<!-- ============================================================== -->
<!-- End swimzo gallery Section  -->
<!-- ============================================================== -->*/

/*============================================
<!-- Start swimzo shop Section  -->
=============================================*/

.shop-section {
  padding: 120px 0 90px;
  position: relative;
  z-index: 1;
}

/*Shop Left*/

.categories-title h4 {
  font-size: 22px;
  font-weight: 600;
  border-bottom: 2px solid rgba(6, 36, 97, 0.1);
  padding: 0px 0px 25px;
  margin: 0px 0px 30px;
  position: relative;
  color: #232323;
}

.categories-title h4:before {
  position: absolute;
  content: "";
  left: -35px;
  top: 0;
  height: 29px;
  width: 3px;
  background: #0d6efd;
}

.widget-check-box {
  padding: 40px 35px 18px;
  background: #fff;
  box-shadow: 0px 10px 50px rgba(231, 231, 231, 0.5);
  border-radius: 4px;
  margin-bottom: 30px;
}

/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 22px;
  width: 22px;
  border-radius: 2px;
  border: 1px solid rgba(6, 36, 98, 0.1);
  background-color: rgba(7, 72, 131, 0);
}

.widget-check {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  color: #232323;
}

.widget-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

label.widget-check span {
  display: inline;
  float: right;
}

.widget-check:hover input ~ .checkmark {
  background-color: #ccc;
}

.widget-check input:checked ~ .checkmark {
  background-color: #0d6efd;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.widget-check input:checked ~ .checkmark:after {
  display: block;
}

.widget-check .checkmark:after {
  left: 7px;
  top: 2px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Painting and performance;
 */

.noUi-base,
.noUi-handle {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement;
 */

.noUi-horizontal {
  height: 5px;
}

.noUi-horizontal .noUi-handle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: -7px;
  top: -6px;
  background-color: #3bb3d8;
}

.noUi-background {
  background: #ececec;
}

.noUi-connect {
  background: #0d6efd;
  -webkit-transition: background 450ms;
  transition: background 450ms;
}

.noUi-origin {
  border-radius: 2px;
}

.noUi-target {
  border-radius: 2px;
}

/* Handles and cursors;
 */

.noUi-draggable {
  cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: n-resize;
}

.noUi-handle {
  cursor: default;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

.noUi-handle:active {
  border: 8px solid rgba(59, 179, 216, 0.38);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  left: -14px;
  top: -14px;
}

/* Disabled state;
 */

[disabled].noUi-connect,
[disabled] .noUi-connect {
  background: #b8b8b8;
}

[disabled].noUi-origin,
[disabled] .noUi-handle {
  cursor: not-allowed;
}

/*Product 
======================*/

.product-categories-box {
  padding: 30px 30px 20px;
  background: #fff;
  box-shadow: 0px 10px 50px rgba(231, 231, 231, 0.5);
  border-radius: 4px;
  margin-bottom: 30px;
}

.products-collection {
  margin-bottom: 20px;
}

.product-thumb {
  float: left;
  padding-right: 17px;
}

.products-title h6 {
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: #232323;
}

.product-price span {
  font-size: 15px;
  font-weight: 400;
  color: #0d6efd;
}

.product-icon-list ul {
  line-height: 20px;
}

.product-icon-list ul li {
  list-style: none;
  display: inline-block;
  color: #0d6efd;
  letter-spacing: 4px;
  font-size: 14px;
}

/*Shop Right 
======================*/

.row.products {
  padding-left: 80px;
}

.single-products-box {
  text-align: center;
  margin-bottom: 30px;
}

.products-thumb {
  position: relative;
  z-index: 1;
}

.products-thumb:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: rgba(6, 36, 98, 0.8);
  opacity: 0.8;
  transition: 0.5s;
  border-radius: 4px 4px 0 0;
}

.products-thumb img {
  width: 100%;
  transition: 0.5s;
  border-radius: 4px 4px 0 0;
}

.product-sale {
  position: absolute;
  top: 20px;
  left: 20px;
}

.product-sale span {
  padding: 4px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  background: #0d6efd;
  color: #fff;
  border-radius: 4px;
  display: inline-block;
}

.product-thumb-icon a {
  font-size: 20px;
  width: 46px;
  height: 46px;
  line-height: 47px;
  border-radius: 50%;
  text-align: center;
  background: #fff;
  color: #0d0e14;
  transition: 0.7s;
  display: inline-block;
  position: relative;
  bottom: 40%;
  z-index: 1;
  overflow: hidden;
}

.product-thumb-icon a:before {
  position: absolute;
  content: "";
  z-index: -1;
  right: 0;
  height: 100%;
  width: 0;
  border-radius: 50%;
  background: #0d6efd;
  transition: 0.6s;
}

.product-thumb-icon a:nth-child(1) {
  position: absolute;
  left: 0;
  opacity: 0;
}

.product-thumb-icon a:nth-child(2) {
  position: absolute;
  right: 0;
  opacity: 0;
}

.product-content {
  padding: 23px 0 6px;
  border: 1px solid rgba(6, 36, 98, 0.1);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

ul.product-rating li {
  list-style: none;
  display: inline-block;
  color: #0d6efd;
  letter-spacing: 0.3em;
  font-size: 14px;
}

.product-title h2 {
  font-size: 18px;
  font-weight: 600;
  color: #232323;
  line-height: 17px;
}

.product-price p {
  font-size: 15px;
  padding: 14px 0 0px;
  color: #0d6efd;
}

.product-price p span {
  color: #616161;
  text-decoration: line-through;
  margin-left: 5px;
}

.product-thumb-icon a:hover {
  color: #fff;
}

.product-thumb-icon a:hover:before {
  left: 0;
  width: 100%;
}

.single-products-box:hover .products-thumb:before {
  height: 100%;
  top: 0;
}

.single-products-box:hover .product-thumb-icon a:nth-child(1) {
  opacity: 1;
  left: 88px;
}

.single-products-box:hover .product-thumb-icon a:nth-child(2) {
  opacity: 1;
  right: 88px;
}

/*============================================
<!-- End swimzo shop Section  -->
=============================================*/

/*============================================
<!-- start swimzo shop details Section  -->
=============================================*/

.shop-detials {
  padding: 120px 0 90px;
}

.tab {
  overflow: hidden;
}

.tabs li {
  line-height: 38px;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}

.tabs li a {
  background: inherit;
  color: #fff;
  font-weight: 600;
  display: inline-block;
  outline: none;
  padding: 5px;
  transition: all 0.5s ease-in-out;
  margin-right: 20px;
  border-radius: 5px;
}

.tabs li.current:before {
  background: transparent;
  border: 0;
}

li.current a {
  border: 1px solid #806cff;
}

.tabs_item {
  display: none;
}

.tabs_item:first-child {
  display: block;
}

/*Shop dtls Right
============================*/

.shop-dtls-info {
  padding-left: 30px;
}

.category-title h2 {
  font-size: 31px;
  font-weight: 700;
  line-height: 26px;
  padding: 0px 0 23px;
}

.category-icon-list ul li {
  list-style: none;
  display: inline-block;
  color: #0d6efd;
  letter-spacing: 0.4em;
  font-size: 16px;
}

li.category-text {
  letter-spacing: 0 !important;
  color: #67686c !important;
  padding-left: 6px;
}

.category-price h1 {
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #0d6efd;
  padding: 6px 0 19px;
}

.category-price span {
  color: #616161;
  padding-left: 14px;
  text-decoration: line-through;
}

.category-description p {
  font-size: 16px;
  line-height: 28px;
  color: #888787;
  font-family: "Nunito", sans-serif;
  margin: auto;
}
.category-color p {
  color: #062462;
  line-height: 26px;
  font-weight: 500;
  font-size: 16px;
  padding: 18px 0 6px;
}

.category-color span {
  color: #67686c;
  padding-left: 20px;
  position: relative;
}

.category-color span:before {
  position: absolute;
  content: ":";
  left: 4px;
  top: -3px;
}

/* --- Quantity button 
================================*/

.category-count-button {
  display: inline-flex;
  padding: 8px 0 30px;
}

.quantity-with_btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  vertical-align: middle;
}

.quantity .cart-plus-minus {
  position: relative;
  width: 170px;
  text-align: left;
  height: 54px;
  overflow: hidden;
  border-radius: 5px;
}

.quantity .cart-plus-minus > .ctnbutton {
  cursor: pointer;
  position: absolute;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  width: 38px;
  -webkit-box-align: center;
  align-items: center;
  vertical-align: middle;
  color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background: #0d6efd;
}

.quantity .cart-plus-minus > .cart-plus-minus-box {
  border: 0;
  height: 54px;
  text-align: center;
  width: 170px;
  font-size: 16px;
  font-weight: 600;
  color: #062461;
  background-color: #fff !important;
  background: linear-gradient(90deg, #0d6efd 50%, transparent 0) repeat-x,
    linear-gradient(90deg, #0d6efd 50%, transparent 0) repeat-x,
    linear-gradient(0deg, #0d6efd 50%, transparent 0) repeat-y,
    linear-gradient(0deg, #0d6efd 50%, transparent 0) repeat-y;
  background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  -webkit-animation: linearGradientMove 0.3s infinite linear;
  animation: linearGradientMove 0.3s infinite linear;
}

.quantity .cart-plus-minus > .ctnbutton.dec {
  top: 50%;
  left: 0%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
  border-radius: 0 30px 30px 0;
}

.quantity .cart-plus-minus > .ctnbutton.inc {
  top: 50%;
  right: 0%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  height: 100%;
  border-radius: 30px 0 0 30px;
}

/*categories button
=========================*/

.category-button {
  display: inline-block;
  padding-left: 20px;
}

.category-button a {
  padding: 13px 25px;
  font-size: 15px;
  font-weight: 500;
  background: #0d6efd;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.category-button a:before {
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  background: rgba(6, 36, 98, 0.8);
  border-radius: 4px;
  transition: 0.5s;
}

.category-button a i {
  padding-left: 10px;
  font-size: 16px;
}

.category-button a:hover:before {
  left: 0;
  width: 100%;
}

/* table
================*/

table.category-table {
  padding: 2px 0 0;
  display: inline-block;
}

table.category-table td.table-title {
  font-size: 16px;
  color: #062461;
  font-weight: 500;
}

table.category-table tr td {
  padding-right: 25px;
  padding-bottom: 12px;
}

table.category-table td.table-title {
  font-size: 16px;
  color: #0d0e14;
  font-weight: 500;
}

table.category-table td.table-text {
  color: #616161;
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 400;
}

table.category-table td.table-text:before {
  position: absolute;
  content: ":";
  left: -15px;
  top: 0;
  font-size: 20px;
  color: #0d0e14;
}

.product-item-title h2 {
  font-size: 24px;
  color: #232323;
  font-weight: 600;
  font-style: italic;
  font-family: "Barlow";
  margin: 20px auto 15px;
}

/*============================================
<!-- End swimzo shop details Section  -->
=============================================*/

/*<!-- ============================================================== -->
<!-- swimzo Bounce Animation Css -->
<!-- ============================================================== -->*/
/* bounce-animate */
.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.bounce-animate2 {
  animation-name: float-bob2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob2;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob2;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob2;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.bounce-animate3 {
  animation-name: float-bob3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob3;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob3;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob3;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.bounce-animate4 {
  animation-name: float-bob4;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob4;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob4;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob4;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.bounce-animate5 {
  animation-name: float-bob5;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob5;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob5;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob5;
  -o-animation-duration: 6s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.bounce-animate-slow {
  animation-name: float-bob5;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob5;
  -moz-animation-duration: 15s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob5;
  -ms-animation-duration: 15s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob5;
  -o-animation-duration: 15s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.bounce-animate-3 {
  animation-name: float-bob6;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob6;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob6;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob6;
  -o-animation-duration: 6s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

@keyframes float-bob {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }

  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@keyframes float-bob2 {
  0% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }

  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  100% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }
}

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

  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
}

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

  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }

  100% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
}

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

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
}

@keyframes float-bob6 {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }

  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  50% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

/*--==============================================->
  <!-- swimzo Animation Dance -->
 ==================================================-*/
/**/
.dance3 {
  -webkit-animation: dance3 8s alternate infinite;
  animation: dance3 8s alternate infinite;
}

@keyframes dance3 {
  0% {
    -webkit-transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

.dance {
  -webkit-animation: dance 2s alternate infinite;
  animation: dance 2s alternate infinite;
}

@keyframes dance {
  0% {
    -webkit-transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1.2);
  }
}

.dance2 {
  -webkit-animation: dance2 4s alternate infinite;
  animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }

  50% {
    -webkit-transform: translate3d(25px, -25px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, -25px, 25px);
  }
}

.watermark-animate {
  -webkit-animation: watermark-animate 8s infinite;
  animation: watermark-animate 8s infinite;
  animation-direction: alternate-reverse;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes watermark-animate {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

/*
<!-- ============================================================== -->
<!-- swimzo Scrollup Section -->
<!-- ============================================================== -->*/

/*------back-to-top------------*/
.prgoress_indicator {
  position: fixed;
  right: 50px;
  bottom: 75px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(17, 85, 233, 0.2);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transform: translateY(15px) !important;
  transition: all 200ms linear !important;
}
.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}
.prgoress_indicator::after {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  color: #ff5e14;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  font-weight: 900;
  z-index: 1;
  transition: all 200ms linear !important;
}
.prgoress_indicator::before {
  position: absolute;
  content: "\f633";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  font-family: bootstrap-icons !important;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}
.prgoress_indicator:hover ::after {
  color: var(--primary-color-one);
}
.prgoress_indicator:hover ::before {
  opacity: 1;
}
.prgoress_indicator svg path {
  fill: none;
}
.prgoress_indicator svg.progress-circle path {
  stroke: #ff5e14;
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear !important;
}

/*===========================
<-- swimzo Loader Css -->
=============================*/
.loader-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: 0.8s 1s ease;
  z-index: 666;
}

.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  border: 3px solid transparent;
  border-top-color: #0163a2;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.loader:before {
  position: absolute;
  content: "";
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #ff5e14;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader:after {
  position: absolute;
  content: "";
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: #fff;
  -webkit-animation: spin 2.5s linear infinite;
  -moz-animation: spin 2.5s linear infinite;
  -o-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

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

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader-wrapper .loder-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #111;
  z-index: 2;
}

.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
  left: -100%;
}

.loaded .loder-section.right-section {
  right: -100%;
}

.loaded .loader-wrapper {
  visibility: hidden;
}

.loaded .loader {
  top: -100%;
  opacity: 0;
}

/*curser point */

.curser {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border: 1px solid #0163a2;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: 0.1s;
}

.curser2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #0163a2;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: 0.15s;
  animation: Ripple 1.6s ease-in-out infinite;
  -webkit-animation: Ripple 1.6s ease-in-out infinite;
  -moz-animation: Ripple 1.6s ease-in-out infinite;
}