/* ------------------------------------------------ */
/* 1. Imports */
/* ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ------------------------------------------------ */
/* 2. Root Variables */
/* ------------------------------------------------ */
:root {
    --bs-dark-rgb: 247, 156, 0;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid rgb(var(--bs-dark-rgb));
    /* istədiyin rəng */
}

/* ------------------------------------------------ */
/* 3. Reset Styles */
/* ------------------------------------------------ */
::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #fff9fc;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--bs-dark-rgb));
}

body {
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

input,
select,
textarea,
button {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

textarea {
    resize: none;
}

/* ------------------------------------------------ */
/* 4. Utility Classes */
/* ------------------------------------------------ */
.transition-all {
    transition: all .3s ease;
}

.backdrop-blur {
    backdrop-filter: blur(10px);
}

.bg-fixed-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ------------------------------------------------ */
/* 5. General Components */
/* ------------------------------------------------ */
.breadcrumb-section {
    background-image: url(/images/backgrounds/breadcrumb-bg.webp);
}

.dark-overlay::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    z-index: -1;
    position: absolute;
    background: rgba(0, 0, 0, .5);
}

.text-opacity-75:hover {
    --bs-text-opacity: 1;
}

.border-opacity-25:hover {
    --bs-border-opacity: .5;
}

.bg-opacity-10:hover {
    --bs-bg-opacity: .25;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}

.accordion-button:not(.collapsed) {
    background-color: rgb(var(--bs-dark-rgb));
    color: rgb(var(--bs-white-rgb)) !important;
}

/* Header */
header .social-link {
    width: 28px;
    height: 28px;
}

/* ------------------------------------------------ */
/* 6. Navbar */
/* ------------------------------------------------ */
.navbar {
    box-shadow: 0px 4px 4px 4px rgb(0 0 0 / 8%);
}

.navbar-logo {
    height: 48px;
}

.dropdown-item:hover {
    padding-left: 2rem !important;
}

/* ------------------------------------------------ */
/* 8. Hero Section */
/* ------------------------------------------------ */
.hero {
    background-image: linear-gradient(to right, #2a1700, transparent), url(/images/backgrounds/hero-bg.webp);
}

.hero-title {
    text-shadow: 0px 4px 4px rgba(var(--bs-dark-rgb), .5);
}

/* .hero-text {
    max-width: 600px;
} */

/* Feature item inside Hero */
.feature-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: .125rem;
    background: linear-gradient(45deg,
            transparent,
            rgba(var(--bs-white-rgb), .5),
            transparent);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: border-animate 2s linear infinite;
}

@keyframes border-animate {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.feature-item:hover {
    transform: translateX(-12px);
    background: rgba(255, 255, 255, .25) !important;
}

.feature-icon {
    width: 50px;
    height: 50px;
}

/* Hero buttons hover effects */
.button:hover {
    transform: translateY(-4px);
}

.button:hover i {
    transform: translateX(4px);
}

/* ------------------------------------------------ */
/* 9. Responsive Design */
/* ------------------------------------------------ */
@media (min-width: 0px) {
    .hero-title {
        font-size: 2rem;
    }
}

@media (min-width: 576px) {
    .hero-title {
        font-size: 2.4rem;
    }
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 2.8rem;
    }
}

@media (min-width: 992px) {
    .hero {
        height: calc(100vh - 150px);
    }

    .hero-title {
        font-size: 3.2rem;
    }
}

@media (min-width: 1200px) {
    .hero-title {
        font-size: 3.6rem;
    }
}

@media (min-width: 1400px) {
    .hero-title {
        font-size: 4rem;
    }
}

/* ------------------------------------------------ */
/* 10. Features Section */
/* ------------------------------------------------ */
.info-icon {
    min-width: 70px;
    height: 70px;
}

/* Slick carousel customization */
.slick-slide {
    margin-inline: 1rem;
}

.slick-dots {
    bottom: -3rem;
}

.home section:nth-child(even) .slick-dots li button:before,
body:not(.home) .slick-dots li button:before {
    color: rgb(var(--bs-dark-rgb)) !important;
}

.slick-dots li button:before {
    color: rgb(var(--bs-white-rgb)) !important;
}

/* ------------------------------------------------ */
/* 12. Extra Components */
/* ------------------------------------------------ */
.detail-icon {
    min-width: 36px;
    height: 36px;
}

.icon-offset {
    top: 36px;
    left: 36px;
}

/* Fabs */
/* Whatsapp */
.fab {
    position: fixed;
    display: none;
    width: 40px;
    height: 40px;
    z-index: 999;
    right: 30px;
}

.fab i {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

.fab.whatsapp {
    bottom: 70px;
    background-color: #2CD46B;
}

.fab.go-to-top {
    bottom: 20px;
}

.partner img {
    width: 200px;
    height: 64px;
    object-fit: contain;
}


.breadcrumb-section .border-box {
    height: 2px;
    width: 200px;
}

.breadcrumb-section .border-box::before {
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    content: "";
    position: absolute;
    background-color: rgb(var(--bs-dark-rgb));
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff;
    background-color: rgb(var(--bs-dark-rgb));
}

.footer-links a:hover {
    padding-left: 4px;
}

.staff {
    width: 120px;
    height: 120px;
}

/* Loader Styles */

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loader img {
    height: 72px;
    animation: heartbeat 1s infinite;
    transform-origin: center;
}

/* Heartbeat */
@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}