@charset "utf-8";
/* Start Main Custom CSS Document */
/*========================================================================

	Author: Approval Pro © 2025 ApprovalPro - All Rights Reserved.

========================================================================*/

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

	Table of contents
	
	01. Common
	02. Header
	03. Slider
	04. Feature area
	05. Counter area
	06. Services
	07. Testimonials
	08. Team
	09. Call to action
	10. Blog
	11. Footer
	12. Inner page title (lINE 1430)
	13. Portfolio
	14. Contact form
	15. Pricing
	16. Terms Accordian
	17. Santa hat for the Home link
		
----------------------------------*/

/* Theme Font Use */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* font-family: 'Montserrat', sans-serif; */



/* ===================================
	01. Common
=================================== */
::selection {
	background-color: #00bcd4;
	color: #fff;
}
::-moz-selection {
 background-color: #00bcd4;
 color: #fff;
}
img {
	max-width: 100%;
}
body {
	font-size: 12px;
	font-family: 'Montserrat', sans-serif;
	color: #c5c5c5;
	letter-spacing: 0.5px;
}
.theme-bg-light {
	background-color: #1D4DDC;
}
p {
	line-height: 24px;
	font-size: 14px;
	color: #6c757d;
	font-family: 'Montserrat', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	color: #202020;
	padding: 0px;
	line-height: 1.4;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
}
h1 {
	font-size: 60px;
	font-weight: 700;
}
h2 {
	font-size: 36px;
	font-weight: 700;
}
h3 {
	font-size: 26px;
	font-weight: 700;
}
h4 {
	font-size: 24px;
	font-weight: 700;
}
h5 {
	font-size: 18px;
	font-weight: 700;
}
h6 {
	font-size: 16px;
	font-weight: 700;
}
ul, ol, li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
a {
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	text-decoration: none;
}
/* --- Top Scroll --- */
.scroll-top {
	display: none;
	position: fixed;
	bottom: 2px;
	text-align: center;
	right: 2%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #fff;
	background-color: #00bcd4;
	text-decoration: none;
	border-radius: 100%;
	z-index: 9999;
}
.scroll-top:hover {
	color: #fff !important;
	text-decoration: none;
	background-color: #018fa2;
}
/* --- Buttons --- */
.btn-style-1 {
	display: inline-block;
      padding: 15px 30px;
      background-color: #003479;  /* Navy */
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      text-decoration: none;
      border-radius: 8px;
      margin-top: 30px;
      transition: background-color 0.3s ease;
}
.btn-style-1:hover {
	background-color: #00bcd4;  /* Teal */
	color: #fff;
	text-decoration: none;
}
.btn-style-2 {
	  display: inline-block;
      padding: 15px 30px;
      background-color: #00bcd4;  /* Teal */
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      text-decoration: none;
      border-radius: 8px;
      margin-top: 30px;
      transition: background-color 0.3s ease;
}
.btn-style-2:hover {
	background-color: #003479; /* Navy */
	color: #fff;
	text-decoration: none;
}

.btn-style-3 {
	  display: inline-block;
      padding: 15px 30px;
      background-color: #343a40;  /* Dark Grey */
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      text-decoration: none;
      border-radius: 8px;
      margin-top: 30px;
      transition: background-color 0.3s ease;
}
.btn-style-3:hover {
	background-color: #e9ecef; /* Light Grey */
	color: #fff;
	text-decoration: none;
}

 /* Demo Button */
    .btn-demo {
      display: inline-block;
      padding: 15px 30px;
      background-color: #003479;  /* Navy */
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      text-decoration: none;
      border-radius: 8px;
      margin-top: 30px;
      transition: background-color 0.3s ease;
    }

    .btn-demo:hover {
      background-color: #00bcd4; /* Teal */
	 color: #fff;
	 text-decoration: none;
    }
	
	 /* Back Button */
    .btn-back {
      display: inline-block;
      background-color: #00bcd4;  /* Navy */
      color: #fff;
	  text-decoration: none;
      transition: background-color 0.3s ease;
    }

    .btn-back:hover {
      background-color: #003479; /* Teal */
	 color: #fff;
	 text-decoration: none;
    }
	
	/* Grey out all disabled .btn-primary buttons */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #6c757d !important;  /* Bootstrap gray */
    border-color: #6c757d !important;
    color: #fff !important;                /* Optional: white text */
    opacity: 1 !important;                 /* Remove faded look if you like */
    cursor: not-allowed;
}
/* --- Loading --- */
#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 100%;
	text-align: center;
	height: 100%;
	vertical-align: middle;
	height: 100%;
	overflow: visible;
	background-color: #fff;
}
#preloader .spinner-grow {
	top: 50%;
	position: relative;
}
/* --- section title --- */
.section-title h2 {
	font-weight: 600;
	font-size: 34px;
	text-transform: uppercase;
	position: relative;
	color: #333;
}
.section-title h2 span {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 45px;
	display: inline-block;
}
.section-title h2 span:after {
	position: absolute;
	content: "";
	width: 30px;
	height: 1px;
	left: 0px;
	right: 0px;
	margin: auto;
	bottom: 0;
	background-color: #00bcd4;
}
.section-title h2 span:before {
	position: absolute;
	content: "";
	width: 50px;
	height: 1px;
	left: 0px;
	right: 0px;
	margin: auto;
	bottom: 3px;
	background-color: #00bcd4;
}
/* ===================================
	02. Header
=================================== */
.header {
	height: 100% !important;
	z-index: 999;
}
.header .navbar-brand {
	padding: 0px;
	margin: 0px;
}
.navbar-brand img {
    max-width: 250px;   /* desktop width */
    max-height: 90px;   /* desktop height */
    width: auto;
    height: auto;
}
.header .navbar {
	padding: 0px;
	border-radius: 4px;
}
.header-lover {
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.header-lover:after {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 35%;
	height: 100%;
	z-index: -1;
	content: "";
	 background: linear-gradient(135deg, #003479, #00bcd4);
	 /* an image goes here */
}
.header-lover .navbar .nav-item .nav-link {
	font-size: 12px;
	color: #333;
	position: relative;
	font-weight: 600;
	padding: 18px 14px;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.header-lover .navbar .nav-item .nav-link:hover, .header-lover .navbar .nav-item.active a {
	color: #00bcd4;
}
.header-lover .navbar .nav-item.active .dropdown-menu .dropdown-item {
	color: #212529;
}
.header-lover .navbar .nav-item.active .dropdown-menu .dropdown-item:hover {
	color: #fff;
}
.header-lover .navbar .nav-item:last-child .nav-link {
	padding-right: 0px;
}
.header .navbar-toggler span {
	background: #2D2E33;
}
.header .dropdown-menu {
	margin: 0px;
	padding: 0px;
	border-top: 3px solid #00bcd4;
	border-radius: 0px;
}
.header .dropdown-menu .dropdown-item {
	border-bottom: 1px solid #dedede;
	padding: 12px 12px 12px 32px;
	position: relative;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.header .dropdown-menu .dropdown-item:last-child {
	border-bottom: 0px;
}
.header .dropdown-menu .dropdown-item:hover {
	background-color: #00bcd4;
	color: #fff;
}
.header .dropdown-menu .dropdown-item:hover:before {
	background-color: #fff;
}
.header .dropdown-menu .dropdown-item:before {
	position: absolute;
	content: '';
	left: 15px;
	background-color: #999;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translateY(-50%);
}
.header .nav-pills .nav-link.active, .header .nav-pills .show > .nav-link {
	background-color: transparent;
}
/* Navbar Toogle */
.navbar-toggler {
	border: none;
	padding: 10px 6px;
	background-color: #f5f5f5;
	outline: none !important;
}
.navbar-toggler span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
}
.navbar-toggler span + span {
	margin-top: 4px;
	width: 18px;
}
.navbar-toggler span + span + span {
	width: 10px;
}
/* sticky */
.is-sticky {
	z-index: 999;
}
.is-sticky .header-lover {
	z-index: 999 !important;
	background-color: #333;
}
.is-sticky .header-lover .navbar .nav-item .nav-link {
	color: #fff;
}
.is-sticky .header-lover .navbar .nav-item.active .nav-link {
	color: #00bcd4;
}
.is-sticky .nav-pills .nav-link.active, .is-sticky .nav-pills .show > .nav-link {
	color: #fff !important;
}
/* ===================================
	03. Slider
=================================== */
.slider h2 {
	font-size: 40px;
	color: #003479;
	margin-bottom: 10px;
	font-weight: 600;
	text-decoration: none !important;
}
.slider {
    position: relative;
    overflow: hidden;
}
.slider .carousel-caption {
    position: absolute; /* required for z-index to work */
    top: 50%;
    left: 0;
    right: 0;
    bottom: auto;
    transform: translateY(-50%);
    padding: 0;
    z-index: 3; /* above overlay */
    text-align: center;
    color: #fff;
}
.slider .carousel-caption .white-box {
	background-color: rgba(255,255,255,0.7);
	margin: auto;
	color: #333;
	position: relative;
	border-radius: 6px;
	padding: 20px 20px;
	border: 2px solid #00bcd4;
}
.white-box p {
  color: #202020;        /* Sets text color */
  font-size: 16px;       /* Adjust size for readability */
  line-height: 1.6;      /* Improves spacing between lines */
  margin-top: 10px;      /* Adds space above paragraph */
  margin-bottom: 0;      /* Keeps spacing consistent if more content follows */
}
/* reset visual link styles but don't override color so inline color:... takes effect */
.slider .white-box a#direct-link {
  display: block;            /* ensures it drops to a new line */
  color: #00bcd4;            /* lets inline style color take effect */
  text-decoration: underline;     /* remove underline */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-style: normal;
  font-size:18px;
  outline: none;
  cursor: pointer;
}
.slider .carousel-caption p a {
	border-radius: 4px;
	background-color: #00bcd4;
	border: 0px;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
	padding: 8px 24px;
}
.slider .carousel-item:after {
	position: absolute;
	content: "";
	background-color: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.slider .carousel-item {
    height: 500px; /* set your desired height */
}
/* Default desktop */
.slider .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures the image covers the area without distortion */
}
/* ===================================
	04. Feature area
=================================== */
.feature-box {
	background-color: rgba(255,255,255,1);
	position: relative;
	border-radius: 6px;
	padding: 20px 20px;
	text-align: center;
	border: 2px solid rgba(0,0,0,0.1);
	z-index: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.feature-box:after {
	width: 40px;
	height: 40px;
	content: "";
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0px;
	margin: auto;
	background-color: #00bcd4;
	transform: translateY(-50%);
	border-radius: 100%;
	opacity: 0.1;
	z-index: -1;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.feature-box:hover:after {
	width: 190px;
	height: 190px;
}
.feature-box:hover {
	border: 2px solid #00bcd4;
}
.feature-box .icon {
	color: #333;
	margin-bottom: 10px;
	font-size: 35px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.feature-box:hover .icon {
	color: #00bcd4;
}
.feature-box h4 {
	margin-bottom: 15px;
}

/* Feature List - Custom Checkmarks */
ul.feature-list {
    list-style: none;       /* remove bullets */
    padding-left: 0;
    margin-left: 0;
}

ul.feature-list li {
    display: flex;          /* flex container for checkmark + text */
    align-items: flex-start; 
    gap: 10px;              /* space between tick and text */
    margin-bottom: 8px;     /* spacing between list items */
    font-size: 14px;
    line-height: 1.4;
    color: #495057;
}

ul.feature-list li::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;                    
    content: "\f00c";                    /* checkmark */
    color: #00bcd4;                      
    font-size: 18px;                     
    flex-shrink: 0;                      
    margin-top: 2px;                     /* aligns tick with first line */
}

.feature-text {
    display: flex;
    flex-direction: column;  /* allows wrapped text to stay under the checkmark */
}

.feature-text strong {
    display: inline;         /* keeps bold heading inline with first line of text */
}

/* ===================================
	05. Counter area
=================================== */
.single-counter-box {
	position: relative;
	text-align: center;
}
.single-counter-box .icon-wrap {
	width: 90px;
	height: 90px;
	text-align: center;
	line-height: 90px;
	margin: auto auto 20px auto;
	color: #fff;
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	background-color: #00bcd4;
	font-size: 24px;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.single-counter-box .text-wrap .counter-info-text span {
	color: #202020;
	font-weight: 600;
	font-size: 50px;
	line-height: 50px;
	margin-bottom: 10px;
	display: inline-block;
}
.single-counter-box .text-wrap h4 {
	color: #6c757d;
	font-weight: 400;
	font-size: 16px;
	white-space: nowrap;
}
/* ===================================
	06. Services
=================================== */
.services-row > .col {
  display: flex;
  align-items: stretch; /* ensures the col takes full height within the row */
}

.services-item {
	flex: 1 1 auto;              /* grow to fill the column */
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-start; /* content stacks top -> bottom */
	background-color: rgba(255,255,255,1);
	position: relative;
	border-radius: 6px;
	padding: 20px 20px;
	border: 2px solid rgba(0,0,0,0.1);
	z-index: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.services-item .team-info {
  margin-top: auto; /* pushes the team-info down so cards align visually */
}
/* Optional: make icons/links align consistently */
.services-item > a {
  align-self: flex-end;  /* keeps the caret link in the same position */
  margin-bottom: 8px;
}
.services-item .icon-box {
	color: #00bcd4;
	margin-bottom: 20px;
	line-height: 20px;
	font-size: 40px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.services-item h4 {
	margin-bottom: 20px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.services-item p {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.services-item a {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-block;
	width: 40px;
	height: 40px;
	font-size: 16px;
	text-align: center;
	line-height: 40px;
	background-color: #f5f5f5;
	color: #202020;
	border-radius: 4px;
	box-shadow: 0 8px 20px hsla(0, 0%, 0%, 0.13);
}
.services-item:hover {
	background-color: #00bcd4;
	border: 2px solid #00bcd4;
}
.services-item:hover .icon-box, .services-item:hover h4, .services-item:hover p {
	color: #fff;
}
/* service link sidebar */
.service-link {
	background-color: #00bcd4;
	border-radius: 6px;
	padding: 30px;
	margin-bottom: 0px;
}
.service-link li {
	border-bottom: 1px solid rgba(255,255,255,0.2);
	margin-bottom: 12px;
	padding-bottom: 12px;
}
.service-link li a {
	text-decoration: none;
	color: #fff;
	padding-left: 16px;
	font-size: 14px;
	display: inline-block;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.service-link li:last-child {
	border-bottom: 0px;
	margin-bottom: 0px;
}
.service-link li:last-child {
	padding-bottom: 0px;
}
.service-link li a:hover {
	color: #333;
}
.service-link li a:before {
	display: inline-block;
	width: 0;
	height: 0;
	left: 0px;
	top: 50%;
	position: absolute;
	margin-left: 0;
	content: "";
	border-top: .3em solid transparent;
	border-bottom: .3em solid transparent;
	border-right: 0;
	border-left: .3em solid;
	transform: translateY(-50%);
}
/* download brochure */
.download-brochure a {
	background-color: #00bcd4;
	text-decoration: none;
	border-radius: 6px;
	display: inline-block;
	overflow: hidden;
	color: #fff;
	width: 100%;
	font-size: 14px;
}
.download-brochure a i {
	background-color: #018fa2;
	padding: 20px 16px;
	margin-right: 10px;
}
/* service contant img */
.service-contant-img img {
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	padding: 6px;
}
/* blockquote */
.service-detail-contant blockquote {
	border: 0px;
	background-color: #202020;
	padding: 30px;
	border-radius: 6px;
	margin-bottom: 0px;
}
.service-detail-contant blockquote p {
	color: #fff;
	font-style: italic;
	font-size: 16px;
	line-height: 28px;
}
.service-detail-contant blockquote .blockquote-footer {
	margin-top: 10px;
	color: #00bcd4;
	font-size: 12px;
}
/* ===================================
	07. Testimonials
=================================== */
.testimonial-area {
	/*background-image: url(../img/bg/testimonial-bg.jpg);*/
	background-size: cover;
	background-position: center top;
	position: relative;
}
.testimonial-area:after {
	position: absolute;
	content: "";
	/*background-color: rgba(0,0,0,0.7);*/
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}
.testimonial-item p {
	text-align: center;
	color: #6c757d;
	font-style: italic;
	padding-top: 35px;
	margin-bottom: 0px;
	border-top: 2px solid rgba(255,255,255,0.2);
}
.testimonial-item .position {
	color: #00bcd4;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	padding-bottom: 6px;
}
.testimonial-item .testimonial-client-img {
	color: #fff;
	border-radius: 50px;
	padding: 0px;
	height: 100px;
	width: 100px;
	margin: 35px auto auto auto;
	display: inline-block;
}
.testimonial-item .testimonial-client-img img {
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 6px;
}
.testimonial-item .testimonial-line {
	width: 100%;
	text-align: center;
	position: relative;
}
.testimonial-item .testimonial-line:after {
	background-color: rgba(255,255,255,0.2);
	content: "";
	display: block;
	height: 2px;
	left: 0;
	margin-top: 17px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	z-index: -1;
}
.testimonial-item .testimonial-client {
	width: 100%;
	margin: 10px 0 0 0px;
}
.testimonial-item .testimonial-client h6 {
	margin-bottom: 0px;
	color: #666;
	text-transform: uppercase;
}
.testimonial-item .testimonial-client p {
	font-size: 13px;
	font-weight: 500;
	color: #6c757d;
	margin-bottom: 0px;
}
.testimonial-item .testimonial-info {
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}
.testimonial-carousel .owl-nav button {
	width: 40px;
	height: 40px;
	font-size: 16px;
	text-align: center;
	color: #fff !important;
	border-radius: 4px;
	margin: 15px 4px 0 4px !important;
	background-color: #6c757d !important;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.testimonial-carousel .owl-nav button:hover {
	background-color: #00bcd4 !important;
	color: #fff !important;
}
/* ===================================
	08. Team
=================================== */
.team-item {
	position: relative;
	border-radius: 6px;
	border: 2px solid rgba(0,0,0,0.1);
	overflow: hidden;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.team-item:hover {
	border: 2px solid #00bcd4;
}
.team-item .team-info {
	padding: 10px 50px 10px 15px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	border-radius: 0px 6px 6px 0px;
	display: inline-block;
	background-color: #00bcd4;
	clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.team-item:hover .team-info {
	background-color: #003479;
}
.team-item .team-info h5 a {
	color: #fff;
	font-size: 16px;
	display: inline-block;
	margin-bottom: 4px;
	text-transform: uppercase;
}
.team-item .team-info h6 {
	color: #fff;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
}
.team-social {
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: #00bcd4;
}
.team-social li a {
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	background-color: #00bcd4;
	display: inline-block;
	font-size: 14px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.team-social li:last-child a {
	border-bottom: 0px;
}
.team-social li a:hover {
	background-color: #018fa2;
}
/* ===================================
	09. Call to action
=================================== */
.call-to-action-area {
/*	background-image: url(../img/bg/call-to-action-bg.jpg);
*/	background-size: cover;
	background-position: center top;
	position: relative;
	text-align: center;
	z-index: 0;
}
.call-to-action-area:after {
	position: absolute;
	content: "";
	background-color: #202020;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: -1;
}
.cta-content h3 {
	font-size: 18px;
	color: #00bcd4;
	font-weight: 400;
	margin-bottom: 20px;
}
.call-to-action-area h2 {
	color: #fff;
	font-weight: 700;
	font-size: 40px;
	line-height: 44px;
	margin-bottom: 20px;
}
.call-to-action-area h2 a {
	color: #fff;
	text-decoration: none;
}
.call-to-action-area p {
	color: #fff;
	line-height: 28px;
}
.video-popup {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
	line-height: 80px;
	color: #fff;
	font-size: 24px;
	margin-bottom: 30px;
	border-radius: 100%;
	background-color: #00bcd4;
}
.video-popup:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: #00bcd4;
	border-radius: 100%;
	top: 0;
	animation-fill-mode: both;
	animation: witr_squares 1.5s ease-in-out infinite;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}
.video-popup:after {
	position: absolute;
	content: '';
	width: 90px;
	height: 90px;
	border: 2px solid #00bcd4;
	border-radius: 100%;
	top: -5px;
	left: -5px;
	right: 0;
	bottom: 0;
	z-index: 0;
}
.video-popup i {
	z-index: 2;
	position: relative;
}
.video-popup:hover {
	color: #fff;
}
/* witr_squares_ */
@keyframes witr_squares {
 0% {
transform:scale(1);
opacity:0
}
 20% {
transform:scale(1.24);
opacity:1
}
 100% {
transform:scale(2.1);
opacity:0
}
}
/* ===================================
	10. Blog
=================================== */
.blog-item {
	position: relative;
	border-radius: 6px;
	border: 2px solid rgba(0,0,0,0.1);
	overflow: hidden;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.blog-item:hover {
	border: 2px solid #00bcd4;
}
.blog-item .blog-content-area {
	padding: 20px;
}
.blog-item .blog-meta {
	margin-bottom: 10px;
}
.blog-item .blog-meta li {
	position: relative;
	font-size: 12px;
	color: #202020;
	margin-right: 16px !important;
}
.blog-item .blog-meta li a {
	color: #202020;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.blog-item .blog-meta li a:hover {
	color: #00bcd4;
}
.blog-item .blog-meta li:after {
	position: absolute;
	content: "/";
	top: 50%;
	font-size: 10px;
	right: -12px;
	transform: translateY(-50%);
}
.blog-item .blog-meta li:last-child {
	margin-right: 0px !important;
}
.blog-item .blog-meta li:last-child:after {
	display: none;
}
.blog-item h4 {
	line-height: 24px;
	margin-bottom: 10px;
}
.blog-item h4 a {
	color: #202020;
	font-size: 18px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.blog-item h4 a:hover {
	color: #00bcd4;
}
.blog-item .blog-thumb {
	position: relative;
}
.blog-item .blog-thumb:after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	background-color: rgba(0,0,0,0.3);
	top: 0px;
	opacity: 0;
	left: 0px;
	right: 0px;
	margin: auto;
	z-index: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.blog-item:hover .blog-thumb:after {
	width: 100%;
	height: 100%;
	opacity: 1;
}
.blog-item .blog-thumb a {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-block;
	width: 40px;
	height: 40px;
	font-size: 16px;
	text-align: center;
	line-height: 40px;
	background-color: #f5f5f5;
	color: #202020;
	border-radius: 4px;
	box-shadow: 0 8px 20px hsla(0, 0%, 0%, 0.13);
	z-index: 1;
}
/* singal post img */
.singal-blog-post {
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	overflow: hidden;
}
/* blog meta */
.singal-blog-post .singal-blog-meta {
	margin-bottom: 10px;
}
.singal-blog-post .singal-blog-meta li {
	position: relative;
	font-size: 12px;
	color: #202020;
	padding-bottom: 0px;
	margin-right: 16px !important;
}
.singal-blog-post .singal-blog-meta li a {
	color: #202020;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.singal-blog-post .singal-blog-meta li a:hover {
	color: #00bcd4;
}
.singal-blog-post .singal-blog-meta li:after {
	position: absolute;
	content: "/";
	top: 50%;
	font-size: 10px;
	right: -12px;
	transform: translateY(-50%);
}
.singal-blog-post .singal-blog-meta li:last-child {
	margin-right: 0px !important;
}
.singal-blog-post .singal-blog-meta li:last-child:after {
	display: none;
}
/* blockquote */
.singal-blog-post blockquote {
	border: 0px;
	padding: 10px 30px;
	border-left: 2px solid #00bcd4;
	margin-bottom: 20px;
}
.singal-blog-post blockquote p {
	color: #333;
	font-style: italic;
	font-size: 16px;
	line-height: 28px;
}
.singal-blog-post blockquote .blockquote-footer {
	margin-top: 10px;
	color: #00bcd4;
	font-size: 12px;
}
.singal-blog-post ul li i {
	color: #00bcd4;
	padding-right: 8px;
}
.singal-blog-post ul li {
	color: #6c757d;
	font-size: 14px;
	padding-bottom: 14px;
}
.singal-blog-post ul li:last-child {
	padding-bottom: 0px;
}
/* social block */
.social-block {
	border-top: 1px solid rgba(0,0,0,0.1);
	padding: 20px 0 0px 0;
}
.singal-blog-post .tags-post a {
	font-size: 12px;
	color: #6c757d;
	text-decoration: none;
	padding: 4px 12px;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.singal-blog-post .tags-post a:after {
	position: absolute;
	content: "/";
	top: 50%;
	font-size: 10px;
	transform: translateY(-50%);
	right: -2px;
}
.singal-blog-post .tags-post a:first-child {
	padding-left: 0px;
}
.singal-blog-post .tags-post a:last-child {
	padding-right: 0px;
}
.singal-blog-post .tags-post a:last-child:after {
	display: none;
}
.singal-blog-post .tags-post a:hover {
	color: #00bcd4;
}
.singal-blog-post .share-social a {
	font-size: 12px;
	background-color: #00BCD4;
	color: #fff;
	text-decoration: none;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	display: inline-block;
	border-radius: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.singal-blog-post .share-social a:hover {
	background-color: #003479;
}
/* comments box */
.comments-box {
	width: 100%;
	padding-bottom: 30px;
	display: inline-block;
	margin-bottom: 30px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.comments-box:last-child {
	padding-bottom: 0px;
	margin-bottom: 0px;
	border-bottom: 0px;
}
.comments-box .img-wrapper {
	float: left;
	width: 100px;
}
.comments-box .img-wrapper img {
	border: 3px solid #fff;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.comments-box .text-wrapper {
	float: left;
	width: calc(100% - 100px);
	padding-left: 30px;
}
.author-detail {
	margin-bottom: 10px;
}
.author-detail .author-name {
	font-size: 18px;
	color: #00bcd4;
}
.author-detail .publish-date {
	font-size: 12px;
	margin-left: 8px;
	color: #999;
}
.author-content a {
	color: #00bcd4;
	font-size: 12px;
	text-transform: uppercase;
}
.author-content a i {
	color: #00bcd4;
	font-size: 14px;
	margin-left: 5px;
}
.comments-box:hover .img-wrapper img {
	border: 3px solid #00bcd4;
}
/* comments form */
.comments-form input {
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	font-size: 14px;
	height: 50px;
}
.comments-form textarea {
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	font-size: 14px;
}
.comments-form .form-control:focus {
	box-shadow: none;
	border: 2px solid #00bcd4;
}
/* ===================================
	11. Footer
=================================== */
.footer {
	background-color: #202020;
}
.footer-about p {
  color: #f8f9fa;
}
.footer-about {
	text-align: center;
}
/* footer social */
.footer-social a {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 100%;
	color: #fff;
	background-color: #00BCD4;
	display: inline-block;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.footer-social a:hover {
	background-color: #003479;
}
/* footer contact */
.footer-contact {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 30px;
	margin-top: 30px;
	margin-bottom: 15px;
}
.footer-contact li {
	margin: 0px 30px 0px 0px !important;
}
.footer-contact li:last-child {
	margin: 0px 0px 0px 0px !important;
}
.footer-contact li, .footer-contact li a {
	color: #00bcd4;
	font-size: 14px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.footer-contact li {
	padding-bottom: 15px;
}
.footer-contact li i {
	padding-right: 6px;
}
.footer-contact li a:hover {
	color: #f8f9fa;
}
/* footer bottom */
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 30px;
	padding-bottom: 20px;
	background-color: #181818;
}
/* footer link */
.footer-link li {
	margin: 0px 20px 0px 0px !important;
}
.footer-link li:last-child {
	margin: 0px 0px 0px 0px !important;
}
.footer-link li a {
	color: #00bcd4;
	font-size: 14px;
	display: inline-block;
	padding-bottom: 10px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.footer-link li a:hover {
	color: #f8f9fa;
}
/* footer copyright */
.footer-copyright {
	color: #f8f9fa;
	font-size: 14px;
	margin-bottom: 10px;
}
/* ===================================
	12. Inner page title
=================================== */
#page-about.inner-page-title-area {
	background-image: url(../img/bg/bg-about-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}
#page-blog.inner-page-title-area {
	background-image: url(../img/bg/bg-blog-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}
#page-support.inner-page-title-area {
	background-image: url(../img/bg/bg-support-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}
#page-contact.inner-page-title-area {
	background-image: url(../img/bg/bg-contact-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}
#page-features.inner-page-title-area {
	background-image: url(../img/bg/bg-features-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}
#page-home.inner-page-title-area {
	background-image: url(../img/bg/bg-features-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}
#page-portfolio.inner-page-title-area {
	background-image: url(../img/bg/inner-page-title-bg.jpg) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}
#page-pricing.inner-page-title-area {
	background-image: url(../img/bg/bg-pricing-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}
#page-services.inner-page-title-area {
	background-image: url(../img/bg/bg-services-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}

#page-terms.inner-page-title-area {
	background-image: url(../img/bg/bg-terms-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}

#page-privacy.inner-page-title-area {
	background-image: url(../img/bg/bg-privacy-1920x600px.png) !important;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: cover;
	padding: 220px 0px;
	position: relative;
	z-index: 0;
}

/* ===================================
   INNER PAGE IMAGE + TITLE - Desktop
   Normal desktop view settings for all inner page banners
   Includes flex centering, overlay, heading, decorative lines, and breadcrumbs
=================================== */

.inner-page-title-area {
  display: flex;                 /* flex container for vertical/horizontal centering */
  flex-direction: column;
  justify-content: center;       /* vertical center */
  align-items: center;           /* horizontal center */
  min-height: 220px;             /* default desktop height */
  text-align: center;
  background-repeat: no-repeat;
  background-position: center 20%; /* adjust vertical position of background */
  background-size: cover;
  position: relative;
  z-index: 0;
}

/* Overlay */
.inner-page-title-area:after {
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
}

/* Heading */
.inner-page-title-area h1 {
  font-weight: 600;
  font-size: 36px;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.inner-page-title-area h1 span {
  position: relative;
}

/* Decorative lines */
.inner-page-title-area h1 span:before,
.inner-page-title-area h1 span:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 94%;
  background-color: #00bcd4;
  top: 50%;
  transform: translateY(-50%);
}

.inner-page-title-area h1 span:before { right: -25px; }
.inner-page-title-area h1 span:after { left: -25px; }

/* Breadcrumb */
.inner-page-title-area .breadcrumb {
  margin: auto;
  text-align: center;
  padding: 0;
  display: inline-block;
  background-color: transparent;
}

.inner-page-title-area .breadcrumb li {
  float: none;
  color: #fff;
  display: inline-block;
}

.inner-page-title-area .breadcrumb li a {
  color: #00bcd4;
}

.inner-page-title-area .breadcrumb-item + .breadcrumb-item:before {
  color: #fff;
}

/* ===================================
	13. Portfolio
=================================== */
#portfoliolist .portfolio {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	display: none;
}
.filter1 {
	border: 1px solid #eee;
	border-radius: 30px;
	padding: 10px;
}
.filter1 li {
	margin-right: 0px !important;
}
.filter1 li span {
	cursor: pointer;
	padding: 8px 12px 8px 12px;
	display: inline-block;
	position: relative;
	font-size: 12px;
	font-weight: 400;
	background-color: #202020;
	border-radius: 30px;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.filter1 li span.active, .filter1 li span:hover {
	color: #fff;
	background-color: #00bcd4;
}
.portfolio-box {
	margin-bottom: 30px;
	position: relative;
	border-radius: 6px;
	/* Replace bottom border with subtle shadow */
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	text-align: center;
	overflow: hidden;
	min-height: 485px; /* adjust as needed */

	/* Hover effect */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portfolio-box:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 20px rgba(0, 188, 212, 0.3);
	z-index: 10;
}
.portfolio-box.text-box {
    padding: 20px; /* Added padding for inner content spacing */
	 display: flex;
	 flex-direction: column;
}
.portfolio-box .portfolio-box-img {
	position: relative;
	overflow: hidden;
}
.portfolio-box .portfolio-box-img .hoverlay {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	background-color: rgba(0,0,0,0);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.portfolio-box:hover .portfolio-box-img .hoverlay {
	background-color: rgba(0,0,0,0.8);
}
.portfolio-box .readmore {
	color: #fff;
	font-size: 12px;
	position: absolute;
	right: 0px;
	left: 0px;
	background-color: #00bcd4;
	opacity: 0;
	margin: auto;
	top: 50%;
	width: 40px;
	height: 40px;
	text-align: center;
	border-radius: 100%;
	transform: translateY(-50%);
	line-height: 40px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.portfolio-box:hover .readmore {
	opacity: 1;
}
.portfolio-box .hoverlay a:hover {
	color: #fff;
}
.portfolio-box h5 {
	color: #202020;
	font-size: 16px;
	font-weight: 600;
	padding: 20px 0px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.portfolio-box:hover h5 {
	background-color: #00bcd4;
	color: #fff;
}
/* Left align paragraph text inside portfolio-box with text-box class */
.portfolio-box.text-box p {
    text-align: left;
	 flex: 1; /* Pushes the button to the bottom */
}
.portfolio-box.text-box a.btn {
    margin-top: auto; /* Locks Read More button to bottom */
}

/* ===================================
	14. Contact form
=================================== */
/* contact form */
.contact-form input {
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	font-size: 14px;
	height: 50px;
}
.contact-form textarea {
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	font-size: 14px;
}
.contact-form .form-control:focus {
	box-shadow: none;
	border: 2px solid #00bcd4;
}
.help-block.with-errors ul {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
	padding: 10px;
}
/* contact info */
.contact-info-item {
	margin-bottom: 20px;
	width: 100%;
	display: inline-block;
}
.contact-info-item:last-child {
	margin-bottom: 0px;
}
.contact-info-item .icon-box {
	width: 40px;
	float: left;
	margin-right: 5px;
}
.contact-info-item .icon-box i {
	color: #00bcd4;
	font-size: 18px;
}
.contact-info-item .text-info {
	width: 80%;
	float: left;
	margin-left: 5px;
}
.contact-info-item .text-info h6 {
	margin-bottom: 5px;
}
.contact-info-item .text-info p {
	margin-bottom: 0px;
}
.contact-info-item a {
	color: #6c757d;
	text-decoration: none;
}
.contact-info-item a:hover {
	color: #00bcd4;
}

/* Messages container */
.messages {
    margin-bottom: 1rem;
    font-family: Arial, sans-serif;
}

/* Success message */
.messages .success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Error message */
.messages .danger {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Override Bootstrap's invalid-tooltip positioning */
.invalid-tooltip {
  top: 100% !important;
  left: 0 !important;
  transform: translateY(4px); /* add a small gap */
}


/* map */
.map-box iframe {
	width: 100%;
	border: 0px;
	height: 270px;
}

/* ===================================
  15. Pricing
=================================== */

/* Subtle & elegant toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  vertical-align: middle;
}

.switch input {
  display: none;
}

.billing-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #e0e0e0; /* soft neutral */
  transition: background-color 0.3s;
  border-radius: 34px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

.billing-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: transform 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Toggle on/off without using + */
.switch input:checked ~ .billing-slider {
  background-color: #00bcd4; /* ApprovalPro brand accent */
}

.switch input:checked ~ .billing-slider:before {
  transform: translateX(30px);
}

/* Optional: smooth hover highlight */
.switch:hover .billing-slider {
  background-color: #b2ebf2;
}

/* Larger Monthly/Yearly labels */
#monthly-label, #yearly-label {
  transition: color 0.3s ease;
  font-size: 1.3rem; /* increased size */
  vertical-align: middle;
}

/* Yearly savings text enhancement */
#yearly-label small {
  background: linear-gradient(135deg, #00bcd4, #0066b3);
  color: #fff !important;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: 6px;
  display: inline-block;
  font-size: 0.85rem; /* slightly bigger */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#yearly-label:hover small {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0, 188, 212, 0.4);
}

#yearly-label {
  position: relative;
  top: 2px;
}

/* Pulse keyframes */
@keyframes pulseHighlight {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 188, 212, 0);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 188, 212, 0);
  }
}

/* Trigger pulse when toggle checked */
.toggle-wrapper input:checked ~ #yearly-label small {
  animation: pulseHighlight 0.8s ease;
}


/* Pricing row for desktop */
.pricing-card {
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pricing-header {
    border-radius: 15px 15px 0 0;
    color: white;
}

/* Small / Basic Plan Header */
.basic-header {
    background: linear-gradient(135deg, #00bcd4, #0097a7); /* bright cyan to teal-ish for friendly vibe */
}

/* Medium / Pro Plan Header */
.pro-header {
    background: linear-gradient(135deg, #003479, #0066b3); /* deep navy to medium blue for professional feel */
}

/* Large / Enterprise Plan Header */
.enterprise-header {
    background: linear-gradient(135deg, #00bcd4, #003479); /* cyan to navy for bold and premium look */
}

/* Base button styling - applies to all buttons */
.btn-custom {
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff; /* default text color */
    border: none; /* remove border */
}

/* Small / Basic Plan Button Gradient */
.card.basic .btn-custom {
    background: linear-gradient(135deg, #00bcd4, #0097a7);
}

.card.basic .btn-custom:hover {
    background: linear-gradient(135deg, #0097a7, #00bcd4);
}

/* Medium / Pro Plan Button Gradient */
.card.pro .btn-custom {
    background: linear-gradient(135deg, #003479, #0066b3);
}

.card.pro .btn-custom:hover {
    background: linear-gradient(135deg, #0066b3, #003479);
}

/* Large / Enterprise Plan Button Gradient */
.card.enterprise .btn-custom {
    background: linear-gradient(135deg, #00bcd4, #003479);
}

.card.enterprise .btn-custom:hover {
    background: linear-gradient(135deg, #003479, #00bcd4);
}

.pricing-card.feature-list {
    list-style-type: none;
    padding-left: 0;
}

.pricing-card.feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.pricing-card.feature-list li:last-child {
    border-bottom: none;
}

/* ===================================
  15. Pricing
=================================== */

/* Subtle & elegant toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  vertical-align: middle;
}

.switch input {
  display: none;
}

.billing-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #e0e0e0; /* soft neutral */
  transition: background-color 0.3s;
  border-radius: 34px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

.billing-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: transform 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Toggle on/off without using + */
.switch input:checked ~ .billing-slider {
  background-color: #00bcd4; /* ApprovalPro brand accent */
}

.switch input:checked ~ .billing-slider:before {
  transform: translateX(30px);
}

/* Optional: smooth hover highlight */
.switch:hover .billing-slider {
  background-color: #b2ebf2;
}

/* Larger Monthly/Yearly labels */
#monthly-label,
#yearly-label {
  transition: color 0.3s ease;
  font-size: 1.3rem; /* increased size */
  vertical-align: middle;
}

/* Yearly savings text enhancement */
#yearly-label small {
  background: linear-gradient(135deg, #00bcd4, #0066b3);
  color: #fff !important;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: 6px;
  display: inline-block;
  font-size: 0.85rem; /* slightly bigger */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#yearly-label:hover small {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0, 188, 212, 0.4);
}

#yearly-label {
  position: relative;
  top: 2px;
}

/* Pulse keyframes */
@keyframes pulseHighlight {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 188, 212, 0);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 188, 212, 0);
  }
}

/* Trigger pulse when toggle checked */
.toggle-wrapper input:checked ~ #yearly-label small {
  animation: pulseHighlight 0.8s ease;
}

/* Pricing row for desktop */
.pricing-card {
  border: none;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pricing-header {
  border-radius: 15px 15px 0 0;
  color: white;
}

/* Small / Basic Plan Header */
.basic-header {
  background: linear-gradient(135deg, #00bcd4, #0097a7);
}

/* Medium / Pro Plan Header */
.pro-header {
  background: linear-gradient(135deg, #003479, #0066b3);
}

/* Large / Enterprise Plan Header */
.enterprise-header {
  background: linear-gradient(135deg, #00bcd4, #003479);
}

/* Base button styling - applies to all buttons */
.btn-custom {
  border-radius: 50px;
  padding: 10px 30px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  border: none;
}

/* Small / Basic Plan Button Gradient */
.card.basic .btn-custom {
  background: linear-gradient(135deg, #00bcd4, #0097a7);
}

.card.basic .btn-custom:hover {
  background: linear-gradient(135deg, #0097a7, #00bcd4);
}

/* Medium / Pro Plan Button Gradient */
.card.pro .btn-custom {
  background: linear-gradient(135deg, #003479, #0066b3);
}

.card.pro .btn-custom:hover {
  background: linear-gradient(135deg, #0066b3, #003479);
}

/* Large / Enterprise Plan Button Gradient */
.card.enterprise .btn-custom {
  background: linear-gradient(135deg, #00bcd4, #003479);
}

.card.enterprise .btn-custom:hover {
  background: linear-gradient(135deg, #003479, #00bcd4);
}

/* ===================================
   15. Pricing Table – Desktop & Mobile Friendly
=================================== */

/* Table wrapper card */
.pricing-table .card {
  background-color: #fff;
  border-radius: 15px;
  border: none;
  overflow: hidden;
  color: #003479;
}

/* Table headers */
.pricing-table th {
  background-color: #00bcd4;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  padding: 1rem;
}

.pricing-table th.text-start {
  text-align: left;
}

/* Table cells */
.pricing-table td {
  text-align: center;
  padding: 1rem;
  border: 1px solid #dee2e6;
  white-space: nowrap;
}

.pricing-table td.text-start {
  text-align: left;
}

/* Alternate row shading */
.pricing-table tbody tr:nth-child(odd) td {
  background-color: #e0f7fa;
}

.pricing-table tbody tr:nth-child(even) td {
  background-color: #fff;
}
/* Badges inside table */
.pricing-table .badge {
  background-color: #00bcd4;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.45em 0.65em;
  border-radius: 0.5rem;
  display: inline-block;
  min-width: 40px;
  text-align: center;
  white-space: nowrap;
}

/* Light / dark text variants */
.pricing-table .badge.bg-light {
  background-color: #f8f9fa;
  color: #212529;
}

.pricing-table .badge.bg-success {
  background-color: #28a745;
  color: #fff;
}

.pricing-table .badge.bg-info {
  background-color: #17a2b8;
  color: #fff;
}

/* Pricing disclaimer */
.pricing-disclaimer {
  background-color: #e0f7fa;
  border-left: 4px solid #00bcd4;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #003479;
  margin-top: 1rem;
}

/* Pricing list ul's and li's */
.pricing-card.feature-list {
  list-style-type: none;
  padding-left: 0;
}

.pricing-card.feature-list li {
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}

.pricing-card.feature-list li:last-child {
  border-bottom: none;
}

/* ===================================
   16. Terms Page Accordion
=================================== */

/* Full scoped accordion button gradient */
#page-terms .accordion-button {
    background: linear-gradient(135deg, #003479, #00bcd4) !important;
    color: #fff !important;
    font-weight: bold;
    border: none !important;
}

#page-terms .accordion-button.collapsed {
    background: linear-gradient(135deg, #003479, #00bcd4) !important;
    color: #fff !important;
    border: none !important;
}

/* Remove focus/active shadows */
#page-terms .accordion-button:focus {
    box-shadow: none !important;
}

/* Accordion icons */
#page-terms .accordion-button i {
    margin-right: 0.5rem;
}

/* Override default collapse arrow color */
#page-terms .accordion-button::after {
    color: #fff !important;
}

/* Accordion content */
#page-terms .accordion-body {
    background-color: #f8f9fa !important;
}

/* Links inside accordion */
#page-terms a {
    color: #00bcd4 !important;
}

#page-terms #termsLastUpdated {
    font-size: 0.7rem;
    color: #555;
    font-style: italic;
    text-align: right;
    margin-top: 1rem;
}
#page-terms #termsLastUpdated strong {
    font-style: normal;
}
/* Target the button directly */
#toggleAccordion {
    display: inline-block;
    padding: 5px 15px;   /* smaller padding */
    background-color: #00bcd4;
    color: #fff;
    font-size: 0.9rem;   /* smaller font */
    font-weight: bold;
    border-radius: 6px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

#toggleAccordion:hover {
    background-color: #003479;
    color: #fff;
    text-decoration: none;
}

/* ===================================
   17. Santa hat for the Home link
=================================== */

/* Santa hat for the Home link */
.santa .nav-link {
    position: relative; /* required for positioning the hat */
}

.santa .nav-link::before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;         /* adjust up/down */
    left: -8px;        /* adjust left/right */

    width: 40px;       /* size of hat */
    height: 40px;

    background-image: url('/img/xmas/santa_hat-XS.svg'); /* <-- your file here */
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}