/*Pages*/
main {
    min-height: 100vh;
}

.page-title {
    margin: auto;
    margin-top: var(--space-8);
    color: var(--color-accent);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    text-align: center;
}

.page-description {
    margin: auto;
    color: var(--color-primary);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    text-align: center;
}

.page-call-btn {
    width: max-content;
    display: block;
    margin: auto;
    padding: var(--space-4);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    text-align: center;
    color: var(--color-text-main);
    transition: all var(--transition-slow);
}

.page-call-btn:hover {
    transform: translateY(calc(-1 * var(--space-1)));
}

/*Home*/

.home-img {
    margin: auto;
    max-height: var(--container-xl);
}

/*Service Cards */
.home-service-cards-title {
    display: block;
    margin: auto;
    margin-top: var(--space-8);
    text-align: center;
    font-size: var(--fs-2xl);
    color: var(--color-primary);
}

.home-service-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: var(--space-8);
}

.home-service-card {
    border-radius: var(--radius-md);
    flex: 1 1 calc(33.33% - var(--space-8));
    text-align: center;
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-base);
    transition: all var(--transition-normal);
    cursor: pointer;
    padding: var(--space-4) var(--space-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.home-service-card h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-2);
}

.home-service-card:hover {
    transform: translateY(calc(-1 * var(--space-2)));
    box-shadow: var(--shadow-hover);
}

.home-service-card .card-icon {
    font-size: var(--fs-3xl);
}

/*Board Section*/
.home-hero-md-board {
    margin: 0 -var(--space-8);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--color-primary);
    height: var(--container-sm);
    width: 100%;
    padding: var(--space-8);
}

.home-hero-md-board-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-2);
}

.home-hero-md-board-left h4 {
    font-size: var(--fs-2xl);
    color: var(--color-text-light);
}

.home-hero-md-board-left p {
    font-size: var(--fs-xs);
    color: var(--color-text-light);
}

.home-hero-md-board-right-btn {
    display: flex;
    border: var(--space-0) solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-base);
    color: var(--color-text-main);
    padding: var(--space-3) var(--space-6);
    font-weight: var(--fw-bold);
    text-align: center;
    transition: all var(--transition-slow);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-lg);
}

.home-hero-md-board-right-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-text-main);
}

/* Stats section */
.home-hero-stats-container {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-4);
    margin-top: var(--space-16);
}

.home-hero-stat-card {
    background-color: var(--color-bg-card);
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-base);
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.home-hero-stat-card:hover {
    transform: translateY(calc(-1 * var(--space-3)));
    box-shadow: var(--shadow-hover);
}

.home-hero-stat-number {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.home-hero-stat-text {
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    font-weight: var(--fw-bold);
}

/*FAQ Home Page*/
.faq-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-16);
    margin: var(--space-8);
}

.faq-title {
    text-align: center;
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-8);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.faq-item {
    background: var(--color-bg-card);
    border-left: var(--space-1) solid var(--color-primary);
    overflow: hidden;
    box-shadow: var(--shadow-base);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    background-color: var(--color-bg-card);
    transition: background-color var(--transition-fast);
    width: 100%;
    text-align: left;
}

.faq-question:hover {
    background-color: var(--color-bg-body);
}

.faq-question svg {
    width: var(--space-6);
    height: var(--space-6);
    color: var(--color-primary);
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
    background-color: var(--color-bg-card);
}

.faq-answer p {
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-base);
    color: var(--color-text-main);
    line-height: 1.6;
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 80rem;
}

.faq-question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/*Services*/
.services-grid {
    margin: var(--space-8) var(--space-8) var(--space-16) var(--space-8);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.service-card {
    flex: 1;
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-base);
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(calc(-1 * var(--space-2)));
    box-shadow: var(--shadow-hover);
}

.service-icon {
    font-size: var(--fs-2xl);
    line-height: 1;
}

.service-card h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    margin-bottom: var(--space-2);
}

.service-card p {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/*Blog*/
.blog-section {
    margin: var(--space-16) var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
}

.blog-card {
    display: flex;
    width: 100%;
    max-width: var(--container-4xl);
    background-color: var(--color-bg-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-base);
    overflow: hidden;
    transition: transform var(--transition-normal);
}

.blog-card:hover {
    transform: translateY(-var(--space-1));
}

.card-image-wrapper {
    width: 45%;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes wobble {

    0%,
    100% {
        transform: scale(1.05) rotate(0deg);
    }

    25% {
        transform: scale(1.05) rotate(1deg);
    }

    50% {
        transform: scale(1.05) rotate(-1deg);
    }

    75% {
        transform: scale(1.05) rotate(0.5deg);
    }
}

.blog-card:hover .card-image-wrapper img {
    animation: wobble 1s ease-in-out infinite;
}

.card-content {
    width: 55%;
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
}

.card-title {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--fs-2xl);
    color: var(--color-accent);
}

.card-subtitle {
    font-size: var(--fs-base);
    color: var(--color-text-main);
    margin: 0 0 var(--space-4) 0;
}

.divider {
    height: var(--space-1);
    width: var(--space-10);
    background-color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.card-excerpt {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-text-muted);
    margin: var(--space-2) 0 var(--space-6) 0;
    flex-grow: 1;
}

.card-tags {
    height: var(--space-10);
    width: auto;
    display: flex;
}

.tag {
    justify-content: center;
    align-content: center;
    background-color: var(--color-bg-icon);
    color: var(--color-icon);
    padding: var(--space-1) var(--space-6);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.tag:hover {
    color: var(--color-accent);
}

/*BlogPost*/
.blogPost-card {
    margin: var(--space-8) auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--container-4xl);
    background-color: var(--color-bg-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-base);
    overflow: hidden;
}

.post-card-image-wrapper {
    width: 100%;
}

.post-card-image-wrapper img {
    width: 100%;
    height: var(--container-xl);
    object-fit: cover;
    display: block;
}

.post-card-content {
    width: 100%;
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
}

.card-excerpt {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.card-excerpt h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}

.card-excerpt ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.card-excerpt li::before {
    content: "—";
    color: var(--color-success);
    margin-right: var(--space-2);
}

.card-excerpt li {
    font-size: var(--fs-base);
    line-height: var(--lh-lg);
}

.card-excerpt p {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
}

.post-card-tags {
    width: 100%;
    display: flex;
}

.post-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg-icon);
    color: var(--color-icon);
    padding: var(--space-1) var(--space-6);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.post-tag:hover {
    color: var(--color-accent);
}

/*About Us*/
.about-us-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--space-8);
    margin: var(--space-8);
}

.about-us-column {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 var(--container-3xl);
}

.about-us-column h2 {
    display: flex;
    justify-content: flex-start;
    color: var(--color-primary);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-4);
}

.about-us-column p {
    margin-bottom: var(--space-4);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: var(--lh-base);
}

.about-us-column h3 {
    margin: var(--space-6) 0 var(--space-4) 0;
    display: flex;
    justify-content: flex-start;
    color: var(--color-primary);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}

.about-us-column ul li {
    margin-bottom: var(--space-6);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: var(--lh-sm);
    list-style: none;
    padding: 0;
}

.about-us-column ul li::before {
    content: "✓";
    color: var(--color-primary);
    margin-right: var(--space-2);
}

.about-us-column img {
    margin: auto;
    width: var(--container-2xl);
    max-width: 100%;
    height: auto;
}

/*Contact*/
.contact-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--space-8);
    margin: var(--space-8);
}

.contact-column {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 var(--container-3xl);
}

.contact-description {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-description h2 {
    color: var(--color-accent);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}

.contact-description ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-description ul li {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: var(--lh-sm);
    list-style: none;
    padding: 0;
}

.contact-description ul li::before {
    content: "✓";
    color: var(--color-primary);
    margin-right: var(--space-2);
}

.contact-column img {
    max-width: 100%;
    height: auto;
}

.contact-buttons {
    margin-top: var(--space-16);
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-6);
    height: var(--space-16);
    font-weight: var(--fw-bold);
    transition: all var(--transition-slow);
    border-radius: var(--space-1);
    cursor: pointer;
    font-size: var(--fs-lg);
}

.contact-btn-call {
    background-color: var(--color-accent);
    color: var(--color-text-main);
}

.contact-btn-call:hover {
    transform: translateY(calc(-1 * var(--space-1)));
}

.contact-btn-wa {
    background-color: var(--color-success);
    color: var(--color-text-light);
}

.contact-btn-wa:hover {
    transform: translateY(calc(-1 * var(--space-1)));
}
.contact-btn-tg {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

.contact-btn-tg:hover {
    transform: translateY(calc(-1 * var(--space-1)));
}
/*Police Pages*/
.police-pages {
    margin: var(--space-8) auto;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--container-4xl);
    background-color: var(--color-bg-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-base);
}

.police-pages h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}

.police-pages ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--color-text-main);
}

.police-pages li::before {
    content: "⮚";
    color: var(--color-primary);
    margin-right: var(--space-2);
}

.police-pages li {
    font-size: var(--fs-base);
    margin-left: var(--space-8);
}

.police-pages p {
    font-size: var(--fs-base);
    color: var(--color-text-main);
    line-height: var(--lh-base);
}

/* Responsive layout */

@media (max-width: 1200px) {
    .home-service-card {
        flex: 1 1 calc(33.33% - var(--space-8));
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .home-hero-md-board {
        flex-direction: column;
        justify-content: center;
        gap: var(--space-8);
        height: auto;
    }

    .home-hero-md-board-left {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .home-service-card {
        flex: 1 1 calc(50% - var(--space-8));
    }

    .home-hero-stats-container {
        flex-direction: column;
        align-items: center;
    }

    .home-hero-stat-card {
        width: 100%;
    }

    .blog-card {
        flex-direction: column;
    }

    .card-image-wrapper {
        width: 100%;
        height: var(--container-md);
        clip-path: none;
    }

    .card-content {
        width: 100%;
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .home-service-card {
        flex: 1 1 100%;
    }
}