/**
* Template Name: Stitch Krafts
* Updated: Sept 20 2024 with Bootstrap v5.3.1
* Template URL: https://stitchkrafts.com/
* Author: Zeeshan Yousuf

1. General                  LN -> 43
2. 


**/


:root {
  /* Colors */
  --color-default: #212121;
  --color-primary: #236e85;
  --color-secondary: #fdab21;
}
@font-face {
  font-family: 'Font Awesome 5 Free';
  src: url('/webfonts/fa-regular-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  src: url('/webfonts/fa-solid-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'bootstrap-icons';
  src: url('./bs5-fonts/fonts/bootstrap-icons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


::-webkit-scrollbar {width: 7px;}
::-webkit-scrollbar-track {background: #161b26;}
::-webkit-scrollbar-thumb {background: var(--color-secondary);}
::-webkit-scrollbar-thumb:hover {background: var(--color-primary);}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html {scroll-behavior: smooth;}
body{font-family: "Source Sans 3", sans-serif;font-weight: 400; font-size:16px;letter-spacing:0.5px;color: var(--color-default);box-sizing: border-box;	background-color:#ffffff;overflow-x:hidden;}
a {color: var(--color-primary);text-decoration: none;cursor: pointer;}
a:hover {color: #236e85; text-decoration: none;}
h1,h2,h3,h4,h5,h6 {margin-bottom:0;font-family: var(--font-secondary);}
p{margin-bottom:0;}
.fs-7{font-size:15px!important;}
.fs-8{font-size:13px!important}
.fs-9{font-size:12px!important}
.fs-10{font-size:10px!important}
ul{list-style-type: none;padding:0!important;margin: 0!important}
ul li{list-style: none;padding:0;margin: 0}


.textDefault{color:var(--color-default)}
.textPrimary{color: var(--color-primary);}
.textSecondary{color: var(--color-secondary);}
.textLight{color: #ededed}
.divider { width: 50%;height: 4px;margin: -18px 0 15px;background: #e4e4e4;clear: both;}
.bgPrimary{background:var(--color-primary)}
.bgSecondary{background:var(--color-secondary)}
.bg-stitchkrafts{background:linear-gradient(rgba(10, 67, 84, 0.1), rgba(10, 67, 84, 0.1));}
.bg-light-stitchkrafts{background:linear-gradient(rgba(10, 67, 84, 0.05), rgba(10, 67, 84, 0.15));}
.bg-lighter-stitchkrafts{background:linear-gradient(rgba(10, 67, 84, 0.06), rgba(10, 67, 84, 0.06));}


.sk-btn-primary {background-color: #236e85;color: white;border: none;padding: 0.4rem 1rem;font-size: 1rem; border-radius: 0.375rem;transition: background-color 0.3s ease, color 0.3s ease;}
.sk-btn-primary:hover {background-color: #fdab21; color: #000;}

/* Secondary Button */
.sk-btn-secondary {
    background-color: #fdab21; /* yellow base */
    color: #121212;
    border: none;
    padding: 0.4rem 1rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect: yellow → blue, text color changes */
.sk-btn-secondary:hover {
    background-color: #236e85; /* blue on hover */
    color: #fff; /* text remains white */
}


section{padding: 70px 0;}
.section-p-bg{position: relative; min-height: 100px;  margin: 0;background: url(../imgs/breadcrumbs/breadcrumb-bg.webp) repeat center center #236e85;z-index:1;}
.section-header {width:80%;margin:0 auto 20px; text-align: center; padding-bottom: 15px;}
.section-header h2 {font-size: 24px;font-weight: 900;color: #236E85;margin-bottom: 20px;padding-bottom: 20px; position: relative;text-transform: uppercase;}
.section-header h2:after { content: "";  position: absolute;display: block;  width: 70px; height: 2px; background: var(--color-primary);left: 0;right: 0; bottom: 0;margin: auto;}
.section-header h4 {font-size: 18px; font-family: var(--font-default); color:#555;}

.moreless-button {font-size:12px;color: #007bff;cursor: pointer;}
.moreless-button:hover {text-decoration: none;}

.img-shadow {position: relative;}
.img-shadow img {padding-right:10px;}
.img-shadow::before {content: ''; position: absolute; top: 10px;left: 13px; right: 0;bottom: 12px; background: var(--color-secondary); border-radius: 8px; z-index: -1}
.img-shadow .sk-logo {position:absolute;bottom:0;	right:0;width:100px;height:100px;background:#fff;border-radius:50%;}

/*----  Global Forms Styling ----*/
.sk-form {position: relative;padding: 30px;}
.form-control{padding: 8px 10px!important;font-size: 0.9rem!important;}
.form-label{font-size: 12.5px;  color: var(--color-primary); font-weight: 500; letter-spacing: 0.5px; text-transform: capitalize; margin-bottom: 1px;}
.general-form {width: 100%;height: 100%;padding: 10px;}
.general-form .form-control{font-size: 0.85rem!important;}
.form-check-input:checked {background-color: var(--color-primary); border-color: #236e85;}

.captcha-container {position: relative; width: 100%;}
#captcha { width: 100%; padding-right: 100px; box-sizing: border-box;}
.captcha-img {position: absolute; top: 40.3%;  right: 41px; transform: translateY(-50%); height: 30px; line-height: 30px;letter-spacing: 2px; border-radius: 5px;}
.refresh-btn {position: absolute; top: 41%; right: 6px; height: 30px;line-height: 30px; transform: translateY(-50%); color: #fff; background-color: #236e85;padding: 0 7px; border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease;}
.refresh-btn:hover{color: #000; background-color: #ffc107;}





/*---- # Header # ----*/
.headTop {position:relative;top:0;width:100%;z-index:1;}
.topbar {height: 28px;transition: all 0.5s;padding: 0;background:url(../imgs/breadcrumbs/breadcrumb-bg.webp) repeat center center #236e85;}
.topbar .sk-offerText{width: 100%;line-height: 28px; text-align: center;font-size: 13px; color: #fff;font-weight:600;}

.header {transition: all 0.5s;z-index: 1005!important;height: 70px;padding: 0 1%;background-color: #ffffffdb;}
.header.sticked {position: fixed;top: 0;right: 0;left: 0;padding: 0 10px 0 0;background: #fff;box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);}
.header .logo img {position:relative;max-height: 55px;margin-right: 6px;z-index:100000;}
.header .logo h1 {font-size: 30px;margin: 0;font-weight: 600;letter-spacing: 0.8px;color: #fff;font-family: var(--font-primary);}
.header .logo h1 span {color: #f96f59;}
.sticked-header-offset {margin-top: 70px;}

/*---- Desktop Navigation ----*/
@media (min-width: 1280px) {
  .navbar {padding: 0;}
  .navbar ul {margin: 0;padding: 0;display: flex;list-style: none;align-items: center;  }
  .navbar li {position: relative;}
  .navbar>ul>li {white-space: nowrap; padding: 10px 7px; }
  .navbar a, .navbar a:focus {display: flex;align-items: center;justify-content: space-between;padding: 0 3px;font-size: 13px;text-transform:uppercase;letter-spacing:1px; font-weight: 700; color: #444; white-space: nowrap; transition: 0.3s; position: relative; }
  .navbar a i,.navbar a:focus i {font-size: 13.5px;line-height: 0; margin-left: 5px;}
  .navbar > ul > li > a::before {content: "";position: absolute;width: 0; /* Starting with width 0 */ height: 4px;top: -25px;left: 0;background-color: var(--color-secondary);visibility: hidden; /* Keeps it hidden */ transition: all 0.3s ease-in-out;}
  .navbar > ul > li > a:hover::before { visibility: visible; width: 100%; /* Expands on hover */}
  .navbar a:hover:before,.navbar li:hover>a:before, .navbar .active:before { visibility: visible;width: 100%;}
  .navbar a:hover,.navbar .active,.navbar .active:focus,.navbar li:hover>a {color: #236E85;}
  .navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 50%; /* Center align */
  transform: translateX(-50%); /* Shift back by 50% of own width */
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 8px;
  border-top: 4px solid #236e85;
}

  .navbar .dropdown ul:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #236e85;
  border-style: solid;
  border-width: 8px;
  bottom: 100%;
  content: " ";
  height: 0;
  left: 50%; /* Center align */
  transform: translateX(-50%);
  top: -20px;
  margin-left: 0; /* remove if previously set */
  pointer-events: none;
  position: absolute;
  width: 0;
}
  .navbar .dropdown ul .col{width:200px;padding:5px 10px;}
  .navbar .dropdown ul li  { min-width: auto; }
  .navbar .dropdown ul a {padding: 5px 10px;font-size: 14px;text-transform: capitalize;letter-spacing: 0.5px;font-weight: 600;color: #444; }
  .navbar .dropdown ul a i {font-size: 12px; }
  .navbar .dropdown ul a:hover,.navbar .dropdown ul .active:hover,.navbar .dropdown ul li:hover>a {color: var(--color-secondary);}
  .navbar .dropdown:hover>ul { opacity: 1;  top: 50px;visibility: visible;}
  .navbar .dropdown .dropdown ul {top: 0; left: calc(100% - 30px); visibility: hidden; }
  .navbar .dropdown .dropdown:hover>ul {opacity: 1; top: 0; left: 100%; visibility: visible;}
  .navbar ul .lastDiv{display: none !important;}
}
@media (min-width: 1280px) and (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {left: -90%;}
  .navbar .dropdown .dropdown:hover>ul {left: -100%;}
}
@media (min-width: 1280px) {
  .mobile-nav-show,.mobile-nav-hide { display: none;}
}
/*---- Mobile Navigation ----*/
@media (max-width: 1279px) {
  .navbar {position: fixed;top: 28px;left: -100%;width: 100%;	max-width: 440px; bottom: 0;transition: 0.3s; z-index: 9997; }
  .navbar ul {position: absolute; inset: 0;  margin: 0;padding: 70px 0 10px 0; background: #fff; overflow-y: auto;overflow-x: hidden; transition: 0.3s;z-index: 9998;}
  .navbar a,.navbar a:focus {display: flex;align-items: center; justify-content: space-between; padding: 6px 10px 6px 18px; font-size: 14px;font-weight: 600; color:#161b26; white-space: nowrap;border-top:1px solid #eee; transition: 0.3s;}
  .navbar a i,.navbar a:focus i {font-size: 12px;	line-height: 0;padding: 5px;background: #f4f4f4;	border-radius: 10%; }
  .navbar a:hover,  .navbar .active,  .navbar .active:focus,  .navbar li:hover>a { color: #236e85;  }
  .navbar .getstarted, .navbar .getstarted:focus { background: var(--color-primary); padding: 8px 20px;  border-radius: 4px; margin: 15px; color: #ff662a;}
  .navbar .getstarted:hover, .navbar .getstarted:focus:hover { color: #ff662a;  background: rgba(0, 131, 116, 0.8);  }
  .navbar .dropdown ul, .navbar .dropdown .dropdown ul { position: static; display: none;  padding:0;  margin: 0px 15px;  transition: all 0.5s ease-in-out;  overflow: hidden;  }
  .navbar .dropdown>.dropdown-active, .navbar .dropdown .dropdown>.dropdown-active { display: block;  }
  .mobile-nav-show,.mobile-nav-hide {position: relative; left: -12px;top:0;	height:70px;line-height: 74px;	padding: 0 5px;  font-size: 24px;   z-index: 9999;background-color:#fdab21;transition: all 0.5s ease-in-out;	cursor: pointer; }
  .mobile-nav-active { overflow: hidden; }
  .mobile-nav-active .navbar { left: 0; }
  .mobile-nav-active .navbar:before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0, 0.2);z-index: 9996; }
  .navbar ul li.lastDiv {	padding:5px 0;background:#f4f4f4;	}
  .navbar ul li.lastDiv a {display: flex;justify-content: flex-start;font-size: 13px; line-height: 0; padding:3px 18px;border-top: none;}
  .navbar ul li.lastDiv .social-links{padding:5px 20px;background:#236e85; 	 }
  .navbar ul li.lastDiv .social-links i{background:none;}
  .navbar ul li.lastDiv .social-links a {font-size: 15px;padding:0px; color: #fff; margin-right: 5px;transition: 0.3s;}
  .navbar ul li.lastDiv .social-links a:hover {color: #fdab21;}
}

/*----- Home Slider -----*/
.owl-carousel .owl-item {transition: opacity 0.5s ease;}
#sk-Slider{position: relative; height: 600px; padding: 60px 0; margin: 0;background: url(../imgs/breadcrumbs/breadcrumb-bg.webp) repeat center center #236e85;z-index:1;}
#sk-Slider .title {color: #fff;font-size: 34px; font-weight: 900;transition: opacity 0.5s ease; line-height: 1em; }
#sk-Slider p {line-height:22px; font-size: 17px;font-weight: 400;margin-bottom:25px;transition: opacity 0.5s ease;}
#sk-Slider .slide-img{width: 93%; display: block;float: right;}
#sk-Slider .btn-get-started{font-family: var(--font-primary);font-weight: 700;font-size: 14px; letter-spacing: 0.5px; display: inline-block; padding: 10px 20px; border-radius: 5px;transition: 0.3s; color: #000; background: #fdab21; box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); border: none;transition: all 0.3s ease-in-out;}
#sk-Slider .btn-get-started:hover {	color: #fff;	background:	#101010;	border-color: rgba(0, 0, 0, 0.5);}
.owl-theme .owl-dots .owl-dot span { width: 15px!important; height: 7px!important;background: #ffffff!important;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #fdab21!important;}
#sk-Slider .divider{width:170px;height:8px;margin:5px 0 20px;background:rgba(255,255,255,.05)}

/*----- Home Form -----*/
.skFrom{
  position:relative;
  top: -90px;
  padding: 25px;
  background: #fff;
  border-radius: 20px;
  z-index: 1;
}
.sms-note{
    font-size: 12px;
    color: #777;
    margin-top: 12px;
    line-height: 1.4;
    font-weight: 600;
}








/*----- Breadcrumbs -----*/
.breadcrumbs{position:relative;margin: 0;}	
.breadcrumbs .page-header { padding: 45px 0; min-height: 230px;  position: relative;background: url(../imgs/breadcrumbs/breadcrumb-bg.webp) repeat center center #236e85;}
.breadcrumbs .page-header h1 {margin-bottom: 15px;font-size: 36px;font-weight: 900;letter-spacing:1px;color: #fff;}
.breadcrumbs .page-header h5 {margin-bottom: 15px;font-size: 36px;font-weight: 900;letter-spacing:1px;color: #fff;}
.breadcrumbs .page-header p {font-size: 15px;  color: #fff;  text-transform: none;  letter-spacing: 0.5px;}
.breadcrumbs .page-header img {	width:100%;float: right;}
.breadcrumbs nav { background-color: #f6f6f6; padding: 8px 0;}
.breadcrumbs nav ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--color-default);}
.breadcrumbs nav ol a { color: var(--color-primary); transition: 0.3s;}
.breadcrumbs nav ol li + li { padding-left: 10px;}
.breadcrumbs nav ol li + li::before { display: inline-block; padding-right: 10px; color: var(--color-secondary); content: "/";}





	/***   User Account Styling   ***/
.sk_userAccount, .sk_Search, .sk_notifications {
	position: relative;
	z-index: 2;
}
.sk_userAccount .icons, .sk_Search .icons, .sk_notifications .icon {
	position: relative;	
	overflow: hidden;
	cursor: pointer;	
}
.sk_userAccount .icons img, .sk_Search .icons img, .sk_notifications .icons img{width:24px;}

.sk_userAccount .icons i:hover {color: #fdab21;}
.sk_userAccount .menu, .sk_Search .searchBar {
	position: absolute;
	top: 35px;
	right: -7px;	
	background-color: #fff;	
	box-sizing: border-box;
	border-radius: 4px;
	transition: 0.5s;
	visibility: hidden;
	opacity: 0;
	box-shadow: 0 .3rem .3rem rgba(0,0,0,.15) !important;
	border-top: 3px solid #236e85;
}
.sk_userAccount .menu{width: 220px;}
.sk_Search .searchBar{width: 300px;height:41px;padding: 0;}
.sk_userAccount .menu.active, .sk_Search .searchBar.open {
	top: 43px;
	visibility: visible;
	opacity: 1;
	}
.sk_Search .searchBar .formControl{
	height: 38px;
    padding: 5px 10px;
    font-size: 13px;
    border: none;
}
.sk_Search .searchBar .button {
	width: 38px;
    height: 38px;
    color: #fff;
    border: none;
    background: #236e85;
    border-radius: 0 0px 4px 0;
}
.sk_notifications a {
	color:var(--color-default);
}
.sk_notifications a .count{
	position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    background: #dc3545;
    color: white;
    border-radius: 25%;
}

.sk_notifications i.is_msg {
    animation: bell-vibrate 1s ease-in-out infinite;
}

@keyframes bell-vibrate {
    0% { transform: rotate(0); }
    4% { transform: rotate(8deg); }
    8% { transform: rotate(-8deg); }
    12% { transform: rotate(8deg); }
    16% { transform: rotate(-8deg); }
    20% { transform: rotate(0); }
    100% { transform: rotate(0); }
}












	
	
	
	
.sk_userAccount .menu::before, .sk_Search .searchBar::before {
	content: '';
	position: absolute;
	top: -9px;
	right: 25px;
	border-bottom: 6px solid #236e85;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}

.sk_userAccount .menu h3{
	width: 100%;
    text-align: left;
    font-size: 14px;
    padding: 3px 6px 10px;
	margin-bottom: 10px;
    font-weight: 600;
    color: #161b26;
    line-height: 1.1em;
    border-bottom: 1px dotted #eee;
}

.sk_userAccount .menu h3 span{font-size: 11px;color: #888;font-weight: 400;}
.sk_userAccount .menu ul {padding-left:15px;padding-right:15px;margin-bottom:15px;}
.sk_userAccount .menu ul li{
	list-style: none;
    padding: 4px 0 4px;
    display: flex;
    align-items: center;
}
.sk_userAccount .menu ul li i{
	font-size: 14px;
    color: #236e85;
    padding-right: 10px;}
.sk_userAccount .menu ul li a{
	display: inline-block;
	text-decoration: none;
	color: #161b26;
	 font-size:13px;
	font-weight: 500;
	transition: 0.5s;
}
.sk_userAccount .menu ul li:hover a{color: #236e85;}


/*--------------------------------------------------------------
# Introduction Sections
--------------------------------------------------------------*/
.introduction {
    z-index: 0;
	background:#f4f4f4;
}
.intro-box {
  padding: 15px 10px; 
  position: relative;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  height: 100%;
  width: 100%;
  text-align: center;
  border:1px solid #eee;
}
.intro-box:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.1);
}
.intro-box .title {
	padding-top: 7px;
    font-weight: 700;
    font-size: 17px;
    color: #161b26;
    letter-spacing: 0.5px;
}

.intro-box p {
    color: #161b26;
    transition: 0.3s;
    text-align: center;
	font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
}

 .intro-box img{
	width:40px;
	height: 40px;
  margin-bottom: 5px;
  padding-top: 0;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 36px;
  line-height: 1;
  color: #161b26;
}

.intro-box:hover .title a,
.intro-box:hover .icon {
  color: #fff;
}


/*----  Products Sections ----*/
.sk-products, .sk-embProducts {position: relative;height: 100%;padding: 8px;text-align: center;background:#fff;border: 1px solid rgba(10, 67, 84, 0.1);border-radius: 8px;transition: all 0.3s ease-in-out;;}
.sk-products:hover, .sk-embProducts:hover {border: 1px solid #eeeeee;box-shadow: 0 4px 16px rgba(35, 110, 133, 0.4); }
.sk-products figure{padding: 10px 15px;background: rgba(10, 67, 84, 0.06); border-radius: 6px;}
.sk-products figure img {width:205px;height:auto;}
.sk-products h2{padding-bottom: 6px; font-weight: 700; font-size: 19px; text-transform:capitalize;text-align:center;color: #236E85;letter-spacing: 0.5px;}
.sk-products p{padding: 5px 10px 10px 10px;color: #161b26;transition: 0.3s; text-align: center; font-weight: 500;font-size: 16px; letter-spacing: 0.30px;}
.sk-embProducts:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 90px; background: #ececec; border-radius: 8px 8px 0 0; z-index: 1;}
.sk-embProducts figure{display: flex;position: relative;padding: 5px; top: 15px; border-radius: 50%;width: 130px;height: 130px; line-height: 130px; margin: 0 auto 35px; z-index: 2;  background: #236E85; border: 5px solid #eee; align-items: center;  justify-content: space-around;}
.sk-embProducts figure img {width: 80px; fill: #fff;}
.sk-embProducts h2 { padding-bottom: 5px;  font-weight: 700;  font-size: 20px;  text-align: center;   color: var(--color-primary);   letter-spacing: 0.5px;}
.sk-embProducts p{font-size: 16px;padding: 10px 20px 10px 20px;}

/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
#sk-pagePost {position: relative; margin: 0;}
#sk-pagePost .card {position:relative;padding: 0 ; margin: 0; height: 100%;}
#sk-pagePost .card .category{height: 6px; line-height: 5px;font-size: 12.5px; text-transform: uppercase; letter-spacing: 2px; color: #236e85; font-weight: 900;}
#sk-pagePost .card-image{position: relative;width:100%;	max-height: 185px; margin: 0 0 20px 0;overflow: hidden;padding: 0px;border-radius: 10px;}
#sk-pagePost .card-content{min-height: 70px; padding: 0; margin-bottom: 12px;}
#sk-pagePost .card-content h2 {font-size: 16px;line-height: 23px;font-weight: 600; margin: 10px 0 10px;}
#sk-pagePost .card h2{color:#000;font-family: initial;}
#sk-pagePost .card h2:hover{color:#236E85}
#sk-pagePost .card-content .description{font-size: 16px; line-height: 18px;color: #202020}
#sk-pagePost .card-content .post-meta {list-style: none; font-size: 10px; padding: 5px 0px 0 0;  margin: 0; border-top: 1px dotted #eee; border-bottom: 1px dotted #eee;}
#sk-pagePost .card-content .post-meta a, #sk-pagePost .card-content .post-meta li{ color: #222;}
#sk-pagePost .card-content .post-meta a:hover{ color: #236e85; opacity: 1;}
#sk-pagePost .card-content .post-meta li {position: relative; display: inline-block;padding: 0 5px 0 0; margin: 0 10px 0 0;font-size: 13px;}
#sk-pagePost .card-content .post-meta li:not(:last-child):after {position: absolute;content: ' - ';right: -5px;top: 0;}
#sk-pagePost .card-content .post-meta li i{color:#ee7b00;padding-right: 0;}

#sk-pagePost .swiper-navBtn{
  color: #6E93f7;
  transition: color 0.3s ease;
}
#sk-pagePost .swiper-navBtn:hover{
  color: #4070F4;
}
#sk-pagePost .swiper-navBtn::before,
#sk-pagePost .swiper-navBtn::after{
  font-size: 35px;
}
#sk-pagePost .swiper-button-next{
	display:none;
  right: 0;
}
#sk-pagePost .swiper-button-prev{
	display:none;
  left: 0;
}
#sk-pagePost .swiper-pagination-bullet{
  background-color: #6E93f7;
  opacity: 1;
}
#sk-pagePost .swiper-pagination-bullet-active{
  background-color: #4070F4;
}
@media screen and (max-width: 768px) {
 #sk-pagePost  .slide-content{
    margin: 0 10px;
  }
 #sk-pagePost  .swiper-navBtn{
    display: none;
  }
}	


#sk-pagePost .searchPost{
  position: relative;
}
#sk-pagePost .searchPost .searchBox{
  position: relative;
  height: 45px;
  width: 100%;
  font-size: 14px !important;
  margin: 0;
  padding: 0 100px 2px 40px !important;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
#sk-pagePost .searchPost i {
    position: absolute;
    top: 24px;
    left: 12px;
    font-size: 22px;
    color: var(--color-primary);
    transform: translateY(-50%);
}
#sk-pagePost .searchPost .countPost{
  position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 7px;
    color: white;
    background: var(--color-primary);
    font-size: 12px;
    border-radius: 6px;
}

.no-results-message {
  color: #dc3545;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
  display: none;
}






































.blogFooter{padding: 5px 15px;margin-top: 20px;background: rgba(10, 67, 84, 0.06);border-top: 1px solid #f4f4f4;border-bottom: 1px solid #f4f4f4;}
.pagination-wrap {user-select: none; display: flex;}
.pagination-wrap a {text-decoration: none;}
.pagination-layout {display: flex; padding: 0; margin: 0;list-style-type: none;}
.pagination-layout li {width: auto; margin: 0 2px;}
.pagination-layout li a.page {height: 24px; min-width: 24px;display: block;border: none;line-height: 24px;padding: 0 5px;text-align: center; font-size: 12px; border-radius: 4px; font-weight: 700; color: white; background-color: var(--color-primary); transition: all 0.2s ease;}
.pagination-layout li a.page:hover {background-color:var(--color-secondary);}
.pagination-layout li.active a.page {background-color: var(--color-secondary);color: black;}
.pagination-layout li.disabled a.page:hover {color: white;background-color: #007bff;cursor: default;}
.pagination-prev,.pagination-next {color: white; cursor: pointer; padding: 0 8px;border-radius: 4px; background-color: #888;transition: background-color 0.2s ease;font-weight: bold;}
.pagination-prev:hover,.pagination-next:hover {color: #101010; background-color: var(--color-secondary)}
.pagination-prev.disabled,.pagination-next.disabled {margin: 0 2px;color: #D8D8D8;cursor: default;background-color: #fff;}
.pagination-prev.disabled:hover,.pagination-next.disabled:hover {color: #D8D8D8;background-color: #ededed;}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.footer {position: relative;font-size: 15px; background: linear-gradient(rgba(10, 67, 84, 0.05), rgba(10, 67, 84, 0.15)); padding: 45px 0 0 0;}
.footer .topShade{position: absolute; top: 0; width: 100%; padding: 0; margin: 0;}
.footer .topShade ul {list-style:none;width:100%;font-size:0;margin: 0;padding: 0;}
.footer .topShade li {display: inline-block;float: left; width: 25%; height:6px; margin: 0;}
.footer .topShade li:nth-child(1) {background:#81B7C3;}
.footer .topShade li:nth-child(2) {background:#A3C9D4;}
.footer .topShade li:nth-child(3) {background:#A3C9D4;}
.footer .topShade li:nth-child(4) {background:#81B7C3;}
.footer .footer-info .logo {line-height: 0;margin-bottom: 10px;}
.footer .footer-info .logo img {max-height: 55px;margin-right: 6px;}
.footer .footer-info .logo span {font-size: 30px;font-weight: 700;letter-spacing: 1px;color: #fff;font-family: var(--font-primary);}
.footer .footer-info p {font-family: var(--font-primary);}
.footer .social-links a { height:16px;font-size: 16px; color: #444; margin-right: 6px; transition: 0.3s;}
.footer .social-links a:hover {color: #111;}
.footer h4 {font-size: 17px;font-weight: 700;text-transform:capitalize;position: relative; color:#000000;}
.footer .divider { width: 50%;height: 4px;margin: -18px 0 15px;background: #e4e4e4;}
.footer .ssl-certificate {display: block; margin-top: -5px;}
.footer .ssl-certificate img{ width: 90%;} 
.footer .footer-links {margin-bottom: 30px;}
.footer .footer-links ul {list-style: none;padding: 0; margin: 0;}
.footer .footer-links ul i {padding-right: 2px;color: #236e85;font-size: 10px;line-height: 0;}
.footer .footer-links ul li {padding: 5px 0;display: flex;align-items: center;}
.footer .footer-links ul li:first-child {padding-top: 0;}
.footer .footer-links ul li a {color: #333;transition: 0.3s; display: inline-block;line-height: 1;font-weight: 600;font-size:13.5px;}
.footer .footer-links ul li a:hover, .footer .footer-links ul li a.active { color: var(--color-secondary);}
.footer .footer-contact p {line-height: 26px;}
.footer .footer-bottom-area {position: relative; display: block; padding: 8px 0;font-size: 12px;font-weight: 600;text-align: center;background:linear-gradient(rgba(10, 67, 84, 0.1), rgba(10, 67, 84, 0.1));}
.footer .credits {padding-top: 4px;text-align: center;font-size: 13px;}
.footer .credits a {color: #fff;}
.footer .contact-links {position: relative; display: block;padding: 0;}
.footer .contact-links li {width: 100%; display: inline-flex; vertical-align: middle; margin: -5px 0 15px 0px; padding: 0px;}
.footer .contact-links li a{color: #101010;}
.footer .contact-links i {line-height: 20px; margin: 0;color: #236e85;font-size: 16px;}
.footer li span { display: block; font-size: 14px; margin-left: 12px; color: #101010;}
.footerCredit{width: 100%; height: 45px;bottom:0;}
.google-reviews-img {width: 45%;  margin-right: 20px;}
.trust-reviews-img {width: 45%; }


/*--------------------------------------------------------------
# Blog Pag Section - Footer Styling & Blog Details Section
--------------------------------------------------------------*/


#blogPost {padding:0;margin:0;}
#blogPost article {display: flex;margin-bottom: 5px;}
#blogPost article img {height: 50px;}
#blogPost article .content{margin-left:10px;text-align: left;}
#blogPost article .content h3{color:#121212;font-size:14px;margin-bottom:0;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
#blogPost article .content h3:hover{color:#236e85;}
#blogPost article .content span {font-size: 12px; color: #121212;letter-spacing: 0.5px;}
#blogPost article .content span i {color: var(--color-secondary);}


.blog-details {position: relative; color: #2c2c2c;line-height: 1.6;font-size: inherit;}
.blog-details .article {padding: 0; margin: 0;overflow: hidden;}
.blog-details .post-img {position: relative;margin: 0 0 25px 0; background: rgba(10, 67, 84, 0.02);box-shadow: 0 2px 10px rgba(0,0,0,0.05);border-radius: 10px; overflow: hidden;z-index: 1;}
.blog-details .post-img img { width: 100%; border-radius: 10px; display: block;}
.blog-details .content {padding: 0 ;}
.blog-details .content p {margin-bottom: 20px;text-align: justify;}
.blog-details .content h1,
.blog-details .content h2,
.blog-details .content h3,
.blog-details .content h4,
.blog-details .content h5,
.blog-details .content h6 {font-family: "Merriweather", Georgia, serif;font-weight: 700; color: #1a1a1a;line-height: 1.4;margin: 1.8rem 0 1rem;}

.blog-details .content h1 { font-size: 2.2rem; border-bottom: 2px solid var(--accent-color, #236e85); padding-bottom: .4rem; }
.blog-details .content h2 { font-size: 1.8rem; border-left: 4px solid var(--accent-color, #236e85); padding-left: .5rem; }
.blog-details .content h3 { font-size: 22px; color: var(--accent-color, #236e85); margin-top: 30px; font-weight: bold; }
.blog-details .content h4 { font-size: 1.25rem; color: #2b5876; }
.blog-details .content h5 { font-size: 1.1rem; text-transform: uppercase; color: #333; }
.blog-details .content h6 { font-size: 1rem; font-weight: 600; color: #555; }

.blog-details .content blockquote {overflow: hidden;background-color: color-mix(in srgb, var(--default-color, #000), transparent 95%);padding: 60px 40px;position: relative;text-align: center;margin: 30px 0; border-radius: 8px;}
.blog-details .content blockquote p {color: var(--default-color, #0a4354);line-height: 1.6; margin-bottom: 0;font-style: italic; font-weight: 500; font-size: 22px;}
.blog-details .content blockquote::after { content: "";position: absolute;left: 0;top: 20px;bottom: 20px;width: 3px; background-color: var(--accent-color, #236e85); border-radius: 2px;}
.blog-details .content img,
.blog-details .content video,
.blog-details .content iframe {max-width: 100%;height: auto; border-radius: 8px;margin: 1.5rem 0;display: block;}
.blog-details .content figure {margin: 1.5rem 0;text-align: center;}
.blog-details .content figcaption {font-size: 0.9rem; color: #666; margin-top: 0.5rem;}

.blog-details .content ul,.blog-details .content ol {margin: 1rem 0 1.5rem 2rem;}
.blog-details .content ul li {list-style-type: disc; margin-bottom: 0.6rem;}
.blog-details .content ol li {list-style-type: decimal; margin-bottom: 0.6rem;}
.blog-details .content li::marker {color: var(--accent-color, #236e85);font-weight: bold;}

.blog-details .content a {color: var(--accent-color, #236e85); text-decoration: none; border-bottom: 1px dashed transparent; transition: all 0.2s ease-in-out;}
.blog-details .content a:hover {border-bottom-color: var(--accent-color, #236e85);color: #174c5c;}

.blog-details .content code {background: #f3f4f6; color: #e63946; padding: 0.2rem 0.4rem;border-radius: 4px;font-family: "Fira Code", monospace; font-size: 0.95rem;}
.blog-details .content pre {background: #1e1e1e; color: #dcdcdc; padding: 1rem; border-radius: 6px; overflow-x: auto; margin: 1.5rem 0;font-family: "Fira Code", monospace;font-size: 0.95rem;}

.blog-details .content table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0; border-radius: 6px; overflow: hidden;}
.blog-details .content table th,.blog-details .content table td {border: 1px solid #dcdcdc; padding: 0.8rem 1rem;  text-align: left;}
.blog-details .content table th { background: var(--accent-color, #236e85); color: #fff; font-weight: 600;}
.blog-details .content table tr:nth-child(even) { background: #f7f9fa;}

.blog-details .content hr { border: none; border-top: 1px solid #ddd; margin: 2rem 0;}

/* --- Responsive --- */
@media (max-width: 768px) {
  .blog-details .content { padding: 0 15px 30px; font-size: 15px; }
  .blog-details .content h1 { font-size: 1.8rem; }
  .blog-details .content h2 { font-size: 1.5rem; }
  .blog-details .content h3 { font-size: 1.3rem; }
  .blog-details .content blockquote { padding: 40px 20px; }
  .blog-details .content blockquote p { font-size: 18px; }
}










.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {padding: 10px 15px; font-size: 12px; border-top: 1px solid #eee;}
.blog-details .meta-bottom i {color: #236e85; display: inline;}
.blog-details .meta-bottom a {color: #236e85;transition: 0.3s;}
.blog-details .meta-bottom a:hover {color: rgb(255, 193, 7);}
.blog-details .meta-bottom .cats {list-style: none;display: inline; padding: 0 20px 0 0;font-size: 14px;}
.blog-details .meta-bottom .cats li {display: inline-block;}
.blog-details .meta-bottom .tags {list-style: none;  display: inline; padding: 0; font-size: 14px;}
.blog-details .meta-bottom .tags li {display: inline-block;}
.blog-details .meta-bottom .tags li+li::before {padding-right: 6px;color: var(--default-color); content: ",";}

.blog-details .meta-bottom .share {font-size: 16px;}
.blog-details .meta-bottom .share i {padding-left: 5px;}





 
.widgets-container {background-color: #f4f4f4; padding: 15px;margin: 0 0 25px 0;border-radius: 8px;}
.widget-title {color: #236e85;font-size: 16px; text-transform: uppercase;letter-spacing: 1px; font-weight: 900;padding: 0 0 10px 0;margin: 0 0 10px 0;border-bottom: 2px dotted #ddd;}
.widget-item {margin-bottom: 20px;}
.widget-item:last-child { border-bottom: none; margin-bottom: 0;}
.search-widget form {background: #236e85;border: 1px solid #174c5c;padding: 7px;position: relative;border-radius: 8px;transition: 0.3s;}
.search-widget form input[type=text] {border: 0;padding: 7px 10px;font-size: 14px;border-radius: 5px;width: calc(100% - 35px); background-color: #fff;}
.search-widget form input[type=text]:focus {outline: none;}
.search-widget form button {background: var(--accent-color);color: var(--contrast-color);position: absolute; top: 0; right: 0;  bottom: 0; border: 0; font-size: 18px; padding: 0px 11px; margin: -1px; transition: 0.3s; border-radius: 0 4px 4px 0; line-height: 0;}
.search-widget form button i {line-height: 1;display: inline-flex;align-items: center;justify-content: center;color: white;}
.search-widget form button:hover {background: color-mix(in srgb, var(--accent-color), transparent 20%);}
.search-widget form:is(:focus-within) {border-color: var(--accent-color);}
.categories-widget ul { list-style: none; padding: 0;margin: 0;}
.categories-widget ul li {padding-bottom: 5px;}
.categories-widget ul li:last-child { padding-bottom: 0;}
.categories-widget ul a { font-size: 15px; font-family: 'Source Sans 3';color: color-mix(in srgb, var(--default-color), transparent 20%);transition: 0.3s;}
.categories-widget ul a:hover {color: var(--accent-color);}
.categories-widget ul span {padding-left: 5px; color: color-mix(in srgb, var(--default-color), transparent 50%);font-size: 13px;}
.recent-posts-widget .post-item {display: flex; margin-bottom: 15px;}
.recent-posts-widget .post-item:last-child {margin-bottom: 0;}
.recent-posts-widget .post-item a {color:var(--color-default);}
.recent-posts-widget .post-item img {width: 80px;height: 60px;margin-right: 15px; border-radius: 8px;}
.recent-posts-widget .post-item h4 {font-size:  14px; font-weight: 500; margin-bottom: 5px;}
.recent-posts-widget .post-item h4 a {color: var(--default-color);transition: 0.3s;}
.recent-posts-widget .post-item h4 a:hover {color: var(--accent-color);}
.recent-posts-widget .post-item time { display: block; font-style: italic; font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 50%);}

.tags-widget {margin-bottom: -10px;}
.tags-widget ul { list-style: none; padding: 0; margin: 0;}
.tags-widget ul li {display: inline-block;}
.tags-widget ul a {font-size: 13px; padding: 4px 8px; margin: 0 2px 6px 0;color: #fff; background: #000;border-radius: 8px;display: inline-block; transition: 0.3s;}
.tags-widget ul a:hover {background: #236e85; color: #fff;}
.tags-widget ul a span {padding-left: 0px;font-size: 12px;}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  background-color: var(--surface-color);
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*----  Testimonials ----*/
.testimonials {position:relative;}
.testimonials .testimonial-item {box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);box-sizing: content-box; padding: 0;margin-bottom: 30px; position: relative; background: #ffffff; border-radius: 8px;border: 1px solid #fff;}
.testimonials .testimonial-item .text-blk.quotes { position: absolute; left: 20px; font-size: 80px; font-family: auto; line-height: 32px; top: 2px; font-weight: 900; color: rgba(0, 0, 0, .1);}
.testimonials .testimonial-item:hover { box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.2); border: 1px solid #ddd; transform: translateY(-2px);transition: all 0.3s ease;}
.testimonials .testimonial-item:hover .text-blk.quotes { color:#236E85; transform: scale(1.1); transition: all 0.3s ease;}
.testimonials .testimonial-item p {padding: 20px 25px 0;font-style: italic;margin: 15px auto;}
.testimonials .testimonial-item .footer {position: relative;padding:10px 15px;  margin: 0;background: #fafafa;border-top: 1px solid #efefef;}
.testimonials .testimonial-item .footer img{  width: 40px; height: 40px; background-color: #eee; border-radius: 50px;}
.testimonials .testimonial-item .letter{width: 42px;height: 42px;line-height: 42px; text-align: center; color: var(--color-primary); font-size: 17px; font-weight: bold; margin: 0; background: #fff; border-radius: 50%;border: 1px solid #e4e4e4;}
.testimonials .testimonial-item .name{color: var(--color-primary); font-size: 18px;font-weight: bold; margin: 0;}
.testimonials .testimonial-item .stars{margin:0;}
.testimonials .testimonial-item .stars i{color: #ffc107; margin: 0 1px;font-size: 14px;}
.testimonials .testimonial-item .footer button {position: absolute; right: 20px; top: -11px; font-size: 13px !important;padding: 2px 8px !important; background-color: #ffc107;  color: black; border: none;  padding: 0.3rem 1rem; font-size: 1rem; border-radius: 0.375rem; transition: background-color 0.3s ease, color 0.3s ease;}
.testimonials .testimonial-item .footer button:hover {background-color: var(--color-primary);color: white;}








/*----  Contact ----*/
.contact {position:relative;padding:0;}
.contact .card {position: relative;padding:20px;margin-bottom: 35px;border:1px solid #efefef;background-color: #efefef;transition: all 0.5s;border-radius: 10px;}
.contact .card:hover {color: #fff;border: 0px solid var(--color-primary);border:1px solid #efefef;background-color: var(--color-primary); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);}
.contact .card .icon{display: flex;}
.contact .card .icon i {position: absolute; top: -25px;  left: 20px;  width: 70px; height:70px; line-height: 65px; text-align: center; font-size: 2.2rem; color: var(--color-primary); background-color: #efefef; border-radius: 10px; border: 5px solid #fff; transition: all 0.5s;}
.contact .card:hover .icon i{color: #fff;background-color: var(--color-primary);}
.contact .card .icon h3 {color: var(--color-primary);padding: 0;font-size: 18px!important;font-weight: 700; margin: -3px 0 0 80px;}
.contact .card:hover .icon h3{color: #fff;}
.contact .card .card-body{padding: 0 5px !important;margin-top: 15px;}
.contact .card-text {color:#212121;font-size: 14px;}
.contact .card:hover .card-text, .contact .card:hover .card-text a {color: #fff;}
.map-responsive {position: relative; height: 100%; margin: 10pxl}
.map-responsive .back {
    position: absolute;
    bottom: -9px;
    right: -9px;
    width: 101%;
    height: 101%;
    background: rgba(255, 193, 7, 1);
    border-radius: 10px;
    z-index: 0;
}

.map-responsive iframe,
.map-responsive > * {width: 100%; height: 100%;border: 0;
    position: relative;
    z-index: 1;
    border-radius: 0 10px 10px 10px;
}





/*--- About Us ---*/
.sk-cards_about {position: relative; padding-top: 60px;background:#f4f4f4;}
.sk-cards_about .item{margin-bottom: 35px;height: -webkit-fill-available;}
.sk-cards_about .card {width: 100%;height: 100%;min-height: 140px;padding: 10px 15px 15px 15px;border-radius: 10px;cursor: pointer;transition: 0.5s;position: relative; text-align:center;background: #fff;border:2px solid #f4f4f4; border-top:5px solid #ccc; z-index: 1;}
.sk-cards_about .card:hover {border-top:5px solid #236e85;box-shadow: 0 0 35px rgba(0, 0, 0, 0.22);}
.sk-cards_about .card .img-wrapper { position: relative; display: block; margin: -50px auto 15px; z-index: 2;}
.sk-cards_about .card .img-wrapper img{width:70px; padding: 8px; background: #f4f4f4; border:5px solid #ccc; border-radius: 10px;}


/*--------------------------------------------------------------
# Our Services Section
--------------------------------------------------------------*/
.services {
  background:url(../imgs/breadcrumbs/breadcrumb-bg.webp) repeat center center #236e85;
}

.services .service-item {
    padding: 10px;
    background: #fff;
    text-align: center;
    height: 100%;
    border-radius: 10px;
	transition: 0.6s;
}

.services .service-item img{
	display:block;
	position:relative;
	width:100%;
	height:200px;
	border-radius:10px 10px 0 0;
	cursor:pointer;
}

.services .service-item:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


.services .service-item .title{
	position:relative;
	width:90%;
	padding:15px 0 0 0 ;
	margin:-20px auto 0 auto;
	background: #fff;
	border-radius:10px;
}

.services .service-item .title h3 {
  color: var(--color-default);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid #eeeeee;
  transition: 0.3s;
}

.services .service-item .image {
    display: block;
    width: 65px;
    position: relative;
    margin: 0px auto 25px;
    background: var(--color-primary);
    border-radius: 10px;
}

.services .service-item p {
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 0;
    padding: 0 15px 20px;
}

.services .service-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: var(--color-primary);
}

.services .service-item:hover .icon:before {
  background: #00b6a1;
}

.services .service-item:hover h3 {
  border-color: var(--color-primary);
}



.serviceQuote{
min-height:350px;
	padding:20px 0;
  background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),  url(../imgs/quuote-bg.webp);
  background-size: cover;
  background-position: top;
  position: relative; 
}
.serviceQuote .count{
  font-family: initial;
  font-size: 40px;
  font-weight: bold;
}
.serviceQuote  .counter-wrapper{position: relative;}	
.serviceQuote .counter-inner{position:relative; z-index:2;}
.serviceQuote .counter-inner h3{font-size:18px;}


.quoteFrom {
	position:relative;
	top:-200px;
	margin-bottom: -150px;
}
.quoteFrom .innerWrap {padding:0;background:white;border-radius:10px;}
.quoteFrom .innerWrap .message{padding:10px 25px;border-radius:10px 10px 0 0;}



.btn-get-started {
	font-family: var(--font-primary);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    display: inline-block;
    padding: 9px 15px;
    border-radius: 5px;
    transition: 0.3s;
    color: #111;
    background: #fff;
    border-color: rgba(0, 0, 0, 0.5);
    border: none;
    transition: all 0.3s ease-in-out;
}

.btn-get-started:hover {
	color: #000;
	background: #fdab21;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}







/*--------------------------------------------------------------
# Services Counter
--------------------------------------------------------------*/
.counter-wrap{background:url(../imgs/breadcrumbs/breadcrumb-bg.webp) repeat center center #000}
.counter-box {
    display: block;
    background: #ffffff;
    padding: 30px 25px;
    text-align: center;
	border-radius:8px;
}

.counter-box p {
    margin: 5px 0 0;
    padding: 0;
    color: var(--color-default);
    font-size: 16px;
    font-weight: 500
}

.counter-box i {
    font-size: 60px;
    margin: 0 0 15px;
    color: var(--color-default);
}

.counter {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #236e85;
    line-height: 28px
}

.counter-box.colored {
    background: #3acf87
}

.counter-box.colored p,
.counter-box.colored i,
.counter-box.colored .counter {
    color: var(--color-default);
}







/*---- Cookies Law ----*/
.cookies {position: fixed; bottom: 30px; left: -370px; max-width: 325px; width: 100%; background: #fff; border-radius: 8px; padding: 15px 25px 22px; transition: left 0.3s ease; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
.cookies.show {left: 20px;z-index: 10;}
.cookies header {display: flex;align-items: center;column-gap: 10px;}
.cookies header i {color: #fdab21;font-size: 36px;}
.cookies header h2 {color: #236E85;font-weight: 500;font-size: 20px;}
.cookies .data {margin-top: -5px;}
.cookies .data p {color: #333;font-size: 14px;}
.data p a {color: #236E85; text-decoration: none;}
.data p a:hover {text-decoration: underline;}
.cookies .buttons {margin-top: 14px; width: 100%; display: flex;align-items: center;justify-content: space-between;}
.buttons .button {border: none;color: #fff; padding: 6px 0; font-size: 14px;border-radius: 6px;background: #236E85; cursor: pointer; width: calc(100% / 2 - 10px); transition: all 0.2s ease;}
.buttons #acceptBtn:hover {background-color: #fdab21;}
#declineBtn {border: 1px solid red;background-color: #fff;color: #236E85;}
#declineBtn:hover {background-color: red;color: #fff;}

.tawk-min-container .tawk-button-circle.tawk-button-large {
    width: 50px!important;
    height: 50px!important;
}
/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius:10px;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  font-weight:700;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Client Logo Slider
--------------------------------------------------------------*/
.slick-slide {margin: 0px 20px;}
.slick-slide img {
   width: 100%;
    background: #eee;
    padding: 5px;
    border-radius: 10px;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}







/* Modal Subscribe */
.modal-login {color: #636363;width: 350px;}
.modal-login .modal-content {position:relative;padding: 130px 15px 20px;border-radius: 15px;border: none;background:url(../imgs/popup-bg.webp) no-repeat top center #ffffff;}
.modal-login .modal-header {border-bottom: none; position: relative; justify-content: center;}
.modal-login h4 {text-align: center;font-size: 22px; margin:5px;}
.modal-login .form-control:focus {border-color: #70c5c0;}
.modal-login .form-control, .modal-login .btn {
    border-radius: 6px; 
}
.modal-login .form-check-input {
  position: relative;
    top: -4px;
    right: 4px;
    margin-top: 0 !important;
}
.modal-login .btn-close {
position: absolute;
    top: -122px;
    right: -7px;
    width: 15px;
    height: 16px;
    line-height: 15px;
    color: #fff;
    font-size: 20px;
    background: red;
    border: none;
    border-radius: 0 27%;
    opacity: 1;
}   

.modal-login .modal-footer {
    background: #ecf0f1;
    border-color: #dee4e7;
    text-align: center;
    justify-content: center;
    margin: 0 -20px -20px;
    border-radius: 5px;
    font-size: 13px;
}

.modal-login .modal-footer a {
    color: #999;
}       

.modal-login .avatar {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -60px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: 9;
    background: #ffffff;
    padding: 12px 8px;
}

.modal-login .avatar img {
    width: 100%;
}

/* Animation for modal slide */
@keyframes slideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-login.modal-dialog {
    margin: 80px auto;
    animation: slideIn 0.6s ease-out;
}

.modal-login .btn, .modal-login .btn:active {
    color: #fff;
    border-radius: 4px;
    background: #236E85 !important;
    text-decoration: none;
    transition: all 0.4s;
    line-height: normal;
    border: none;
}

.modal-login .btn:hover, .modal-login .btn:focus {
    background: #45aba6 !important;
    outline: none;
}



/*---- Login - Register & Panel ----*/
.authentication {
  background-image: 
    linear-gradient(rgba(10, 67, 84, 0.1), rgba(10, 67, 84, 0.1)),
    url('../imgs/auth-bg.webp');
  background-size: cover;
  background-position: center;  
  width: 100vw;
  height:100vh!important;
  overflow-y: auto;
}

.authWrapper {position:relative;width:100%; min-height:300px; padding:4% 0 0 0;}
.authWrapper .authPage {position:relative;}


.authWrapper .authPage .app-header {
    min-height: 100px;
    padding: 1rem 0 0 0;
    position: relative;
    top: 0;
	background: url(../imgs/acc-bg.jpg);
    background-size: cover;
    background-position: center;
	border-bottom:10px solid #fff;
	border-radius:12px 12px 0 0;
    z-index: 1;
}
.authWrapper .authPage .app-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(10, 67, 84, 0.3), rgba(10, 67, 84, 0.3));
	border-radius:12px 12px 0 0;
    z-index: -1;
}
.authWrapper .authPage .app-header header {
	margin-bottom:10px;
}
.authWrapper .authPage .app-header header .avatar h2{
	width:70px;
	height:70px;
	line-height:75px;
	font-size:42px;
	text-align:center;	
	border-radius: 10px;
}

.authWrapper .authPage .app-header  header .avatar {
	position: relative;
    top: 0;
    left: 0;
	width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;    
    transition: all .2s ease-in-out;
}
.authWrapper .authPage .app-header header .avatar .image{
	width:70px;
	border-radius: 50px;
}
.authWrapper .authPage .app-header header .avatar span{
	position:absolute;
	top:0;
	right:-50px;
	padding:3px 5px 0;
	font-size:12px;
	letter-spacing:1px;
	border-radius:5px;
}


.authWrapper .authPage .app-header header .overley{
	position: absolute;
    right: 0;
    bottom: 35px;
}
.authWrapper .authPage header .overley h2 {
	position: relative;
    bottom: 15px;
    right: 25px;
    font-family: system-ui;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 3px;
    color: #2d7185;
}

	

.authWrapper .authPage .app-header header .post-meta{position: relative;
    top: 12px;
    left: 12px;
    color: white;}
.authWrapper .authPage .app-header header .post-meta .time{position:relative;top: -2px;}








.authWrapper .authPage header .sk-acountMenu {
    position: relative;
    background:  rgba(10, 67, 84, 0.2);
    border-radius: 0;
    padding: 5px 20px 0 20px;
    margin-top: 15px;
}

.authWrapper .authPage header .sk-acountMenu .menu-toggle {
    display: none;
    background: #fdab21;
    color: #fff;
    border: none;
    padding: 5px 8px;
    font-size: 18px;
    border-radius: 4px;
    position: absolute;
    right: 20px;
    top: -70px;
    z-index: 10;
}

.authWrapper .authPage header .sk-acountMenu .sk-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.authWrapper .authPage header .sk-acountMenu .sk-menu li {
    display: inline-block;
    height: 36px;
}

.authWrapper .authPage header .sk-acountMenu .sk-menu a {
    position: relative; /* Added this line */
    line-height: 38px;
    text-decoration: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    transition: background-color 0.3s ease;
    border-radius: 5px 5px 0 0;
}

.authWrapper .authPage header .sk-acountMenu .sk-menu a:hover,
.authWrapper .authPage header .sk-acountMenu .sk-menu a:active {
    color: #ffc107;
}

.authWrapper .authPage header .sk-acountMenu .sk-menu a.active {
    color: #236E85;
    background-color: #ffffff;
}

.authWrapper .authPage header .sk-acountMenu .sk-menu a.active::before {
    content: "";
    position: absolute;
    left: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: transparent; 
    border-radius: 0 0 10px 0;
    box-shadow: 0 10px 0 0 #ffffff;
}

.authWrapper .authPage header .sk-acountMenu .sk-menu a.active::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 0 0 0 10px;
    box-shadow: 0 10px 0 0 #ffffff;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
	.authWrapper .authPage header .overley h2 {display:none;}
    .authWrapper .authPage header .sk-acountMenu {
        padding-top: 0;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
.authWrapper .authPage header .sk-acountMenu .sk-menu a.active::before,.authWrapper .authPage header .sk-acountMenu .sk-menu a.active::after{display:none}
.authWrapper .authPage header .sk-acountMenu .menu-toggle { display: block; }

.authWrapper .authPage header .sk-acountMenu .sk-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        background: #f4f4f4;
        position: absolute;
        right: 20px;
        top: -22px;
        width: 200px;
        border-top: 3px solid #fdab21;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 0;
        z-index: 9;
    }

.authWrapper .authPage header .sk-acountMenu .sk-menu::before {
    content: '';
    position: absolute;
    top: -9px;
    right: 10px;
    border-bottom: 6px solid #fdab21;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}


.authWrapper .authPage header .sk-acountMenu .sk-menu.show { display: flex; }
.authWrapper .authPage header .sk-acountMenu .sk-menu li { width: 100%; height: 30px; text-align: left;  padding: 0px 12px;  }
.authWrapper .authPage header .sk-acountMenu .sk-menu a {display: block; height: 34px; width: 100%; padding: 0 10px;color:#121212;  }


}











.authPage img{
	width:150px;
}
.authPage .authbox{
	margin-top: 0px;
	border-radius: 0 0 12px 12px;
}
.authPage .authbox .togleEye {
	position: absolute;
    right: 10px;
    display: block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border: 0;
    background-color:transparent;
    border-radius: 0 0.25rem 0.25rem 0;
    border: 0;
	z-index:10;
}
.authPage .authbox .card-img-top {
  width: 60%;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.authPage .authbox .card {
  padding: 1.5em 0.5em 0.5em;
  text-align: center;
  border-radius: 1em;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border: 0;
}
.authPage .authbox .card-title {
  font-weight: bold;
  font-size: 1.5em;
}
.authPage .authbox .btn-primary {
  border-radius: 2em;
  padding: 0.5em 1.5em;
}


.authbox table {font-size: 13.5px;border-collapse: separate;border-spacing: 0 5px;border: 0;}
.authbox table thead th {background-color: #236e85 !important;color: #fff !important;}
.authbox table th,.authbox table td {vertical-align: middle; padding: 8px 12px !important; border: 0 solid #dee2e6; background-color: #efefef !important; border-radius:5px!important; white-space: nowrap;  overflow: hidden;text-overflow: ellipsis;}
.authbox table tbody tr:hover {background-color: #f1f1f1;}


  .authbox .table-responsive label {
	 font-size: 11px !important;
	 padding: 4px 8px;
	 margin-bottom: 3px;
	 background: #e4e4e4;
	 border-radius: 6px;
	}

.authbox .dataTables_info{text-align:left!important;font-size:12px;}


    .authbox .dataTables_filter input {
      border-radius: 6px;
      border: 1px solid #ced4da;
      padding: 2px 10px;
      margin-left: 0.5em;
    }

.authbox .dataTables_paginate {
  text-align: right !important;float: right;
}

.authbox .dataTables_paginate .paginate_button {
  font-size: 12px;
  border-radius: 6px;
  background-color: #ffffff;
  color: #007bff;
}
.authbox .dataTables_paginate .paginate_button .page-link{
	font-size:11px!important;
}

	
.progress-container {position: relative;width: 150px;height: 150px;margin: 0 auto 20px;}
.progress-ring {transform: rotate(-90deg);}
.progress-ring circle {fill: none; stroke-width: 12; r: 65; cx: 75; cy: 75;}
.progress-bg { stroke: #e6e6e6;}
.progress-bar {stroke: #4caf50; stroke-linecap: round;stroke-dasharray: 408; stroke-dashoffset: 408;transition: stroke-dashoffset 1s ease, stroke 0.5s;}
.progress-text {position: absolute;top: 50%;  left: 50%;transform: translate(-50%, -50%);font-size: 30px;font-weight: bold;color: #333;}
.editBtn {position:absolute;top:10px;right: 25px; padding: 3px 9px 3px 5px; font-size: 13px; background: #fff; border-radius: 10px;}
.editBtn a{color:#000;font-weight:700;}
.editBtn a:hover{color:#343434}
.editBtn img{width: 24px; margin-right: 3px;}



.authPage .authbox .modal-sm {--bs-modal-width: 350px!important;}
.authPage .authbox .modal-body{position: relative;display: flex;
    border-radius: 10px;
    border-top: 7px solid #bb2d3b !important;
    flex-direction: column;
    align-items: center;}
.authPage .authbox .modal-body .icon {width: 80px;
    height: 80px;
    line-height: 95px;
    position: absolute;
    top: -41px;
    margin: 0 auto;
    background: #bb2d3b;
    border-radius: 50%;}
.authPage .authbox .modal-body .icon img {width: 60px}






#wrapper {
	position: relative;
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper .toggleButton{
	position:absolute;
	right:0;
	top:0;
	
}
#wrapper.toggled {
    padding-left: 280px;
}

#sidebar-wrapper {
    z-index: 990;
    position: relative;
    left: 0;
    width: 0;
    height: 100%;
    margin-left: 0;
    overflow: hidden;
    border-radius: 1rem;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper { width: 280px;}
#page-content-wrapper {width: 100%; padding: 0; overflow:hidden;}
#wrapper.toggled #page-content-wrapper {position: relative;overflow:hidden;}
#page-content-wrapper input[type="text"], #page-content-wrapper input[type="email"] {
    position: relative;
    padding: 14px 13px 8px!important;
	margin-bottom: 20px;
	border-radius: 5px;
	border: 1px solid #ccc;
	z-index:1;
}

#page-content-wrapper input[type="text"]:focus {outline: none;}

#page-content-wrapper lable {
	position: relative;
    top: -8px;
    left: 8px;
    color: #236e85 !important;
    font-size: 12.5px;
	font-weight:500;	
    padding: 0 5px;
    display: block;
    z-index: 2;
    background: white;
}

#page-content-wrapper input[type="text"]:focus + label {color: #236e85; font-weight: bold; }

/* Sidebar Styles */

.sidebar-nav {
    position: relative;
    top: 0;
    width: 280px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
	text-indent: 7px;
    line-height: 40px;
	background: #ddd;
    border-bottom: 1px dotted #fff;
}

.sidebar-nav li a {
    display: block;
	font-size:14px;
    text-decoration: none;
    color: #000;
	border-left:4px solid #ddd;
}

.sidebar-nav li a:hover, .sidebar-nav li a.active {
    text-decoration: none;
    color: #236e85;
    background: rgba(255, 255, 255, 0.6);
    border-left: 4px solid #236e85;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}
@media(min-width:768px) {
	
    #wrapper {
		display: flex;
		position: relative;
        padding-left: 0;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 280px;

    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 0;
        position: relative;
        overflow:hidden;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    scrollbar-width: thin;
    scrollbar-color: #fdab21 transparent;
    }
}



/*---- Lightbox Image Effect ---*/

.sk-product-gallery{position:relative;}
.sk-products .zoom{position: absolute; right: 14px;bottom: 13px;width: 28px; height: 28px; line-height: 30px;font-size: 14px; color: #fff;  background:var(--color-primary);border-radius: 8px;z-index: 1;}
.lightbox { position: relative; cursor: pointer;z-index: 1;}
.img-popup { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(38, 40, 52, 0.9); text-align: center; display: none; z-index: 9999999999999; animation: pop-in; animation-duration: 0.5s; -webkit-animation: pop-in 0.5s; -moz-animation: pop-in 0.5s; -ms-animation: pop-in 0.5s;}
.img-popup img { position: absolute; top: 50%; max-width: 100%; max-height: 100vh; display: inline-block; padding: 50px; transform: translate(-50%, -50%); background: #fff; border-radius: 20px; border:5px solid #236e85;}
.img-popup::before {content: "Stitch Krafts"; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); letter-spacing: 25px; font-size: 1.2rem; text-transform:uppercase;color: rgba(0, 0, 0, 0.8); background: #f4f4f447;font-weight: bold;  pointer-events: none; z-index: 10;}
.close-lightbox {position: absolute; top: 40px; right: 29%; width: 30px; height: 30px; line-height: 28px; color: #236e85; font-size: 30px; border: 2px solid #236e85; border-radius: 24%; z-index: 99;  cursor: pointer;}
.lightboxfadeout{ animation: fadeout; animation-duration: 0.5s; -webkit-animation: fadeout 0.5s; -moz-animation: fadeout 0.5s; -ms-animation: fadeout 0.5s;}
@keyframes pop-in { 0% { opacity: 0;transform: scale(0.1); } 100% { opacity: 1; transform: scale(1); } }
@-webkit-keyframes pop-in { 0% { opacity: 0;-webkit-transform: scale(0.1); }  100% { opacity: 1; -webkit-transform: scale(1);} }
@-moz-keyframes pop-in { 0% {ppacity: 0;  -moz-transform: scale(0.1); }  100% {  opacity: 1; -moz-transform: scale(1);  }  }


@keyframes fadeout {
    100% {
        opacity: 0;
        transform: scale(0.1);
    }
    0% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes fadeout {
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes fadeout {
    100% {
        opacity: 0;
        -moz-transform: scale(0.1);
    }
    0% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}


/*--------------------------------------------------------------
# Embroidery Page Gallery
--------------------------------------------------------------*/
.slick-slide {margin: 0px 5px;}
.slick-slide img {width: 100%;}
.slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus{outline: none;}
.slick-list.dragging{cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after{
    display: table;
    content: '';
}
.slick-track:after{clear: both;}
.slick-loading .slick-track{visibility: hidden;}
.slick-slide{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide{ float: right;}
.slick-slide img{ display: block;}
.slick-slide.slick-loading img{ display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{ display: block;}
.slick-loading .slick-slide{ visibility: visible;}
.slick-vertical .slick-slide{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {display: none;}

/* Custom Arrow */
.slick-prev,
.slick-next {
    position:absolute;
    top:40%;
    background-color: var(--color-secondary); 
    border-radius: 10%; 
    width: 30px; 
    height: 50px; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; 
    color: #fff;
    font-size: 16px; 
    border:none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.slick-prev {left: 33px; }
.slick-next {right: 33px; }
.slick-prev:hover, .slick-next:hover {background-color: #2784a1; color: #fff; }
.slick-prev:before, .slick-next:before {font-family: 'slick'; font-size: 20px; line-height: 1; opacity: 1; color: #fff; }
.slick-dots li button:before {font-size: 12px;color: #999; }
.slick-dots li.slick-active button:before {color: #fff; }



.article-sideBar {
    background-color: #f4f4f4;
  padding: 25px 20px;
  margin: 0 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}




/***** Quotation Progress ******/
.hh-grayBox {
	background-color: #F8F8F8;
	padding: 20px;
}
.order-tracking{
text-align: center;
    width: 150px;
    position: relative;
    display: block;
}
.order-tracking .is-complete{
	display: block;
	position: relative;
	border-radius: 50%;
	height: 30px;
	width: 30px;
	border: 0px solid #AFAFAF;
	background-color: #f7be16;
	margin: 0 auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
	z-index: 2;
}
.order-tracking .is-complete:after {
	display: block;
	position: absolute;
	content: '';
	height: 14px;
	width: 7px;
	top: -2px;
	bottom: 0;
	left: 5px;
	margin: auto 0;
	border: 0px solid #AFAFAF;
	border-width: 0px 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
.order-tracking.completed .is-complete{
	border-color: #27aa80;
	border-width: 0px;
	background-color: #27aa80;
}
.order-tracking.completed .is-complete:after {
	border-color: #fff;
	border-width: 0px 3px 3px 0;
	width: 7px;
	left: 11px;
	opacity: 1;
}
.order-tracking p {
	color: #A4A4A4;
	font-size: 12px;
    margin-top: 8px;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 20px;
}
.order-tracking p span{font-size: 14px;}
.order-tracking.completed p{color: #000;}
.order-tracking::before {
	content: '';
	display: block;
	height: 3px;
	width: calc(100% - 90px);
	background-color: #f7be16;
	top: 13px;
	position: absolute;
	left: calc(-50% + 35px);
	z-index: 0;
}
.order-tracking:first-child:before{display: none;}
.order-tracking.completed:before{background-color: #27aa80;}




#sk-call-to-section {
padding-top: 37px;
padding-bottom: 40px;
font-family: initial;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
padding: 20px 0 20px 0;
float: left;
width: 100%;
text-align: center; 
}

.wrapper-full {
  position: relative;
width: 100%;
margin: 0 auto;
}
.sk-wrapper {
margin-bottom: 0;
text-align: left;
padding: 35px;
background-color: #141414;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
}
.sk-wrapper .details-wrapper {
float: left;
width: 70%;
}
.sk-wrapper .details-wrapper h2 {
font-weight: 600;
margin: 0 0 4px 0;
color: #FFF;
font-size: 30px;
}
.sk-wrapper .details-wrapper p {
font-size: 18px;
color: #FFF;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.sk-wrapper .yellow-sk-button {
padding: 17px 50px;
text-transform: uppercase;
background-color: #fdab21;
color: #000;
letter-spacing: 0.1em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none;
font-weight: 600;
display: inline-block;
white-space: pre;
margin: 31px 0 25px 0;  
/*float:right;*/
margin: 0;


padding: 17px 0;
width: 30%;
text-align: center;
}



.progress-container {
    text-align: center;
    width: 80%;
    max-width: 400px;
}

.status-message {
    font-size: 18px;
    margin-bottom: 20px;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #124b5c, #308eab);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.progress-percentage {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
}



.sk-mailBox {
	position:relative;
}
.sk-mailBox .media-object {
    width: 35px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.media-body {
	text-align:left;
}



#sk-lets-chats {
  display: flex;
    min-height: 200px;
    padding: 40px 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../imgs/quuote-bg.jpg);
    background-size: cover;
    background-position: bottom;
    position: relative;
    align-items: center;

}
#sk-lets-chats .innerWrap {
  padding:40px 30px;
  background:#fff;
  border-radius:10px;
}
#sk-lets-chats .innerWrap h2{
  color: #236e85;
  font-weight: 700;
}
#sk-lets-chats .innerWrap p{
  color: #444;
  font-weight:500;
  letter-spacing: 1px;
}
#sk-lets-chats .innerWrap img{
 width: 65px;
 height: auto;
 margin-right: 10px;
}

#sk-lets-chats .innerWrap .cta-button {
    padding: 17px 50px;  /* Adjust padding */
    text-transform: uppercase;
    background-color: #fdab21; /* Button background color */
    color: #111;  /* Text color */
    letter-spacing: 0.1em;
    border-radius: 3px;  /* Rounded corners */
    transition: all 0.2s ease-in-out;  /* Smooth transition effect */
    text-decoration: none;  /* Remove underline */
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;  /* Prevent text wrapping */
    width: auto;  /* Allow button width to adjust based on content */
    text-align: center;
    border-radius: 10px;
    border: 0;
}

/* Hover effect for the button */
#sk-lets-chats .innerWrap .cta-button:hover {
    background-color: #3686BE; /* Change background on hover */
    color: #fff;  /* Change text color on hover */
}

/* Custom Alert Styles */
.customAlert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: rgba(255, 0, 0, 0.9);
    color: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
    font-family: initial;
    font-size: 18px;
    display: none; /* Initially hidden */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}




.table-responsive {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #f4f4f4 transparent; /* Scrollbar color for Firefox */
}
.input-group label{
position: absolute;
    top: -8px;
    left: 8px;
    color: #236e85 !important;
    font-size: 12.5px;
    font-weight: 500;
    padding: 0 5px;
    display: block;
    z-index: 2;
    background: white;
}
.input-group .icon {
	position: absolute;
    right: 0;
    color: #236e85 !important;
    font-size: 12.5px;
    font-weight: 500;
    padding: 5px 8px 5px 0;
    display: block;
    z-index: 99999999;
}
.input-group .icon button{
	border:0;
	background:transparent;
}

.table-responsive label {
    width: fit-content;
    display: flex;
    font-size: 12px;
    align-content: center;
    align-items: center;
    margin-bottom: 15px;
}
.table-responsive .dataTables_filter{float: inline-end;}
@media screen and (max-width: 768px) {
    .table-responsive label {margin:0 auto 5px auto;}
    .table-responsive .dataTables_filter {
    float: inherit;
}
    
}







.sk-box {min-height: 205px;border-top: 5px solid #3c8fa9;}


.shadow-divider {
    border: 0;
    height: 1px;
    position: relative;
    background: transparent;
    margin: 20px 0;  
    border: 1px solid #fafafa;  
}

.shadow-divider::before,
.shadow-divider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(0, 0, 0, 0.1);
    filter: blur(9px);
}

.shadow-divider::before {
    top: -16px; /* Top shadow */
}

.shadow-divider::after {
    bottom: -16px; /* Bottom shadow */
}

/*** Google Search Results ***/
.gs-result .gs-title *, .gsc-cursor-page, .gs-spelling a {color: #236E85!important;}



/*** Scroll To Top ***/
#scroll{position:fixed;right:35px;bottom:85px;cursor:pointer;width:40px;height:40px;background-color:var(--color-primary);text-indent:-9999px;display:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;z-index: 1;}
#scroll span{position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-12px;height:0;width:0;border:8px solid #fff0;border-bottom-color:#fff}
#scroll:hover{background-color:var(--color-secondary);opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}


/*** Stitch Krafts ***/
.sk-hto {position:relative;padding:0;margin:0;}
.sk-hto .infoBox {position:relative;width:97%;min-height:100px;padding:12px 15px 13px 40px;margin:0 0 20px 15px;background:#f3f3f3;border:2px solid rgba(10, 67, 84, 0.3);border-radius:0 15px 15px 15px;z-index:1;transition: all 0.5s ease;}
.sk-hto:after {
  position: absolute;
  content: "";
  bottom: -5px;
  right: -3px;
  width: 140px;
  height: 100px;
  background: rgba(10, 67, 84, 0.3);
  border-radius: 15px;
  z-index: 0;
}
.faq-title {
    font-weight: bold;
    color: #2A5765;
}


.sk-hto .infoBox  h3{font-size: 18px; font-weight: 900; color: var(--color-primary); margin: 0;padding-bottom:5px;}
.sk-hto .infoBox  p{font-size: 15px; color: #434343; margin: 0; line-height: 20px;}

 .intl-tel-input,
.iti{
  width: 100%;
}


.sk-hto .ribbon {
  position: absolute;
  top: -6.1px;
  left: -11px;

}
.sk-hto .ribbon:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 27px  solid transparent;
  border-right: 28px  solid transparent;
  border-top: 10px solid #236e85;
  z-index: 3;

}
.sk-hto .ribbon span {
  position: relative;
  display: block;
  text-align: center;
  background: #236e85;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  line-height: 18px;
  padding: 6px 8px 3px;
  border-top-left-radius: 8px;
  width: 55px;
  z-index: 3;
}
.sk-hto .ribbon span:before, .sk-hto .ribbon span:after {
  position: absolute;
  content: "";
  z-index: 3;
}
.sk-hto .ribbon span:before {
 height: 6px;
 width: 6px;
 right: -6px;
 top: 0;
 background: #236e85;
 z-index: 3;
}
.sk-hto .ribbon span:after {
 height: 6px;
 width: 8px;
 right: -8px;
 top: 0;
 border-radius: 8px 8px 0 0;
 background: #17596d;
 z-index: 3;
}

/* ==== Backing and Border Options Start=== */

/* ===== Backing & Border Options Section (NO JS) ===== */

.bb-section{
  background:#f3f3f3;
  padding:70px 16px;
  font-family: Arial, Helvetica, sans-serif;
}

.bb-container{
  max-width:1200px;
  margin:0 auto;
}

.bb-title{
  text-align:center;
  font-size: 24px;
  font-weight: 900;
  color: #236E85;
  margin:0 0 18px;
}

/* ===== Radio inputs hidden ===== */
.bb-radio{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ===== Tabs wrapper ===== */
.bb-tabs{
  display:flex;
  justify-content:center;
  gap:18px;
  margin:0 auto 40px;
  flex-wrap:wrap;
}

/* Tabs are labels (clickable) */
.bb-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 30px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;

  border-radius:2px;
  border:0;
  background:#111;
  color:#fff;

  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}

.bb-tab:hover{
  transform:translateY(-1px);
  opacity:.92;
}

/* Active tab styles (pure CSS based on :checked) */
#bbtab-backing:checked ~ .bb-tabs label[for="bbtab-backing"],
#bbtab-border:checked  ~ .bb-tabs label[for="bbtab-border"]{
  background: #FDAB21;
  color:#fff;
}

/* ===== Content switching (NO JS) ===== */
.bb-content{
  display:none;
}

/* Show correct panel */
#bbtab-backing:checked ~ .bb-backing{
  display:block;
}

#bbtab-border:checked ~ .bb-border{
  display:block;
}

/* Optional smooth feel (fade) */
.bb-backing,
.bb-border{
  animation: bbFade .25s ease;
}

@keyframes bbFade{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}

/* ===== Grid ===== */
.bb-grid{
  display:grid;
  gap:26px;
}

.bb-grid-4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.bb-grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

/* ===== Card ===== */
.bb-card{
  background:#fff;
  border-radius:6px;
  padding:26px 22px;
  text-align:center;
  box-shadow:0 10px 20px rgba(0,0,0,0.06);
  min-height:360px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.bb-imgWrap{
  height:170px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
}

.bb-img{
  max-width:210px;
  max-height:170px;
  width:auto;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.bb-cardTitle {
    font-size: 16px;
    font-weight: 800;
    margin: 6px 0 10px;
    color: #236e85;
}

.bb-cardText{
  margin:0 auto;
  max-width:260px;
  font-size:14px;
  line-height:1.7;
  color:#666;
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .bb-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bb-grid-3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:600px){
  .bb-title{ font-size:28px; }
  .bb-grid-4{ grid-template-columns:1fr; }
  .bb-grid-3{ grid-template-columns:1fr; }
  .bb-card{ min-height:auto; }
}

/* ==== Backing and Border Options end === */ 

/*** Google Search Results ***/
.gsc-webResult.gsc-result {padding: 10px!important;margin-top: 10px!important;border: 1px solid rgba(10, 67, 84, 0.1)!important;background: rgba(10, 67, 84, 0.05)!important;border-radius: 8px!important;}
.gsc-control-cse, .gsc-control-cse .gsc-table-result {font-family: initial!important;font-size: 15px!important;}
.gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title * {font-size: 20px!important;}

/*** SweetAlert Swal ***/

.swal2-icon {margin: 1.25em auto 1em!important;}
.swal2-title {color: var(--color-default)!important;font-weight: 900!important;}
div:where(.swal2-container) div:where(.swal2-html-container) {padding: 5px 0 0 0!important;color: var(--color-primary);}
.swal2-styled {padding: 5px 20px!important;}
.swal2-popup {width: 25em!important; padding: 1em 1.5em 1.5em 1.5em!important;border-radius: 10px!important;border: 8px solid rgba(10, 67, 84, 0.1)!important;}
.swal2-styled.swal2-confirm {background-color: rgba(10, 67, 84, 1)!important;}

.tawk-min-container .tawk-button-circle.tawk-button-large {
    width: 45px!important;
    height: 45px!important;
}
    /* 1/5/2026 */
.testimonial-name {
    font-size: 16px !important;
    font-weight: 600;
    color: #333;
}


/* Section Styling */
.uk-section {
  padding: 60px 20px;
  background: #f9f9f9;
}

.container {
  max-width: 1200px;
  margin: auto;
}

/* Title */
.section-title {
  text-align: center;
  color: #236E85;
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 40px;
}


/* Grid */
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* Content */
.content-box h3 {
  color: #236E85;
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 600;
}

.content-box p {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 20px;
  text-align: justify;
}

/* Responsive */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 22px;
  }
}

.breadcrumbs-bottom-wrapper {
  padding-top: 70px;
}

.custom-heading {
  color: #236e85;
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.section-para {
  font-size: 1rem;
  margin-top: 15px;
  margin-bottom: -40px; 
  line-height: 1.7;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .custom-heading {
    font-size: 30px;
  }
  .section-para {
    font-size: 1rem;
    max-width: 700px;
  }
}

@media (max-width: 768px) {
.breadcrumbs-bottom-wrapper {
  padding-top: 30px;
}
  .custom-heading {
    font-size: 26px;
  }
  .section-para {
    font-size: 15px;
    max-width: 90%; 
    margin-bottom: -20px; 
  }
}

@media (max-width: 480px) {
  .custom-heading {
    font-size: 22px;
  }
  .section-para {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: -10px;
  }
}