/* ========================================
   ????? ??????
   ?????????: #c97234 | ?????-?????: #0d4a6d | ?????: #ffffff
   ======================================== */

/* ========================================
   1. INTRO - ????? ? ?????????
   ======================================== */
section.intro {
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
    padding-top: 100px !important;
}

/* ??? subtitle ? ????????? ????????? ????????? */
section.intro span.h6,
section.intro span.text-color,
section.intro .subtitle {
    color: #c97234 !important;
}

.intro-item {
    transition: all 0.4s ease !important;
    border-radius: 8px !important;
}

.intro-item i {
    transition: all 0.3s ease !important;
}

.intro-item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(13, 74, 109, 0.15) !important;
    background: #ffffff !important;
}

.intro-item:hover i.color-one,
.intro-item:hover i {
    color: #c97234 !important;
    transform: scale(1.2) !important;
}

/* ========================================
   2. SERVICE - ??????-?????
   ======================================== */
section.service {
    background: #f5f8f9 !important;
    padding: 100px 0 !important;
}

/* ??? subtitle ????????? */
section.service span.h6,
section.service span.text-color,
section.service .subtitle {
    color: #c97234 !important;
}

section.service .service-item {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 40px 30px 40px 100px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 200px !important;
    position: relative !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
}

section.service .service-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 60px rgba(201, 114, 52, 0.2) !important;
}

section.service .service-item i {
    color: #c97234 !important;
    font-size: 50px !important;
    position: absolute !important;
    left: 30px !important;
    top: 40px !important;
    transition: all 0.3s ease !important;
}

section.service .service-item:hover i {
    transform: scale(1.15) rotate(5deg) !important;
    color: #0d4a6d !important;
}

section.service .service-item h4 {
    color: #0d4a6d !important;
    margin-bottom: 15px !important;
}

section.service .service-item p {
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* ========================================
   3. ABOUT - ????? ? ??????? ????
   ======================================== */
section.about,
section.about-2 {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%) !important;
}

/* ??? subtitle ????????? */
section.about span.h6,
section.about span.text-color,
section.about .subtitle,
.about-item span.h6 {
    color: #c97234 !important;
}

/* ========================================
   4. CTA (CONTACT) - ??????-?????????
   ======================================== */
section.cta {
    background: linear-gradient(135deg, #fff5eb 0%, #ffe4cc 100%) !important;
    padding: 100px 0 !important;
}

/* ??? subtitle ????????? */
section.cta span.h6,
section.cta span.text-color,
.cta-item span.h6 {
    color: #c97234 !important;
}

/* ========================================
   5. TESTIMONIAL - ?????
   ======================================== */
section.testimonial {
    background: #ffffff !important;
}

/* ========================================
   6. PRICING - ??????-?????
   ======================================== */
section.pricing {
    background: #f5f8f9 !important;
}

/* ========================================
   7. COUNTER - ? ??????? ????????????
   ======================================== */
.bg-counter {
    position: relative;
}

.bg-counter::before {
    background: rgba(13, 74, 109, 0.85) !important;
}

.counter-item .counter-stat {
    color: #c97234 !important;
}

/* ========================================
   8. FOOTER - ?????-?????
   ======================================== */
footer.footer {
    background: #0d4a6d !important;
    color: #ffffff !important;
}

/* ??? ?????? ? ?????? */
footer.footer a {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

footer.footer a:hover {
    color: #c97234 !important;
}

/* ????????? ? ?????? */
footer.footer h4,
footer.footer h5,
footer.footer h6 {
    color: #ffffff !important;
}

/* ????? ? ?????? */
footer.footer p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Copyright ?????? */
footer.footer .footer-btm {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

footer.footer .copyright {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========================================
   9. BLOG ??????
   ======================================== */
.latest-blog {
    background: #f5f8f9 !important;
}

.latest-blog::before {
    background: rgba(13, 74, 109, 0.9) !important;
}

/* ========================================
   10. PAGE TITLE
   ======================================== */
.page-title {
    background-size: cover !important;
    background-position: center !important;
}

.page-title::before {
    background: rgba(13, 74, 109, 0.7) !important;
}

/* ????????? ?? page-title - ????????? */
.page-title h1,
.page-title .block h1 {
    color: #c97234 !important;
}

/* Subtitle ?? page-title - ????????? */
.page-title span,
.page-title .block span {
    color: #c97234 !important;
}

/* ????? ? ?????? ?? page-title ???????? ?????? */
.page-title p,
.page-title .block p,
.page-title a {
    color: #ffffff !important;
}

/* ========================================
   ?????????????? ?????????
   ======================================== */

/* ??????? ???????? ????? ???????? */
section {
    transition: background 0.3s ease !important;
}

/* ????????? H1 ?? ?????? background ? ????????????? - ????????? */
.bg-1 h1,
.bg-2 h1,
section[class*="bg-"] h1,
.page-title h1,
.slider h1 {
    color: #c97234 !important;
}

/* ??? ????????? ?? page-title ????????? */
.page-title .text-lg,
.page-title .text-capitalize {
    color: #c97234 !important;
}

/* ?????????????? ????? ????? ???????? - ????????? */
section.intro::after,
section.service::after {
    display: none;
}

/* Scroll-to-top ?????? ?? ?????-????? ???? */
.scroll-to-top {
    background: #0d4a6d !important;
}

.scroll-to-top:hover {
    background: #c97234 !important;
}

/* ========================================
   11. ENHANCED HOVER EFFECTS FOR CARDS
   ======================================== */

/* Blog Cards */
.card {
    transition: all 0.35s ease !important;
}

.card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

.card:hover h3 a,
.card:hover .card-title a {
    color: #c97234 !important;
}

/* ========================================
   ????????????
   ======================================== */

/* Tablet */
@media (max-width: 992px) {
    section.service {
        padding: 80px 0 !important;
    }
    
    section.cta {
        padding: 80px 0 !important;
    }
    
    section.service .service-item {
        padding: 30px 25px 30px 90px !important;
        min-height: 180px !important;
    }
    
    section.service .service-item i {
        left: 25px !important;
        font-size: 40px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    section.service {
        padding: 60px 0 !important;
    }
    
    section.cta {
        padding: 60px 0 !important;
    }
    
    footer.footer {
        padding: 60px 0 30px !important;
    }
    
    section.service .service-item {
        padding: 25px 20px 25px 80px !important;
        min-height: 160px !important;
    }
    
    section.service .service-item i {
        left: 20px !important;
        font-size: 38px !important;
        top: 30px !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    section.service .service-item {
        padding: 20px 15px 20px 70px !important;
        min-height: auto !important;
    }
    
    section.service .service-item i {
        left: 15px !important;
        font-size: 35px !important;
        top: 25px !important;
    }
}