/********** Custom CSS **********/


/*** Common ***/
:root {
  --primary: #ffbf00;
}

.text-primary {
	color: #ffbf00 !important;
	text-align: right;
	line-height: 1.2;
}

.ps-0, .p-5 {
	outline: 1px solid #ffbf00;
    outline-offset: -15px;
}

.btn-primary {
	background-color: #ffbf00;
	border-color: #ffbf00;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.75);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active:focus {
	background-color: #b38600;
	border-color: #b38600;
	box-shadow: 0 0 0 .25rem #b38600;
}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
	background-color: #b38600;
	border-color: #b38600;
	box-shadow: 0 0 0 .25rem #b38600;
}

/*** Navbar ***/
.navbar {
	display: flex;
    justify-content: space-between;
    width: 100%;
	padding: 1rem 3rem !important;
	background-color: rgba(25,28,36,0.75) !important;
}

.navbar-brand {
	margin: 0 auto !important;
	text-align: center;
}

.navbar .btn.btn-primary.ss {
	line-height: 0;
}

.navbar a {
	display: none !important;
}

@media (max-width: 768px) {
	.navbar.ss {
		padding: 1rem 1.5rem !important;
	}
	
	.navbar-brand.ms-4 {
		margin: 0px !important;
		width: 100% !important;
	}
	
	.navbar img {
		width: 100%;
	}
	
	.navbar a {
		width: 100%;
		display: initial !important;
	}
	
	@keyframes ring {
		0% { 
			transform: rotate(0deg) scale(1); 
		}
		25% { 
			transform: rotate(15deg) scale(1.1); 
		}
		50% { 
			transform: rotate(-15deg) scale(1.1); 
		}
		75% { 
			transform: rotate(5deg) scale(1.05); 
		}
		100% { 
			transform: rotate(0deg) scale(1); 
		}
	}

	@keyframes pulse {
		0% {
			box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
		}
		70% {
			box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
		}
	}

	.fa-phone {
		animation: ring 0.8s ease-in-out infinite, pulse 1.2s ease-out infinite;
		transform-origin: center;
		border-radius: 50%;
		padding: 5px;
		display: inline-block;
	}
}


/*** Carousel ***/
.carousel-item img {
	height: calc(100vh - 102px);
}

.carousel-caption {
	background: rgba(0, 0, 0, .55);
}

.carousel-caption .text-white {
	text-align: center;
}

@media (max-width: 768px) {
	#header-carousel .carousel-item {
		height: calc(100vh - 103.60px);
	}
}


/*** About us ***/
img.w-75.ss {
	width: 100% !important;
	outline: 1px solid #ffbf00;
	outline-offset: -15px;
}

@media (max-width: 768px) {
	.w-75.ss {
		width: 100% !important;
	}
	
	.col-lg-6.ss {
		margin-top: 10px;
	}
}


/*** Services ***/
.d-inline-block.ss {
	margin-left: 12px;
	width: calc(100% - 24px);
	padding: 20px !important;
	text-align: center;
	font-size: calc(1.275rem + .3vw);
	font-family: "Oswald",sans-serif;
	font-weight: 600;
	line-height: 1.2;
	color: #fff !important;
}

.service-item {
	height: 300px !important;
	min-height: 300px;
	padding: 40px !important;
}

.service-item .ps-4 {
	padding-left: initial !important;
}

.service-item p {
	margin-bottom: 0px;
}

.service-item .bg-dark {
	display: none !important;
}

.service-item .btn {
	display: none !important;
}

@media (max-width: 768px) {
	.service-item .ps-4 {
		padding-left: 0rem !important;
	}
	
	.d-inline-block {
		padding: 20px !important;
	}
	
	.service-item {
		height: auto !important;
	}
}


/*** Contact ***/
.text-uppercase.ss {
	margin-top: 24px !important;
}

.mb-2 {
  margin-bottom: 1rem !important;
}

a.link {
	color: #6C7293 !important;
}

.form-control {
	color: #FFF;
}

.form-floating > .form-control {
	height: 70px;
}

.form-floating > label {
	padding: 22px 12px;
}

.form-floating > .form-control:not(:placeholder-shown) {
	padding-top: 36px !important;
}

.form-floating.ss > .form-control {
	padding: 16px .75rem;
}

.form-floating.ss > .form-control {
	padding: 22px .75rem;
}

.flatpickr-calendar {
	border-radius: 0px !important;
}

.form-control:invalid {
    border-color: #c81313;
}

.form-control:valid {
    border-color: #6C7293;
}

.form-control:invalid {
    border-color: #c81313 !important;
}

.form-control:valid {
    border-color: #6C7293 !important;
}

.form-control:invalid {
	border-color: #c81313 !important;
}

.form-control:valid {
	border-color: #6C7293 !important;
}

.form-floating:has(.form-control:valid) label {
	color: #6C7293 !important;
}

.form-control {
	background-color: #191C24 !important;
	border-radius: 0px !important;
}

.form-control::placeholder {
	color: #6C7293 !important;
	opacity: 0.5;
}

.form-select {
	background-color: #191C24 !important;
	color: #FFF !important;
	height: 70px !important;
	padding-top: 36px !important;
	border-radius: 0px;
}

.form-select option {
	background-color: #191C24 !important;
	color: #6C7293 !important;
	padding: 8px;
	border-radius: 0px;
}

.form-select option:checked {
	color: #FFF !important;
}

.form-select option:hover {
	background-color: #569ff7 !important;
	color: #FFF !important;
}

.form-select:focus option:hover {
	background-color: #569ff7 !important;
	color: #FFF !important;
}

@media (max-width: 768px) {
	.bg-secondary {
		padding: 36px !important;
	}
	
	.bg-secondary .py-2 h6.text-uppercase.mb-0 {
		max-width: 50% !important;
	}
}


/*** Footer ***/
.footer {
	padding: 16px !important;
}


/*** Back to top & Floating Contact Buttons ***/
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 50px;
	height: 50px;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 99;
	background-color: #ffbf00;
	border: none;
	color: #FFF;
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.back-to-top:hover,
.back-to-top:active,
.back-to-top:focus {
	background-color: #ffbf00;
	border-color: #ffbf00;
	box-shadow: none;
}

/* Floating contact buttons container */
.floating-buttons {
	position: fixed;
	right: 24px;
	z-index: 98;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Position each button above back-to-top */
.floating-buttons {
	bottom: 86px; /* Above back-to-top (50px + 24px + gap) */
}

/* Individual floating button style */
.floating-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	text-decoration: none;
	font-size: 24px;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.75);
}

/* Phone button */
.btn-phone {
	background-color: #25D366; /* WhatsApp green, but we'll use specific colors */
	color: #fff;
}

/* Specific colors for each button */
.floating-btn.btn-phone-call {
	background-color: #34B7F1; /* Telegram blue / Phone blue */
	color: #fff;
}

.floating-btn.btn-viber {
	background-color: #7360F2; /* Viber purple */
	color: #fff;
}

.floating-btn.btn-whatsapp {
	background-color: #25D366; /* WhatsApp green */
	color: #fff;
}

.floating-btn:hover {
	color: #fff;
}

/* Google Calendar floating button */
.floating-btn.btn-calendar {
    background-color: rgb(200, 19, 19) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.floating-btn.btn-calendar:hover {
    background-color: #b38600;
    color: #fff;
}

.hur54b {
	padding: 15px !important;
}

.Xfsokf {
	top: 25px !important;
	right: 25px !important;
}

.uE25ec {
	display: none !important;
}

.Xfsokf {
	height: 50px !important;
	border-radius: 100% !important;
}

.L0Dvsd {
	margin-right: 0px !important;
}

#google-calendar-container > div,
#google-calendar-container > a,
#google-calendar-container button {
	width: 100% !important;
	height: 100% !important;
	min-width: 44px !important;
	min-height: 44px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: rgb(200, 19, 19) !important;
	color: #fff !important;
	text-decoration: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#google-calendar-container > div span,
#google-calendar-container > a span,
#google-calendar-container button span {
	display: none !important;
}

#google-calendar-container > div::before,
#google-calendar-container > a::before,
#google-calendar-container button::before {
	content: "\f073";
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	font-size: 20px;
}

/*** Tooltips for floating buttons ***/
.floating-btn {
    position: relative;
}

.floating-btn .tooltip-text {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #191C24;
    color: #ffbf00;
    padding: 8px 15px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    text-shadow: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 100;
}

.floating-btn .tooltip-text::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
	border-width: 6px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #191C24;
}

.floating-btn .tooltip-text.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .floating-btn .tooltip-text {
        right: 60px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
        white-space: nowrap;
    }
    
    .floating-btn .tooltip-text::after {
        right: -16px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
        border-color: transparent transparent transparent #191C24;
    }
	
	.back-to-top {
		right: 16px;
		bottom: 16px;
		width: 44px;
		height: 44px;
		font-size: 18px;
	}
	
	.floating-buttons {
		right: 16px;
		bottom: 70px;
		gap: 10px;
	}
	
	.floating-btn {
		width: 44px;
		height: 44px;
		font-size: 20px;
	}
}