/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 *  Owl Carousel - Core
 */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");

.owl-carousel {
 display: none;
 width: 100%;
 -webkit-tap-highlight-color: transparent;
 /* position relative and z-index fix webkit rendering fonts issue */
 position: relative;
 z-index: 1;
}

.owl-carousel .owl-stage {
 position: relative;
 -ms-touch-action: pan-Y;
 touch-action: manipulation;
 -moz-backface-visibility: hidden;
 /* fix firefox animation glitch */ }
.owl-carousel .owl-stage:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0; }
.owl-carousel .owl-stage-outer {
 position: relative;
 overflow: hidden;
 /* fix for flashing background */
 -webkit-transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0); }
.owl-carousel .owl-item {
 position: relative;
 min-height: 1px;
 float: left;
 -webkit-backface-visibility: hidden;
 -webkit-tap-highlight-color: transparent;
 -webkit-touch-callout: none; }
.owl-carousel .owl-item img {
 display: block;
 width: 100%; }
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
 display: none; }
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
 cursor: pointer;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none; }
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
 background: none;
 color: inherit;
 border: none;
 padding: 0 !important;
 font: inherit; }
.owl-carousel.owl-loaded {
 display: block; }
.owl-carousel.owl-loading {
 opacity: 0;
 display: block; }
.owl-carousel.owl-hidden {
 opacity: 0; }
.owl-carousel.owl-refresh .owl-item {
 visibility: hidden; }
.owl-carousel.owl-drag .owl-item {
 -ms-touch-action: pan-y;
 touch-action: pan-y;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none; }
.owl-carousel.owl-grab {
 cursor: move;
 cursor: grab; }
.owl-carousel.owl-rtl {
 direction: rtl; }
.owl-carousel.owl-rtl .owl-item {
 float: right; }

/* No Js */
.no-js .owl-carousel {
 display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
 animation-duration: 1000ms;
 animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
 z-index: 0; }

.owl-carousel .owl-animated-out {
 z-index: 1; }

.owl-carousel .fadeOut {
 animation-name: fadeOut; }

@keyframes fadeOut {
 0% {
  opacity: 1; }
 100% {
  opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
 transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item {
 /**
                       This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
                       calculation of the height of the owl-item that breaks page layouts
 */ }
.owl-carousel .owl-item .owl-lazy {
 opacity: 0;
 transition: opacity 400ms ease; }
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
 max-height: 0; }
.owl-carousel .owl-item img.owl-lazy {
 transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
 position: relative;
 height: 100%;
 background: #000; }

.owl-carousel .owl-video-play-icon {
 position: absolute;
 height: 80px;
 width: 80px;
 left: 50%;
 top: 50%;
 margin-left: -40px;
 margin-top: -40px;
 background: url("owl.video.play.png") no-repeat;
 cursor: pointer;
 z-index: 1;
 -webkit-backface-visibility: hidden;
 transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
 -ms-transform: scale(1.3, 1.3);
 transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
 display: none; }

.owl-carousel .owl-video-tn {
 opacity: 0;
 height: 100%;
 background-position: center center;
 background-repeat: no-repeat;
 background-size: contain;
 transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
 position: relative;
 z-index: 1;
 height: 100%;
 width: 100%; }


/* Grid styling */
.template-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 15px;
 padding: 20px;
}

.grid-item {
 position: relative;
 overflow: hidden;
 background-color: #f5f5f5;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 transition: transform 0.2s ease-in-out;
}

.grid-item:hover {
 transform: scale(1.05);
}

/* Image Styling */
.grid-item img {
 width: 100%;
 height: auto;
 display: block;
 border-radius: 8px 8px 0 0;
}

/* Overlay content */
.overlay {
 position: absolute;
 bottom: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.6);
 color: white;
 width: 100%;
 padding: 20px;
 text-align: center;
 border-radius: 0 0 8px 8px;
 box-sizing: border-box;
}

h3 {
 margin: 0 0 10px;
}

p {
 margin: 0;
}

/* Floating Preview Button */
.preview-btn {
 position: absolute;
 top: 10px;
 right: 10px;
 background-color: lightblue;
 color: white;
 padding: 10px 15px;
 border-radius: 50px;
 text-decoration: none;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 transition: background-color 0.3s ease-in-out;
}

.preview-btn:hover {
 background-color: darkblue;
}

/* Full Box Clickable */
.template-link {
 display: block;
 text-decoration: none;
 color: inherit;
 height: 100%;
 position: relative;
}

/* Select Template Button */
.select-btn {
 display: inline-block;
 background: linear-gradient(135deg, #42e695, #3bb2b8); /* Gradient from green to teal */
 color: white;
 font-size: 16px;
 font-weight: bold;
 padding: 12px 24px;
 border-radius: 30px; /* Rounded corners for a pill shape */
 text-decoration: none;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for a floating effect */
 transition: all 0.3s ease-in-out;
 margin-top: 10px; /* Adds spacing between the button and cgontent above */
}

.select-btn:hover {
 background: linear-gradient(135deg, #3bb2b8, #42e695); /* Reverse gradient on hover */
 transform: translateY(-3px); /* Lift the button slightly on hover */
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}

/*Icons on Navba*/
.icon-white {
 color: white !important;;
}

/*Achievements page*/
.achievements-section {
 padding: 20px;
 background-color: #e0e0e0; /* Neutral gray for a soft look */
}

.achievements-container {
 max-width: 1200px;
 margin: 0 auto;
}

.achievements-row {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
}

.achievement-card {
 background-color: #f9f9f9; /* Light neutral gray */
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
 padding: 15px;
 flex: 1 1 calc(33.333% - 20px);
 text-align: center;
 transition: transform 0.3s;
}

.achievement-card:hover {
 transform: translateY(-5px);
 background-color: #f0f0f0; /* Slightly darker on hover */
}

.achievement-text {
 font-size: 1.2em;
 color: #4d4d4d; /* Medium gray for text */
 font-weight: bold;
}



/* faq */
.faq-section {
 text-align: center;
}

.faq-card {
 border: none;
 margin-bottom: 10px;
}

.faq-header {
 background-color: #f8f9fa;
}

.faq-toggle {
 width: 100%;
 text-align: left;
 font-weight: bold;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border: none;
 background-color: transparent;
}

.faq-toggle:focus {
 outline: none;
 box-shadow: none;
}

.faq-toggle .toggle-icon {
 font-size: 20px;
 margin-right: 10px;
}

.collapse.show .faq-toggle .toggle-icon {
 content: '-';
}

.collapse:not(.show) .faq-toggle .toggle-icon {
 content: '+';
}

.faq-img {
 max-width: 100%;
 height: auto;
 margin-bottom: 15px;
}

@media (min-width: 1200px) {
 .faq-section {
  padding: 40px;
 }

 .faq-card {
  margin-bottom: 15px;
 }
}

@media (min-width: 768px) and (max-width: 1199px) {
 .faq-section {
  padding: 30px;
 }

 .faq-toggle {
  font-size: 16px;
 }
}

@media (min-width: 576px) and (max-width: 767px) {
 .faq-section {
  padding: 20px;
 }

 .faq-toggle {
  font-size: 14px;
 }

 .faq-header {
  padding: 10px;
 }
}

/* For extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
 .faq-section {
  padding: 15px;
 }

 .faq-toggle {
  font-size: 12px;
 }

 .faq-card {
  margin-bottom: 8px;
 }
}


/*services*/
.service-card {
 border: none;
 margin-bottom: 1rem;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-card-title {
 font-weight: bold;
 color: #0056b3;
 text-decoration: none;
 transition: color 0.3s;
}

.service-card-title:hover {
 color: #003366;
}

.service-card-body {
 padding: 1.5rem;
 background-color: #f9f9f9;
 border-radius: 0 0 8px 8px;
}

.service-card-image {
 max-width: 100%;
 height: auto;
 margin-bottom: 1rem;
 border-radius: 4px;
}

.service-card-heading {
 margin-top: 1rem;
 color: #333;
 font-size: 1.5rem;
}

.service-card-text {
 color: #555;
 line-height: 1.6;
}


.icon_col { 
 color: white !important;

}

footer ul.social-icons li a:hover {
 background-color: black !important;
}

.text-color {
 color: white !important;;
}


.privacy-policy-wrapper {
 display: flex !important;
 flex-direction: column !important;
 gap: 1rem !important;
 padding: 1rem !important;
 max-width: 800px !important;
 margin: auto !important;
}

.privacy-item {
 background-color: #f9f9f9 !important;
 border-radius: 8px !important;
 padding: 1rem !important;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
 line-height: 1.6 !important;
 font-size: 1rem !important;
 color: #333 !important;
}

.privacy-item p {
 margin: 0 !important;
}
.faq-answer {
 float: left !important;
 color: black;
}

@media (max-width: 600px) {
 .privacy-policy-wrapper {
  padding: 0.5rem !important;
 }
 .privacy-item {
  font-size: 0.9rem !important;
  padding: 0.75rem !important;
 }
}

.faq_question {
 word-wrap: break-word; 
 overflow-wrap: break-word; 
 white-space: normal;
 max-width: 100%;
 font-size: 16px !important; 
 line-height: 1.5 !important;
 word-wrap: break-word !important; 
}

@media (max-width: 768px) {
 .faq_question {
  font-size: 14px !important; 
  padding: 10px !important; 
 }
}

.filled-centre {
 margin-left: 2em;
}

.ellipsis {
 display: -webkit-box !important;
 -webkit-box-orient: vertical !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
 --line-clamp: 1;
 -webkit-line-clamp: var(--line-clamp) !important;
}
