/* =========================================================
   SEWATENDATASIK.COM
   RESPONSIVE SYSTEM

   Mobile  : <= 767px
   Tablet  : 768px - 1023px
   Desktop : >= 1024px
========================================================= */


/* =========================================================
   GLOBAL SAFETY
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   DESKTOP
   >= 1024px
========================================================= */

@media (min-width: 1024px) {

    .container {
        width: min(1180px, calc(100% - 32px));
        margin-inline: auto;
    }

    section {
        scroll-margin-top: 90px;
    }

}


/* =========================================================
   TABLET
   768px - 1023px
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    /* =====================================================
       GLOBAL
    ===================================================== */

    .container {
        width: calc(100% - 40px);
        max-width: 960px;
        margin-inline: auto;
    }

    section {
        scroll-margin-top: 80px;
    }


    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    h1,
    .page-title,
    .internal-title,
    .article-title {
        font-size: clamp(30px, 4.5vw, 36px);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(26px, 3.8vw, 30px);
        line-height: 1.25;
    }

    h3 {
        font-size: 21px;
        line-height: 1.3;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .header-inner {
        position: relative;
        min-height: 68px;
        gap: 16px;
    }

    .site-header .custom-logo {
        max-width: 170px;
        max-height: 50px;
    }

    .menu-toggle {
        display: flex;
        margin-left: auto;
    }

    .header-actions {
        display: none;
    }

    .primary-navigation {
        position: absolute;
        z-index: 999;
        top: 100%;
        right: 0;
        left: 0;

        display: none;

        margin: 0;
        padding: 12px 20px 18px;

        background: var(--color-white);
        border-top: 1px solid var(--color-gray-180);
        border-bottom: 1px solid var(--color-gray-180);

        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    }

    .primary-navigation.is-open {
        display: block;
    }

    .primary-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .primary-menu li {
        width: 100%;
    }

    .primary-menu > li + li {
        border-top: 1px solid var(--color-gray-160);
    }

    .primary-menu a {
        width: 100%;
        padding: 12px 4px;
        font-size: 14px;
    }

    .primary-menu .sub-menu {
        position: static;

        min-width: 0;
        width: 100%;

        padding: 0 0 8px 16px;

        visibility: visible;
        opacity: 1;

        border: 0;
        box-shadow: none;

        transform: none;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-section {
        min-height: 500px;
    }

    .hero-content {
        max-width: 650px;

        padding:
            70px
            20px
            64px
            22px;
    }

    .hero-title {
        max-width: 620px;
        font-size: clamp(34px, 5vw, 40px);
    }

    .hero-description {
        max-width: 570px;
    }


    /* =====================================================
       SECTION HEADING
    ===================================================== */

    .section-heading-row {
        gap: 24px;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    .services-modern-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    /* =====================================================
       SHOWCASE
    ===================================================== */

    .showcase-layout,
    .showcase-layout.has-showcase-images {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .showcase-gallery {
        max-width: 650px;
        margin-inline: auto;
    }

    .showcase-content {
        max-width: 720px;
        margin-inline: auto;
    }


    /* =====================================================
       BENEFIT
    ===================================================== */

    .showcase-benefits {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    /* =====================================================
       INFO STRIP
    ===================================================== */

    .info-strip-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .info-strip-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .info-strip-item:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }


    /* =====================================================
       PACKAGE
    ===================================================== */

    .package-showcase-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .package-showcase-media {
        height: 340px;
    }


    /* =====================================================
       GALLERY
    ===================================================== */

    .gallery-project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: none;
        gap: 14px;
    }

    .gallery-project-1,
    .gallery-project-2,
    .gallery-project-3,
    .gallery-project-4 {
        grid-column: auto;
        grid-row: auto;
    }

    .gallery-project {
        min-height: 260px;
    }


    /* =====================================================
       PROCESS
    ===================================================== */

    .process-timeline {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 30px 24px;
    }

    .process-line {
        display: none;
    }


    /* =====================================================
       PAYMENT
    ===================================================== */

    .home-payment {
        padding-block: 56px;
    }

    .payment-heading {
        margin-bottom: 30px;
    }

    .payment-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .payment-card {
        padding: 22px;
    }

    .payment-note {
        margin-top: 28px;
    }


    /* =====================================================
       TESTIMONIAL
    ===================================================== */

    .testimonial-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .testimonial-cta-panel,
    .testimonial-content-panel {
        padding: 34px;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .faq-intro {
        position: static;
    }

    .faq-intro h2,
    .faq-intro p {
        max-width: 680px;
    }


    /* =====================================================
       FINAL CTA
    ===================================================== */

    .final-cta-inner {
        gap: 28px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 36px 28px;
    }


    /* =====================================================
       INTERNAL HERO
    ===================================================== */

    .internal-hero.has-internal-image
    .internal-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }


    /* =====================================================
       SERVICE DETAIL
    ===================================================== */

    .service-detail-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }


    /* =====================================================
       INTERNAL SERVICE
    ===================================================== */

    .internal-service-item {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        min-height: 0;
    }


    /* =====================================================
       ARTICLE
    ===================================================== */

    .article-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    /* =====================================================
       ARCHIVE
    ===================================================== */

    .archive-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* =====================================================
       PACKAGE PAGE
    ===================================================== */

    .dedicated-package-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


  /* =====================================================
	GALLERY PAGE
	===================================================== */

	.dedicated-gallery-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 14px;
	}

	.dedicated-gallery-item,
	.dedicated-gallery-item:nth-child(6n + 1),
	.dedicated-gallery-item:nth-child(6n + 4) {
		grid-column: auto;
	}

	.dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(6n + 1) .dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(6n + 4) .dedicated-gallery-media {
		height: 340px;
	}


    /* =====================================================
	ABOUT PAGE - TABLET
	===================================================== */

	.about-intro-section,
	.about-process-section,
	.about-commitment-section {
		padding-block: 56px;
	}

	.about-highlight-section {
		padding-block: 52px;
	}

	.about-intro-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-intro-media {
		width: min(100%, 680px);
		height: 390px;

		margin-inline: auto;
	}

	.about-intro-content {
		width: min(100%, 720px);
		margin-inline: auto;
	}

	.about-highlight-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 18px;
	}

	.about-highlight-card {
		padding: 22px;
	}

	.about-process-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 18px;
	}

	.about-commitment-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		gap: 16px;
	}

	.about-commitment-card {
		padding: 22px;
	}

	/* =====================================================
	SERVICES PAGE - TABLET
	===================================================== */

	.services-page-intro {
		padding-block: 52px;
	}

	.dedicated-services-section {
		padding-block: 56px;
	}

	.services-benefit-section {
		padding-block: 56px;
	}

	.services-benefit-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		gap: 16px;
	}

	.services-benefit-card {
		padding: 21px;
	}

    /* =====================================================
       CONTACT
    ===================================================== */

    .contact-main-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


/* =========================================================
   MOBILE
   <= 767px
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL
    ===================================================== */

    .container {
        width: calc(100% - 28px);
        margin-inline: auto;
    }

    section {
        scroll-margin-top: 74px;
    }

    .home-services-section,
    .home-showcase-section,
    .home-gallery-section,
    .home-process-section,
    .home-testimonial-section,
    .home-faq-section {
        padding-block: 44px;
    }


    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    h1,
    .page-title,
    .internal-title,
    .article-title {
        font-size: clamp(28px, 8vw, 32px);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(24px, 7vw, 28px);
        line-height: 1.24;
    }

    h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    h4 {
        font-size: 17px;
    }

    p,
    li {
        font-size: 14px;
        line-height: 1.65;
    }


    /* =====================================================
       BUTTON
    ===================================================== */

    .btn,
    .button,
    .wp-element-button {
        min-height: 44px;
        padding: 11px 16px;
        font-size: 14px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

     .site-topbar {
        display: none;
    }

	.header-inner {
        position: relative;
        min-height: 64px;
        gap: 12px;
    }

    .site-header .custom-logo {
        max-width: 145px;
        max-height: 44px;
    }

    .site-title {
        font-size: 17px;
    }

    .menu-toggle {
        display: flex;

        width: 42px;
        height: 42px;

        margin-left: auto;
    }

    .header-actions {
        display: none;
    }

    .primary-navigation {
        position: absolute;
        z-index: 999;
        top: 100%;
        right: 0;
        left: 0;

        display: none;

        margin: 0;
        padding: 10px 14px 16px;

        background: var(--color-white);

        border-top:
            1px solid
            var(--color-gray-180);

        border-bottom:
            1px solid
            var(--color-gray-180);

        box-shadow:
            0 14px 28px
            rgba(0, 0, 0, 0.08);
    }

    .primary-navigation.is-open {
        display: block;
    }

    .primary-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .primary-menu li {
        width: 100%;
    }

    .primary-menu > li + li {
        border-top:
            1px solid
            var(--color-gray-160);
    }

    .primary-menu a {
        width: 100%;
        padding: 12px 4px;
        font-size: 14px;
    }

    .primary-menu .sub-menu {
        position: static;

        width: 100%;
        min-width: 0;

        padding:
            0
            0
            8px
            14px;

        visibility: visible;
        opacity: 1;

        border: 0;
        box-shadow: none;

        transform: none;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-section {
        min-height: 480px;
    }

    .hero-content {
        max-width: 100%;

        padding:
            58px
            6px
            54px;
    }

    .hero-title {
        max-width: 100%;
        margin-bottom: 13px;

        font-size:
            clamp(
                30px,
                8.5vw,
                34px
            );

        line-height: 1.16;
    }

    .hero-description {
        max-width: 100%;

        margin-bottom: 22px;

        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-decoration-left {
        width: 95px;
        opacity: 0.7;
    }


    /* =====================================================
       SECTION HEADING
    ===================================================== */

    .section-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;

        margin-bottom: 24px;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    .services-modern-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card {
        min-height: 0;
        padding: 20px;
    }


    /* =====================================================
       SHOWCASE
    ===================================================== */

    .showcase-layout,
    .showcase-layout.has-showcase-images {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .showcase-gallery {
        min-height: 310px;
    }

    .showcase-image-1 {
        width: 68%;
        height: 240px;
    }

    .showcase-image-2 {
        width: 38%;
        height: 135px;
    }

    .showcase-image-3 {
        width: 46%;
        height: 145px;
    }

    .showcase-shape {
        width: 58px;
        height: 58px;
    }


    /* =====================================================
       BENEFITS
    ===================================================== */

    .showcase-benefits {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .showcase-benefit div > span {
        max-width: none;
    }


    /* =====================================================
       INFO STRIP
    ===================================================== */

    .info-strip-grid {
        grid-template-columns: 1fr;
        transform: translateY(18px);
    }

    .info-strip-item {
        justify-content: flex-start;
        min-height: 68px;
        padding: 14px 18px;
    }

    .info-strip-item + .info-strip-item {
        border-left: 0;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.18);
    }


    /* =====================================================
       PACKAGE
    ===================================================== */

    .home-package-section {
        padding-block:
            64px
            44px;
    }

    .package-showcase-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .package-showcase-media {
        height: 300px;
    }


    /* =====================================================
       GALLERY HOMEPAGE
    ===================================================== */

    .gallery-project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: none;

        gap: 10px;
    }

    .gallery-project-1,
    .gallery-project-2,
    .gallery-project-3,
    .gallery-project-4 {
        grid-column: auto;
        grid-row: auto;
    }

    .gallery-project {
        min-height: 185px;
    }

    .gallery-project-1 {
        grid-column: span 2;
        min-height: 250px;
    }

    .gallery-project-content {
        padding: 14px;
    }

    .gallery-project-content h3 {
        font-size: 14px;
    }


    /* =====================================================
       PROCESS
    ===================================================== */

    .process-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .process-heading .section-eyebrow {
        justify-content: flex-start;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .process-line {
        display: block;

        top: 21px;
        bottom: 21px;
        left: 21px;
        right: auto;

        width: 1px;
        height: auto;
    }

    .process-item {
        min-height: 46px;

        padding-left: 58px;

        text-align: left;
    }

    .process-number {
        position: absolute;

        top: 0;
        left: 0;

        width: 44px;
        height: 44px;

        margin: 0;

        background: var(--color-gray-100);
    }

    .process-item p {
        max-width: none;
        margin: 0;
    }


    /* =====================================================
       PAYMENT
    ===================================================== */

    .home-payment {
        padding-block: 44px;
    }

    .payment-heading {
        max-width: 100%;

        margin:
            0
            0
            26px;

        text-align: left;
    }

    .payment-heading .section-label {
        margin-bottom: 8px;
    }

    .payment-heading h2 {
        margin-bottom: 9px;

        font-size: 26px;
    }

    .payment-heading p {
        font-size: 14px;
    }

    .payment-steps {
        grid-template-columns: 1fr;

        gap: 14px;

        max-width: 100%;

        margin-bottom: 0;
    }

    .payment-card {
        gap: 14px;

        width: 100%;

        padding: 18px;

        border-radius: 12px;
    }

    .payment-number {
        flex: 0 0 42px;

        width: 42px;
        height: 42px;

        border-radius: 10px;

        font-size: 14px;
    }

    .payment-content h3 {
        font-size: 20px;
    }

    .payment-content p {
        font-size: 14px;
    }

    .payment-note {
        align-items: flex-start;

        gap: 11px;

        width: 100%;
        max-width: 100%;

        margin-top: 26px;

        padding: 15px 16px;
    }

    .payment-note-icon {
        flex: 0 0 28px;

        width: 28px;
        height: 28px;
    }


    /* =====================================================
       TESTIMONIAL
    ===================================================== */

    .testimonial-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .testimonial-cta-panel,
    .testimonial-content-panel {
        padding: 24px 20px;
    }

    .testimonial-content-panel > h2 {
        margin-bottom: 20px;
    }

    .testimonial-featured {
        padding-left: 26px;
    }

    .testimonial-quote-mark {
        font-size: 68px;
    }

    .testimonial-mini-list {
        gap: 14px;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .faq-intro {
        position: static;
    }

    .faq-item summary {
        grid-template-columns:
            28px
            minmax(0, 1fr)
            24px;

        gap: 8px;

        padding:
            16px
            2px;
    }

    .faq-answer {
        padding:
            0
            30px
            16px
            38px;
    }


    /* =====================================================
       FINAL CTA
    ===================================================== */

    .final-cta-section {
        padding-block: 42px;
    }

    .final-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .final-cta-action,
    .final-cta-button {
        width: 100%;
    }

    .final-cta-button {
        justify-content: center;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 28px;

        padding-block:
            44px
            32px;
    }

    .footer-description {
        max-width: 100%;
    }


    /* =====================================================
       FLOATING WHATSAPP
    ===================================================== */

    .floating-whatsapp {
        right: 14px;
        bottom: 14px;

        width: 50px;
        height: 50px;
        min-height: 50px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;
    }

    .floating-whatsapp-text {
        display: none;
    }

    .floating-whatsapp-icon {
        width: 32px;
        height: 32px;
    }


    /* =====================================================
       PAGE INTRO
    ===================================================== */

    .page-intro-section {
        padding-block: 42px;
    }


    /* =====================================================
       INTERNAL HERO
    ===================================================== */

    .internal-hero.has-internal-image
    .internal-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .internal-hero-content {
        padding-block: 36px;
    }


    /* =====================================================
       GENERAL CONTENT
    ===================================================== */

    .internal-content-section {
        padding-block: 42px;
    }


    /* =====================================================
       SERVICE DETAIL
    ===================================================== */

    .service-detail-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .service-contact-box {
        padding: 20px;
    }


    /* =====================================================
       INTERNAL SERVICES
    ===================================================== */

    .internal-service-list {
        gap: 18px;
    }

    .internal-service-item {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .internal-service-media,
    .internal-service-image,
    .internal-service-placeholder {
        min-height: 220px;
    }

    .internal-service-info {
        padding: 22px 20px;
    }


    /* =====================================================
       PACKAGE PAGE
    ===================================================== */

    .dedicated-package-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .dedicated-package-grid
    .package-showcase-media {
        height: 300px;
    }


    /* =====================================================
       GALLERY PAGE
    ===================================================== */

    .dedicated-gallery-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.dedicated-gallery-item,
	.dedicated-gallery-item:nth-child(6n + 1),
	.dedicated-gallery-item:nth-child(6n + 4) {
		grid-column: auto;
	}

	.dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(6n + 1) .dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(6n + 4) .dedicated-gallery-media {
		height: 280px;
	}


    /* =====================================================
	ABOUT PAGE - MOBILE
	===================================================== */

	.about-intro-section,
	.about-process-section,
	.about-commitment-section {
		padding-block: 44px;
	}

	.about-highlight-section {
		padding-block: 42px;
	}


	/* INTRO */

	.about-intro-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.about-intro-media {
		height: 280px;
	}

	.about-intro-title {
		margin-top: 8px;

		font-size: 24px;
	}

	.about-intro-text {
		max-width: 100%;
	}


	/* HIGHLIGHT */

	.about-highlight-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.about-highlight-card {
		grid-template-columns:
			44px
			minmax(0, 1fr);

		gap: 14px;

		padding: 18px;
	}

	.about-highlight-icon {
		width: 42px;
		height: 42px;

		flex: 0 0 42px;
	}

	.about-highlight-card h2 {
		font-size: 20px;
	}


	/* SECTION HEADING */

	.about-section-heading {
		width: 100%;

		margin-bottom: 24px;

		text-align: left;
	}

	.about-section-heading .section-eyebrow {
		justify-content: flex-start;
	}

	.about-section-heading h2 {
		margin-top: 8px;

		font-size: 24px;
	}


	/* PROCESS */

	.about-process-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.about-process-card {
		display: grid;

		grid-template-columns:
			44px
			minmax(0, 1fr);

		column-gap: 14px;

		padding: 18px;
	}

	.about-process-number {
		grid-row: 1 / span 2;

		width: 42px;
		height: 42px;

		margin-bottom: 0;
	}

	.about-process-card h3 {
		margin:
			1px
			0
			6px;

		font-size: 19px;
	}

	.about-process-card p {
		grid-column: 2;
	}


	/* COMMITMENT */

	.about-commitment-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.about-commitment-card {
		padding: 18px;
	}

	.about-commitment-icon {
		width: 40px;
		height: 40px;

		margin-bottom: 12px;
	}

	.about-commitment-card h3 {
		font-size: 19px;
	}

	/* =====================================================
	SERVICES PAGE - MOBILE
	===================================================== */

	.services-page-intro,
	.dedicated-services-section,
	.services-benefit-section {
		padding-block: 44px;
	}


	/* INTRO */

	.services-page-intro-content {
		width: 100%;
		text-align: left;
	}

	.services-page-intro-content .section-eyebrow {
		justify-content: flex-start;
	}

	.services-page-intro-content h2 {
		font-size: 24px;
	}


	/* SECTION HEADING */

	.dedicated-services-section
	.section-heading-row {
		margin-bottom: 24px;
	}


	/* SERVICE CARD */

	.internal-service-list {
		gap: 16px;
	}

	.internal-service-item {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.internal-service-item:nth-child(even)
	.internal-service-media,
	.internal-service-item:nth-child(even)
	.internal-service-info {
		order: initial;
	}

	.internal-service-media,
	.internal-service-image,
	.internal-service-placeholder {
		min-height: 230px;
		height: 230px;
	}

	.internal-service-info {
		padding: 20px;
	}

	.internal-service-info h3 {
		font-size: 20px;
	}

	.internal-service-info p {
		margin-bottom: 14px;
	}


	/* BENEFITS */

	.services-benefit-heading {
		width: 100%;

		margin-bottom: 24px;

		text-align: left;
	}

	.services-benefit-heading .section-eyebrow {
		justify-content: flex-start;
	}

	.services-benefit-heading h2 {
		font-size: 24px;
	}

	.services-benefit-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.services-benefit-card {
		display: grid;

		grid-template-columns:
			44px
			minmax(0, 1fr);

		column-gap: 14px;

		padding: 18px;
	}

	.services-benefit-icon {
		grid-row: 1 / span 2;

		width: 42px;
		height: 42px;

		margin: 0;
	}

	.services-benefit-card h3 {
		margin:
			1px
			0
			6px;

		font-size: 19px;
	}

	.services-benefit-card p {
		grid-column: 2;
	}
    

    /* =====================================================
       CONTACT
    ===================================================== */

    .contact-main-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-info-list {
        grid-template-columns: 1fr;
    }

    .contact-form-panel {
        padding: 22px 18px;
    }

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

    .contact-map-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        padding: 22px 18px;
    }


    /* =====================================================
       ARTICLE
    ===================================================== */

    .article-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .article-navigation {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       ARCHIVE
    ===================================================== */

    .archive-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    /* =====================================================
       404
    ===================================================== */

    .error-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .error-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .error-actions .btn {
        width: 100%;
        justify-content: center;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 24px);
    }


    /* HERO */

    .hero-section {
        min-height: 450px;
    }

    .hero-content {
        padding-block:
            48px
            46px;
    }

    .hero-title {
        font-size: 30px;
    }


    /* SECTION */

    .home-services-section,
    .home-showcase-section,
    .home-gallery-section,
    .home-process-section,
    .home-testimonial-section,
    .home-faq-section,
    .home-payment {
        padding-block: 40px;
    }


    /* SHOWCASE */

    .showcase-gallery {
        min-height: 270px;
    }

    .showcase-image-1 {
        height: 205px;
    }

    .showcase-image-2 {
        height: 115px;
    }

    .showcase-image-3 {
        height: 125px;
    }


    /* PACKAGE */

    .package-showcase-media {
        height: 270px;
    }


    /* GALLERY */

    .gallery-project-grid {
        grid-template-columns: 1fr;
    }

    .gallery-project,
    .gallery-project-1 {
        grid-column: auto;
        min-height: 220px;
    }


    /* PAYMENT */

    .payment-heading h2 {
        font-size: 24px;
    }

    .payment-card {
        padding: 16px;
    }

    .payment-number {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }

    .payment-content h3 {
        font-size: 19px;
    }

    .payment-note {
        margin-top: 22px;
        padding: 14px;
    }


    /* TESTIMONIAL */

    .testimonial-cta-panel,
    .testimonial-content-panel {
        padding: 22px 17px;
    }


    /* FAQ */

    .faq-item summary {
        grid-template-columns:
            24px
            minmax(0, 1fr)
            22px;
    }

    .faq-answer {
        padding-left: 32px;
    }


    /* FLOATING WHATSAPP */

    .floating-whatsapp {
        right: 12px;
        bottom: 12px;

        width: 48px;
        height: 48px;
        min-height: 48px;
    }

	/* ABT */
	.about-intro-section,
	.about-highlight-section,
	.about-process-section,
	.about-commitment-section {
		padding-block: 40px;
	}

	.about-intro-media {
		height: 240px;
	}

	.about-highlight-card,
	.about-process-card,
	.about-commitment-card {
		padding: 16px;
	}

	.services-page-intro,
	.dedicated-services-section,
	.services-benefit-section {
		padding-block: 40px;
	}

	.internal-service-media,
	.internal-service-image,
	.internal-service-placeholder {
		height: 210px;
		min-height: 210px;
	}

	.internal-service-info,
	.services-benefit-card {
		padding: 16px;
	}

	.dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(6n + 1) .dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(6n + 4) .dedicated-gallery-media {
		height: 240px;
	}
}

/* =========================================================
   FINAL TESTIMONIAL + FLOATING WHATSAPP RESPONSIVE
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
	.testimonial-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.testimonial-card {
		min-height: 230px;
		padding: 18px;
	}

	.floating-whatsapp {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: 52px;
		height: 52px;
		min-width: 52px;
		min-height: 52px;
	}
}

@media (max-width: 767px) {
	.testimonial-card-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.testimonial-card {
		min-height: 0;
		padding: 18px;
	}

	.testimonial-card-quote {
		font-size: 54px;
	}

	.floating-whatsapp {
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom));
		width: 50px;
		height: 50px;
		min-width: 50px;
		min-height: 50px;
		padding: 0;
		border-radius: 50%;
	}

	.floating-whatsapp-svg {
		width: 23px;
		height: 23px;
		flex-basis: 23px;
	}
}

@media (max-width: 480px) {
	.floating-whatsapp {
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
	}
}

/* =========================================================
   FINAL GALLERY LAYOUT
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
	.dedicated-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.dedicated-gallery-item,
	.dedicated-gallery-item:nth-child(8n + 1),
	.dedicated-gallery-item:nth-child(8n + 6) {
		grid-column: auto;
	}

	.dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 1) .dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 6) .dedicated-gallery-media {
		height: 300px;
	}
}

@media (max-width: 767px) {
	.dedicated-gallery-section {
		padding-block: 42px 48px;
	}

	.dedicated-gallery-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.dedicated-gallery-item,
	.dedicated-gallery-item:nth-child(8n + 1),
	.dedicated-gallery-item:nth-child(8n + 6) {
		grid-column: auto;
	}

	.dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 1) .dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 6) .dedicated-gallery-media {
		height: 260px;
		border-radius: 12px;
	}

	.dedicated-gallery-overlay {
		opacity: 1;
		background: linear-gradient(180deg, transparent 62%, rgba(8, 18, 38, 0.58) 100%);
	}

	.dedicated-gallery-info {
		opacity: 1;
		transform: none;
		padding: 15px 16px;
	}
}

@media (max-width: 480px) {
	.dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 1) .dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 6) .dedicated-gallery-media {
		height: 230px;
	}
}

/* =========================================================
   FINAL UNIFORM GALLERY RESPONSIVE
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
	.dedicated-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.dedicated-gallery-item,
	.dedicated-gallery-item:nth-child(8n + 1),
	.dedicated-gallery-item:nth-child(8n + 6) {
		grid-column: auto;
	}

	.dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 1) .dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 6) .dedicated-gallery-media {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 767px) {
	.dedicated-gallery-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.dedicated-gallery-item,
	.dedicated-gallery-item:nth-child(8n + 1),
	.dedicated-gallery-item:nth-child(8n + 6) {
		grid-column: auto;
	}

	.dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 1) .dedicated-gallery-media,
	.dedicated-gallery-item:nth-child(8n + 6) .dedicated-gallery-media {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.gallery-pagination {
		gap: 6px;
		margin-top: 28px;
	}

	.gallery-pagination .page-numbers {
		min-width: 38px;
		height: 38px;
		padding-inline: 10px;
	}
}

@media (max-width: 480px) {
	.gallery-pagination .prev,
	.gallery-pagination .next {
		width: 100%;
	}
}