/*!------------------------------------------------------------------
[MAIN STYLESHEET]
PROJECT: IWSF
Bootstrap 5 Compatible Version
-------------------------------------------------------------------*/

@import "https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700|Open+Sans:300,400,600,700";

body {
	line-height: 1.6;
	font-family: open sans, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 15px;
	color: #818385;
	background-color: #fff;
	overflow-x: hidden;
}

p, .paragraph {
	font-weight: 400;
	color: #818385;
	font-size: 15px;
	line-height: 1.6;
	font-family: open sans, sans-serif;
	width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	color: #172231;
	font-family: barlow condensed, sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.2;
	transition: .2s ease;
	width: 100%;
}

h1, .h1 { font-size: 70px }
h2, .h2 { font-size: 48px }
h3, .h3 { font-size: 44px }
h4, .h4 { font-size: 22px }
h5, .h5 { font-size: 18px }
h6, .h6 { font-size: 16px }
header {
    position: relative;
    z-index: 1050; /* BS5 modal is 1055, keep navbar just below */
}

/* ── BUTTONS ── */
.btn {
	font-size: 14px;
	font-family: open sans, sans-serif;
	text-transform: uppercase;
	border-radius: 35px;
	font-weight: 600;
	border: 1px solid;
	position: relative;
	z-index: 1;
	transition: .3s ease-in;
}
.btn:focus         { outline: 0; box-shadow: none !important; }
.btn:active        { box-shadow: none; }
.btn-lg            { font-size: 20px; padding: 19px 35px; }
.btn-md            { font-size: 18px; padding: 17px 30px; }
.btn-sm            { font-size: 12px; padding: 5px 20px; }

/* Primary */
.btn-primary                                        { background: #2bc4ed; color: #fff; border-color: #2bc4ed; }
.btn-primary:hover                                  { background: #12bcf5; border-color: #12bcf5; color: #fff; }
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle               { background: #6b9c2e !important; border-color: #6b9c2e; color: #fff; }

/* Gray */
.btn-gray                                          { background: #f5f6fa; color: #172231; border-color: #f5f6fa; }
.btn-gray:hover                                    { background: #2bc4ed; border-color: #2bc4ed; color: #fff; }
.btn-gray:active                                   { background: #2bc4ed !important; border-color: #2bc4ed; color: #fff; }

/* Secondary — renamed to avoid BS5 conflict */
.btn-outline-custom {
	background: transparent;
	color: #172231;
	padding-left: 0;
	border: 0;
}
.btn-outline-custom:hover,
.btn-outline-custom:active { background: transparent; color: #2bc4ed; }

/* Primary Outline */
.btn-primary-outline                               { background: transparent; color: #172231; border: 2px solid #172231; }
.btn-primary-outline:hover,
.btn-primary-outline:active                        { background: #2bc4ed; border-color: #2bc4ed; color: #fff; }

/* Light */
.btn-light                                         { background: #fff; color: #172231; border-color: #e7e7e7; }
.btn-light:hover                                   { background: transparent; border-color: #fff; color: #fff; }
.btn-light:active                                  { background: transparent !important; border-color: #fff; color: #fff; }
.btn-light-alt:hover,
.btn-light-alt:active                              { background: #2bc4ed; border-color: #2bc4ed; color: #fff; }

/* Light Outline */
.btn-light-outline                                 { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-light-outline:hover,
.btn-light-outline:active                          { background: #6b9c2e; border-color: #6b9c2e; color: #fff; }

/* Arrow Button */
.btn-arrow { transition: .2s ease; }
.btn-arrow::before {
	position: absolute; content: ''; height: 8px; width: 8px;
	background: transparent; top: 50%; transform: translateY(-50%) rotate(-45deg);
	border-right: 2px solid #000; border-bottom: 2px solid #000;
	left: calc(85% + 5px); transition: .2s ease;
}
.btn-arrow::after {
	position: absolute; content: ''; height: 2px; width: 15px;
	top: 50%; transform: translateY(-50%); background: #000;
	transition: .2s ease; left: 85%;
}
.btn-arrow:hover::before { left: calc(85% + 10px); border-color: #2bc4ed; }
.btn-arrow:hover::after  { width: 20px; background: #2bc4ed; }

/* Ripple */
.hover-ripple              { transition: .2s ease-in; }
.hover-ripple:hover        { transform: scale(0.97); }
.hover-ripple:hover::after { animation: sonarEffect 1s ease-out 50ms; }
.hover-ripple::after {
	pointer-events: none; position: absolute;
	width: 100%; height: 100%; content: '';
	top: 0; left: 0; padding: 0; z-index: -1;
	opacity: 0; transform: scale(0.9); border-radius: inherit;
}
.hover-ripple.ripple-white:hover::after { animation: sonarEffectWhite 1s ease-out 50ms; }

@keyframes sonarEffect {
	0%   { opacity: .1; }
	40%  { opacity: .3; box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 10px 10px #2bc4ed, 0 0 0 10px rgba(255,255,255,.2); }
	100% { box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 10px 10px #2bc4ed, 0 0 0 10px rgba(255,255,255,.2); transform: scale(1.2); opacity: 0; }
}
@keyframes sonarEffectWhite {
	0%   { opacity: .1; }
	40%  { opacity: .3; box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,.2); }
	100% { box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,.2); transform: scale(1.2); opacity: 0; }
}

/* ── SELECTION ── */
::selection { background: #2ac3ec; color: #fff; }

/* ── PRELOADER ── */
.preloader {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background-color: #fff; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	height: 100vh; width: 100vw;
}

/* ── BASE ── */
ol, ul { list-style-type: none; margin: 0; }
a, a:hover, a:focus { text-decoration: none; }
a, button, select   { cursor: pointer; transition: .2s ease; }
a:focus, button:focus, select:focus { outline: 0; }
a:hover             { color: #2bc4ed; }
a.text-white:hover,
a.text-light:hover  { color: #2bc4ed !important; }
a h4:hover,
a h5:hover          { color: #2bc4ed; }
.slick-slide        { outline: 0; }

/* ── SECTIONS ── */
.section     { padding-top: 150px; padding-bottom: 150px; }
.section-sm  { padding-top: 70px;  padding-bottom: 70px;  }
.section-xs  { padding-top: 40px;  padding-bottom: 40px;  }
.section-xxs { padding-top: 30px;  padding-bottom: 30px;  }
.section-title { margin-bottom: 40px; }

.section-title-border {
	position: relative; height: 5px; width: 30px;
	background: #2bc4ed; border-radius: 10px; margin-bottom: 20px;
}
.section-title-border::before {
	position: absolute; content: ""; height: 100%; width: 50%;
	background: #2bc4ed; border-radius: 10px; right: -60%; top: 0;
}
.section-title-border::after {
	position: absolute; content: ""; height: 100%; width: 25%;
	background: #2bc4ed; border-radius: 10px; right: -100%; top: 0;
}
.section-title-border.border-center  { margin-left: calc(50% - 27px); }
.section-title-border.border-white,
.section-title-border.border-white::before,
.section-title-border.border-white::after { background: #fff; }
.section-title-border.border-inline  { display: inline-block; margin-bottom: 5px; }

.section-title-sm   { font-family: open sans, sans-serif; font-weight: 600; color: #818385; }
.section-bottom-lg  { padding-bottom: 240px; }

/* ── BACKGROUNDS ── */
.bg-cover   { background-size: cover;   background-position: 50%; background-repeat: no-repeat; }
.bg-contain { background-size: contain; background-position: 50%; background-repeat: no-repeat; }
.bg-fixed   { background-size: cover;   background-repeat: no-repeat; background-position: 50%; background-attachment: fixed; }

/* BS5: bg-primary/secondary are overridden here */
.bg-primary         { background: #2bc4ed !important; }
.bg-secondary       { background: #252d39 !important; }
.bg-secondary-darken{ background: #1f2630 !important; }
.bg-gray            { background: #f5f6fa !important; }
.bg-gray-white      { background-image: linear-gradient(to right, #f5f6fa 45%, #fff 0%); }
.bg-white-gray      { background-image: linear-gradient(to right, #fff 45%, #f5f6fa 0%); }
.bg-white2-gray     { background-image: linear-gradient(to right, #fff 70%, #f5f6fa 0%); }

/* ── TEXT COLORS ── */
/* BS5 compatible — use !important to override */
.text-primary       { color: #2bc4ed !important; }
.text-color         { color: #818385; }
.text-light         { color: #ddd !important; }
.text-dark          { color: #172231 !important; }
a.text-dark:hover   { color: #2bc4ed !important; }

/* ── OVERLAYS ── */
.overlay { position: relative; }
.overlay::before {
	position: absolute; content: ''; height: 100%; width: 100%;
	top: 0; left: 0; background: #000; opacity: .6;
}
.overlay-secondary { position: relative; }
.overlay-secondary::before {
	position: absolute; content: ''; height: 100%; width: 100%;
	top: 0; left: 0; background: #252d39; opacity: .85;
}

/* ── UTILITIES ── */
.border-color       { border-color: #e7e7e7 !important; }
.outline-0          { outline: 0 !important; }
.d-unset            { display: unset !important; }
.hilighted          { background: #252d39; padding: 0 5px; border-radius: 2px; color: #fff; }
.letter-spacing     { letter-spacing: 2px; }
.mb-50  { margin-bottom: 50px !important; }
.mb-60  { margin-bottom: 60px !important; }
.mb-70  { margin-bottom: 70px !important; }
.mb-80  { margin-bottom: 80px !important; }
.mb-90  { margin-bottom: 90px !important; }
.mb-100 { margin-bottom: 100px !important; }
.zindex-1  { z-index: 1; }
.zindex-0  { z-index: 0; }
.overflow-hidden    { overflow: hidden; }
.min-height-400     { min-height: 400px; }
.border-muted       { border-color: #404751 !important; }
.rounded-top-0      { border-top-left-radius: 0; border-top-right-radius: 0; }
.flex-basis-33      { flex-basis: 33.333333%; }
.cursor-pointer     { cursor: pointer; }

/* ── ICONS ── */
.icon    { font-size: 40px; }
.icon-sm { font-size: 34px; }
.icon-xs { font-size: 22px; }
.icon-lg { font-size: 56px; }
.box-shadow { box-shadow: 0 15px 39px 0 rgba(8, 18, 109, .1); }

.font-size-30        { font-size: 30px; }
.font-weight-semebold{ font-weight: 600 !important; }
.font-secondary      { font-family: barlow condensed, sans-serif !important; }
.text-decoration-none,
.text-decoration-none:hover { text-decoration: none !important; }

/* BS5 removed border-md-right — keep custom */
.border-md-right { border-right: 1px solid; }
@media (max-width: 767px) { .border-md-right { border: 0; } }

/* Icon BG */
.icon-bg {
	position: relative; background-color: rgba(58, 171, 195, 0.2);
	display: inline-block; height: 100px; width: 100px;
	border-radius: 120px 135px 110px 90px;
}
.icon-bg::before {
	position: absolute; content: ""; height: 100%; width: 100%;
	top: 0; left: 5px; background: rgba(134, 195, 58, .05);
	border: 2px solid #2bc4ed; border-radius: 130px 120px 160px 130px;
}
.icon-bg .icon { line-height: 30px; }

/* Water wave */
.water-wave {
	position: relative;
	animation: water-wave 3s linear infinite;
}
@keyframes water-wave {
	0%   { border-radius: 120px 135px 110px 90px; }
	25%  { border-radius: 130px 140px 100px 110px; }
	50%  { border-radius: 110px 97px 150px 100px; }
	75%  { border-radius: 80px 107px 120px 90px; }
	100% { border-radius: 120px 135px 110px 90px; }
}

/* ── BREADCRUMB ── */
/* BS5: breadcrumb divider is CSS var, keep color override */
.breadcrumb-item + .breadcrumb-item::before { color: #fff; }

/* ── MAP ── */
#map_canvas { height: 500px; }

/* ── FORMS ── */
/* BS5: .form-group removed — use mb-3 in HTML instead */
.form-control        { height: 40px; padding: 0 10px; }
.form-control-sm     { height: 45px; }
.form-control:focus  { box-shadow: 0 15px 39px 0 rgba(8, 18, 109, .1); border-color: #2bc4ed !important; }
.focus-shadow-none   { box-shadow: none !important; }
textarea.form-control    { height: 150px; }
textarea.form-control-sm { height: 100px; }
.form-control::placeholder { color: #b6b6b6; font-style: italic; font-size: 14px; }

/* ── CONTENT ── */
.content * { margin-bottom: 20px; }
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 { margin-bottom: 10px; }
.content ul, .content ol { padding-left: 0; }
.content ul li, .content ol li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.content ul li::before, .content ol li::before {
	position: absolute; content: "\f105";
	/* FA6 */
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	font-size: 14px; left: 0; top: 1px; color: #2bc4ed; transition: .3s ease;
}
.content table { text-align: left; width: 100%; max-width: 100%; margin-bottom: 1rem; border: 1px solid #dee2e6; }
.content table th, .content table td { padding: .75rem; vertical-align: top; border: 1px solid #dee2e6; }
.content table thead { background: #eef0f7; }
.content table tbody { background: #f5f6fa; }
.content table tbody td { text-align: left !important; }
.content blockquote p { margin-bottom: 0; color: #172231; font-style: italic !important; }
.content pre { padding: 10px 20px; background: #f5f6fa; }

/* ── HEADER / NAVBAR ── */
.top-header  { font-size: 14px; }
.navigation  { box-shadow: 0 9px 20px 0 rgba(0,0,0,.09); position: relative; z-index: 1; }

/* BS5: navbar padding uses gap, not padding on nav-link directly */
.navbar { padding: 0; }
.navbar-collapse { padding-bottom: 5px; transition: .2s ease; }
.navbar .nav-item .nav-link { text-transform: uppercase; font-weight: 500; }

/* BS5 hover dropdown (desktop only) */
@media (min-width: 992px) {
	.navbar .dropdown:hover .dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: scaleX(1);
		display: block;
	}
}
.navigation {
    position: relative;
    z-index: 1050;
    box-shadow: 0 9px 20px 0 rgba(0, 0, 0, .09);
}
 
/* Top header bars */
.top-header {
    position: relative;
    z-index: 1050;
}
 
/* Navbar itself */
.navbar {
    position: relative;
    z-index: 1050;
}
 
/* ── DROPDOWN FIX ── */
 
/* Desktop dropdown must appear above slider */
.navbar .dropdown-menu {
    z-index: 1051 !important; /* above everything including slider */
    position: absolute !important;
    top: 100% !important;     /* directly below the nav-item */
    left: 0 !important;       /* align to parent nav-item */
    min-width: 200px;
    margin-top: 0 !important;
}
 
/* Parent nav-item needs position relative for dropdown to anchor to */
.navbar .nav-item {
    position: relative;
}
 
/* Desktop: show on hover */
@media (min-width: 992px) {
    .navbar .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
        pointer-events: none;
    }
    .navbar .dropdown:hover .dropdown-menu,
    .navbar .dropdown-menu.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}
 
/* Mobile: BS5 handles .show */
@media (max-width: 991px) {
    .navbar .dropdown-menu {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto;
        display: none;
        box-shadow: none;
        border-top: 1px solid #eee;
        z-index: auto !important;
    }
    .navbar .dropdown-menu.show {
        display: block;
    }
    /* Full width on mobile */
    .navbar .nav-item {
        width: 100%;
    }
}
 
/* ── HERO SLIDER Z-INDEX FIX ── */
/* Slider must be BELOW navbar */
#heroSlider,
.hero-slider,
section:first-of-type {
    position: relative;
    z-index: 1; /* way below navbar z-index of 1050 */
}
.navbar .dropdown-menu {
	box-shadow: 0 3px 9px 0 rgba(0,0,0,.12);
	padding: 15px;
	border: 0;
	top: 40px;
	left: -90px;
	border-radius: 0;
	transition: .3s ease;
	/* BS5: don't hide .show on desktop — use visibility trick only */
}

/* Desktop: animated show/hide via visibility */
@media (min-width: 992px) {
	.navbar .dropdown-menu {
		display: block;
		visibility: hidden;
		opacity: 0;
		transform: scale(0.8);
	}
	.navbar .dropdown-menu.show {
		visibility: visible;
		opacity: 1;
		transform: scale(1);
	}
	.navbar .dropdown:hover .dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: scale(1);
	}
}

/* Mobile: BS5 handles .show naturally */
@media (max-width: 991px) {
	.navbar .dropdown-menu {
		display: none;
		visibility: visible;
		opacity: 1;
		transform: scale(1);
		position: static;
		left: auto;
		top: auto;
		box-shadow: none;
	}
	.navbar .dropdown-menu.show {
		display: block;
		visibility: visible;
	}
}

.navbar .dropdown-item {
	position: relative; color: #172231;
	transition: .2s ease; font-family: open sans, sans-serif;
}
@media (max-width: 991px) { .navbar .dropdown-item { text-align: center; } }
.navbar .dropdown-item:not(:last-child) { margin-bottom: 10px; }
.navbar .dropdown-item:hover { color: #2bc4ed; background: transparent; }

.navbar-light .navbar-nav .nav-link       { color: #172231; }
.navbar-light .navbar-nav .nav-link:hover { color: #2bc4ed; }

/* BS5: navbar-expand-md breakpoint */
.navbar-expand-md .navbar-nav .nav-link  { padding: 40px 15px; }
@media (max-width: 1200px) { .navbar-expand-md .navbar-nav .nav-link { padding: 40px 10px; } }
@media (max-width: 991px)  { .navbar-expand-md .navbar-nav .nav-link { padding: 10px; } }

/* ── LOGOS ── */
.logo-2 { height: auto; width: 215px; }
.logo-1 { height: auto; width: 85px;  }
@media (max-width: 767px) { .logo-2 { width: 185px; } .logo-1 { height: 80px; width: auto; } }
@media (max-width: 575px) { .logo-2 { width: 175px; } .logo-1 { height: 50px; width: auto; } }
@media (max-width: 460px) { .logo-2 { width: 190px; } .logo-1 { height: auto; width: 80px; } }

/* ── SEARCH ── */
.search-btn     { border: 0; background: transparent; }
.search-wrapper { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 2; visibility: hidden; transition: .2s ease; opacity: 0; }
.search-wrapper.open { visibility: visible; opacity: 1; }
.search-box     { height: 112px; width: 100%; border: 0; background: #fff; font-size: 30px; padding: 0; }
.search-box:focus { box-shadow: none !important; }
.search-close   { position: absolute; right: 5px; top: 40px; border: 0; background: transparent; font-size: 20px; }

/* ── HERO ── */
.hero-section { padding: 160px 0 270px; }
.hero-slider  { overflow-x: hidden; }
.hero-slider .prevArrow { left: -100px; }
.hero-slider .nextArrow { right: -100px; }
.hero-slider:hover .prevArrow { left: 35px; }
.hero-slider:hover .nextArrow { right: 35px; }

/* ── BANNER FEATURES ── */
.banner-feature-wrapper { transform: translateY(-122px); }
.banner-feature { transition: .2s ease; }
.banner-feature:hover,
.banner-feature.active { background: #252d39 !important; }
.banner-feature:hover h4,
.banner-feature:hover p,
.banner-feature.active h4,
.banner-feature.active p { color: #fff; }
.banner-feature:hover hr {
	border: none; height: 50px; width: 90%; margin-top: 0;
	border-bottom: 1px solid #2bc4ed;
	box-shadow: 0 15px 15px -19px #89e4fc;
	margin: -50px auto 10px;
}
/* ── Hero Slider ── */
.hero-slide-bg {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
 
/* Dark overlay on each slide */
.hero-slide-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}
 
/* Carousel fade transition */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.carousel-fade .carousel-item.active {
    opacity: 1;
}
 
/* Indicators — white dots */
.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}
.carousel-indicators .active {
    background-color: #2bc4ed;
    transform: scale(1.2);
}
 
/* Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    background: rgba(43, 196, 237, 0.6);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    opacity: 1;
    transition: background 0.3s ease;
}
.carousel-control-prev { left: 20px; }
.carousel-control-next { right: 20px; }
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: #2bc4ed;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}
 
/* Text styles */
.hero-slide-bg h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}
.hero-slide-bg h4 {
    font-size: 20px;
    letter-spacing: 3px;
    color: #2bc4ed !important;
}
/* ── FEATURE IMG BG ── */
.feature-img-bg { position: relative; }
.feature-img-bg::before {
	position: absolute; content: "";
	background: url(../images/backgrounds/feature-bg.png);
	top: -100px; right: -120px; height: 150%; width: 120%;
	z-index: -1; background-repeat: no-repeat; background-size: contain;
}
@media (max-width: 991px) { 
.feature-img-bg::before { display: none; }
.hero-slide-bg { min-height: 420px; }
.hero-slide-bg h2 { font-size: 34px; }
}

/* ── TEAM ── */
.team-member-img img { position: relative; z-index: 2; }
.team-member-img::before {
	position: absolute; content: "";
	background: url(../images/backgrounds/team-member-bg.png);
	top: 0; right: 0; height: 60%; width: 60%;
	background-repeat: no-repeat; background-size: contain; z-index: 1; transition: .2s ease;
}
.team-member-img::after {
	position: absolute; content: "";
	background: url(../images/backgrounds/team-member-bg.png);
	bottom: -40px; left: 0; height: 60%; width: 60%;
	background-repeat: no-repeat; background-size: contain; z-index: 1; transition: .2s ease;
}
.team-member:hover .team-member-img::before { top: -20px; right: -20px; }
.team-member:hover .team-member-img::after  { bottom: -60px; left: -20px; }
.team-member:hover .hover-icon              { transform: scale(1); opacity: 1; }
.team-member:hover .hover-icon .social-icon a { transform: scale(1); }

.hover-icon {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: rgba(58, 171, 195, 0.9); transition: .2s ease;
	transform: scale(0.8); z-index: 3; opacity: 0; color: #fff;
}
.hover-icon .social-icon a { transform: scale(0); }

/* ── SOCIAL ICONS ── */
.social-icon li a {
	display: inline-block; height: 45px; width: 45px; border-radius: 50%;
	color: #fff; border: 1px solid #fff; background: transparent;
	line-height: 45px; text-align: center;
}
.social-icon li a:hover { color: #2bc4ed; background: #fff; }

.social-icon-alt li a {
	display: inline-block; border-radius: 50%; color: #fff;
	border: 1px solid #fff; background: transparent; text-align: center;
	line-height: 30px; height: 30px; width: 30px;
}
.social-icon-alt li a:hover { color: #fff; background: #2bc4ed; border-color: #2bc4ed; }

/* ── PROJECT / GALLERY ── */
.project-item img { transition: .4s ease-in; }
.project-item:hover img { transform: scale(1.05); }
.project-item:hover .hover-overlay { opacity: 1; }
.project-item:hover .hover-overlay a { transform: translateY(-50%) scale(1); }
.hover-overlay {
	position: absolute; height: 100%; width: 100%; top: 0; left: 0;
	text-align: center; background: rgba(58, 171, 195, 0.9); transition: .4s ease; opacity: 0;
}
.hover-overlay a {
	position: relative; font-size: 46px; color: #fff;
	top: 50%; transform: translateY(-50%) scale(0); transition: .4s ease; display: inline-block;
}

/* ── FILTER ── */
.filter-controls li { cursor: pointer; }
.filter-controls li.mixitup-control-active { color: #2bc4ed !important; }

/* ── SLICK ARROWS ── */
.slick-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 9;
	height: 70px; width: 70px; border-radius: 50%;
	background: rgba(58, 171, 195, 0.5); color: #fff; border: 0;
	line-height: 70px; font-size: 35px;
}
.slick-arrow::before {
	position: absolute; content: ''; height: 10px; width: 10px;
	background: transparent; top: 50%; transform: translateY(-50%) rotate(-45deg); transition: .2s ease;
}
.slick-arrow::after {
	position: absolute; content: ''; height: 2px; width: 25px;
	top: 50%; transform: translateY(-50%); background: #fff; transition: .2s ease;
}
@media (max-width: 575px) { .slick-arrow { display: none; } }
.slick-arrow:focus  { outline: 0; }
.slick-arrow:hover  { background: #2bc4ed; }
.prevArrow          { left: 0; }
.prevArrow::before  { border-left: 2px solid #fff; border-top: 2px solid #fff; right: 35px; }
.prevArrow::after   { right: 20px; }
.nextArrow          { right: 0; }
.nextArrow::before  { border-right: 2px solid #fff; border-bottom: 2px solid #fff; left: 35px; }
.nextArrow::after   { left: 20px; }

.testimonial-slider .nextArrow,
.testimonial-slider .prevArrow { opacity: 0; transition-delay: 1s; }
.testimonial-slider:hover .nextArrow { opacity: 1; right: -100px; transition-delay: 0s; }
.testimonial-slider:hover .prevArrow { opacity: 1; left: -100px; transition-delay: 0s; }

/* ── SLICK DOTS ── */
.slick-dots {
	padding-left: 0; text-align: center; position: absolute;
	bottom: -185px; left: 0; right: 0; z-index: 9;
}
.slick-dots li {
	display: inline-block; height: 70px; width: 70px; border-radius: 50%;
	cursor: pointer; margin: 0 20px; transition: .2s ease;
	box-shadow: 0 15px 39px 0 rgba(8, 18, 109, .1);
}
.slick-dots li img         { height: 70px; width: 70px; border-radius: 50%; }
.slick-dots li.slick-active{ transform: scale(1.2); }

/* ── BG QUOTE ── */
.bg-quote { position: relative; }
.bg-quote::before {
	position: absolute; content: "\f10d";
	font-family: "Font Awesome 6 Free"; font-weight: 900; /* FA6 fix */
	font-size: 150px; color: rgba(134, 195, 58, .3);
	top: -10px; line-height: 1; left: 50%; transform: translateX(-50%);
}

/* ── BLOCKQUOTE ── */
blockquote {
	padding: 30px 40px; font-style: italic; color: #172231;
	border-left: 2px solid #2bc4ed; box-shadow: 0 15px 39px 0 rgba(8, 18, 109, .1);
	position: relative; margin-bottom: 40px;
}
blockquote::before {
	position: absolute; content: "\f10d";
	font-family: "Font Awesome 6 Free"; font-weight: 900; /* FA6 fix */
	font-size: 100px; color: rgba(134, 195, 58, .3);
	top: 50%; left: 50%; transform: translate(-50%, -50%); font-style: normal;
}
blockquote p { font-style: normal; margin-top: 10px; }

/* ── CLIENTS ── */
.clients-logo { text-align: center; position: relative; height: 120px; width: 180px; }
.clients-logo:hover .white { opacity: 0; }
.clients-logo:hover .primary { opacity: 1; }
.clients-logo .white,
.clients-logo .primary {
	position: absolute; left: 0; top: 50%; right: 0;
	transform: translateY(-50%); text-align: center; padding: 0 10px;
}
.clients-logo .white   { opacity: 1; }
.clients-logo .primary { opacity: 0; }

/* ── LIST STYLED ── */
.list-styled { padding-left: 0; }
.list-styled li { position: relative; padding-left: 20px; }
.list-styled li::before {
	position: absolute; content: "\f105";
	font-family: "Font Awesome 6 Free"; font-weight: 900; /* FA6 fix */
	font-size: 14px; left: 0; top: 1px; color: #2bc4ed; transition: .3s ease;
}
.list-styled li:hover::before  { color: #2bc4ed !important; }
.list-styled li:hover a        { text-decoration: underline; }
.list-styled li.text-light::before { color: #ddd; }
.list-styled.style-circle li::before { content: "\f10c"; }

/* ── NEWSLETTER ── */
.newsletter-form { background: rgba(255,255,255,.1); border-radius: 35px; }
.newsletter-form:focus { background: rgba(255,255,255,.1); }
.newsletter-form::placeholder { color: #fff; }
.btn-subscribe {
	position: absolute; top: 0; right: 0;
	border-top-left-radius: 0; border-bottom-left-radius: 0; height: 40px;
}

/* ── PRICING ── */
.pricing-table {
	transition: .2s ease; position: relative;
}
.pricing-table::before {
	position: absolute; content: ''; height: 100%; width: 100%; top: 0; left: 0;
	background: url(../images/backgrounds/pricing-table-bg.png);
	background-repeat: no-repeat; background-size: cover;
}
.pricing-table.active { background: #2bc4ed; color: #fff; }
.pricing-table.active h2,
.pricing-table.active h3,
.pricing-table.active h4,
.pricing-table.active h5,
.pricing-table.active h6 { color: #fff; }

.pricing-wrapper { position: relative; }
.pricing-wrapper > li { backface-visibility: hidden; }
.pricing-wrapper .is-visible { position: relative; z-index: 5; }
.pricing-wrapper .is-hidden  { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; transform: rotateY(180deg); }
.pricing-wrapper .is-selected { z-index: 3 !important; }

/* ── CARDS ── */
.card-type {
	position: absolute; top: 30px; left: 30px;
	padding: 3px 10px; color: #fff; background: #2bc4ed; z-index: 1;
}
.card-type2 {
	position: absolute; top: 5px; left: 5px;
	color: #fff; background: #00000073; z-index: 1; padding: 5px; font-size: 12px;
}
.max-height-135 { max-height: 135px !important; }
.news-div .card-title:hover { color: #216c80; }
.card-meta { font-size: 14px; }
.card-image { height: 250px; width: auto; position: relative; display: block; margin: auto; }

/* ── PAGINATION ── */
/* BS5: pagination uses .page-link — override style */
.pagination .page-item { margin: 5px; }
.pagination .page-item .page-link {
	border-radius: 50%; background: #fff; color: #2bc4ed;
	border: 1px solid #2bc4ed; box-shadow: none;
	height: 50px; width: 50px; line-height: 45px; text-align: center; padding: 0;
}
.pagination .page-item.active .page-link { background: #2bc4ed; color: #fff; }

/* ── SHADOWS / TEXT ── */
.text-shadow   { text-shadow: 1px 1px 5px #000000; }
.text-shadow-2 { text-shadow: 1px 1px 1px #353535; }
.shadow-box    { background-color: #0000004d; padding: 10px; }
.box-shadow    { box-shadow: 0 15px 39px 0 rgba(8, 18, 109, .1); }

/* ── ACCORDION ── */
/* BS5 uses its own accordion — keep custom panel style for legacy use */
.panel-heading { position: relative; cursor: pointer; }
.panel-heading[data-bs-toggle="collapse"]:after {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f105";
	position: absolute; color: #2bc4ed; font-size: 18px; line-height: 22px;
	right: 20px; top: calc(50% - 10px);
	transform: rotate(-90deg); transition: transform .3s;
}
.panel-heading[data-bs-toggle="collapse"].collapsed:after {
	transform: rotate(90deg);
}

/* ── HR SHADOW ── */
.hr-shadow {
	border: none; height: 50px; width: 90%; margin-top: 0;
	border-bottom: 1px solid #1f1209;
	box-shadow: 0 20px 20px -20px #333;
	margin: -50px auto 10px;
}

/* ── MISC ── */
.commitee:hover    { color: #fff; }
.mission-aims-border { border: 1px dashed #2bc4ed; padding-left: 10px; padding-top: 5px; }
.hover-zoom        { transition: .2s ease-out; }
.hover-zoom:hover  { transform: scale(0.97); }

/* Font sizes */
.font10 { font-size: 10px; } .font12 { font-size: 12px; } .font14 { font-size: 14px; }
.font16 { font-size: 16px; } .font18 { font-size: 18px; } .font20 { font-size: 20px; }
.font22 { font-size: 22px; } .font24 { font-size: 24px; } .font26 { font-size: 26px; }
.font28 { font-size: 28px; } .font32 { font-size: 32px; }

/* Border radius */
.border-radius-3  { border-radius: 3px; }
.border-radius-5  { border-radius: 5px; }
.border-radius-7  { border-radius: 7px; }
.border-radius-15 { border-radius: 15px; }
.center-div       { float: none; margin: 0 auto; }

/* ── COMMENT BOX ── */
.detailBox  { border: 1px solid #bbb; }
.titleBox   { background-color: #fdfdfd; padding: 10px; }
.titleBox label { color: #444; margin: 0; display: inline-block; }
.commentBox { padding: 10px; border-top: 1px dotted #bbb; }
.commentBox .form-group:first-child,
.actionBox  .form-group:first-child  { width: 80%; }
.commentBox .form-group:nth-child(2),
.actionBox  .form-group:nth-child(2) { width: 18%; }
.actionBox .form-group * { width: 100%; }
.commentList {
	padding: 0 12px 15px 15px; list-style: none;
	max-height: 350px; overflow: auto; width: 100%; margin-top: 15px;
}
.commentList li { margin: 0; }
.commentList li > div { display: table-cell; }
.commenterImage { width: 30px; margin-right: 5px; height: 100%; float: left; }
.commenterImage img { border-radius: 50%; height: 32px; width: 32px; }
.commentText .comment {
	margin: 0; background-color: #2bc4ed; color: #fff;
	padding: 1px 5px; font-size: 14px; border-radius: 0 8px 8px 8px;
}
.commentText .reply {
	background-color: #f3f3f3; color: #000; padding: 1px 5px 1px 8px;
	font-size: 12px; border-radius: 8px 0 8px 8px; width: 90%; margin-top: 8px;
}
.sub-text  { color: #aaa; font-family: verdana; font-size: 11px; }
.actionBox { border-top: 1px dotted #bbb; padding: 10px 0 0 0; }

/* ── ALERTS ── */
/* BS5 alerts are updated — keep italic style */
.alert-danger, .alert-success, .alert-info { font-style: italic; }
.text-gray-light { color: #b6b6b6; }
.italic { font-style: italic; }
.error  { font-style: italic; }
input[type='file'] { color: #b6b6b6; font-style: italic; font-size: 14px; }

/* ── TESTIMONIALS ── */
.testimonial-section {
	background-image: url(../images/backgrounds/testimonials4.png);
	background-repeat: no-repeat; background-size: cover; background-position-y: bottom;
}
.testimonial { margin: 0 15px; padding-top: 15px; }
.testimonial .content {
	padding: 10px; border-radius: 3px; position: relative;
	background: #f4fdff; border: 1px dashed #2bc4ed;
}
.testimonial .testimonial-pic {
	width: 80px; height: 80px; float: left;
	position: relative; top: -25px; margin-right: 15px;
}
.testimonial .testimonial-pic img {
	width: 100%; height: auto;
	border: 1px dashed #2bc4ed; border-radius: 50%;
}
.testimonial .testimonial-prof  { color: #fff; margin-bottom: 10px; padding-left: 30%; }
.testimonial .testimonial-title { font-size: 20px; text-transform: capitalize; font-weight: bold; margin: 0; color: #2bc4ed; }
.testimonial .testimonial-post  { font-size: 12px; color: #464d57; }
.testimonial .description       { font-size: 14px; line-height: 1.3; color: #464d57; }
.testimonial .social-links      { padding: 0; margin: 0; list-style: none; }
.testimonial .social-links li   { display: inline-block; margin-right: 10px; }
.testimonial .social-links li a { color: #fff; }

/* Owl Carousel dots — BS5 compatible */
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span { background: #2bc4ed; }
.owl-theme .owl-controls .owl-page span { background: #333; opacity: 1; width: 10px; height: 10px; margin: 5px 6px; }

@media (max-width: 767px) {
	.testimonial            { text-align: center; }
	.testimonial .testimonial-pic { float: none; margin: 0 auto; }
	.testimonial .testimonial-prof{ padding-left: 0; }
    .hero-slide-bg { min-height: 320px; }
    .hero-slide-bg h2 { font-size: 26px; }
    .hero-slide-bg h4 { font-size: 16px; }
    .carousel-control-prev,
    .carousel-control-next { display: none; }
}
@media (max-width: 480px) {
    .hero-slide-bg { min-height: 260px; }
}
/* ── IMAGES ── */
.img-bw         { filter: grayscale(100%); }
.img-bw:hover   { filter: grayscale(0%); }

/* ── RESOURCES ── */
/* BS5: nav-pills updated */
.resources-pills li { position: initial !important; }
.resources-pills .nav-link.active,
.resources-pills .show > .nav-link {
	color: #2bc4ed !important;
	background-color: #252d39 !important;
	font-weight: bold;
}
.resources-pills .nav-link {
	color: #fff !important;
	background-color: #2bc4ed !important;
	font-weight: bold;
}

/* BS5: removed position:initial override that breaks dropdowns */
/* .col-md-12 { position: initial !important; } ← REMOVED — breaks BS5 dropdowns */

/* ── FLAGS ── */
.flag-img { width: 16px; height: 11px; border: 1px solid #fff; border-radius: 1px; }

/* ── MISC SIZES ── */
.height65     { height: 65px; }
.img270x100   { height: 270px; width: 100%; }
.gallery-cover{ height: 180px; width: 100%; }
.hidden       { display: none; }