/* Images */
.project-images {
    position: relative;
}

.main-img {
    border-radius: 20px;
    width: 100%;
}

.mobile-img {
    position: absolute;
    bottom: -60px;
    left: 30px;
    width: clamp(70px, 18vw, 163px);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Content */
.service {
    color: #3b82f6;
    font-weight: 600;
    font-size: clamp(18px, 2vw, 24px);
    margin-bottom: 15px;
}

.project-title {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 600;
    margin-bottom: 10px;
}

.project-desc {
    font-size: clamp(14px, 1.6vw, 20px);
    line-height: 1.8;
    margin-bottom: 10px;
    font-weight: 400;
    max-width: 480px;
}

.project-gallery-section {
    margin-top: 20px;
}

.project-gallery-title {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.project-images-swiper {
    padding-bottom: 36px;
}

.gallery-slide-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.gallery-slide-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.project-zoomable-image {
    cursor: pointer;
}

.project-image-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.project-image-modal.active {
    display: flex;
}

.project-image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.project-image-modal img {
    position: relative;
    z-index: 2;
    max-width: min(1200px, 95vw);
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    object-fit: contain;
}

.project-image-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-images-swiper .swiper-button-next,
.project-images-swiper .swiper-button-prev {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(31, 124, 253, 0.92);
    color: #fff;
}

.project-images-swiper .swiper-button-next:after,
.project-images-swiper .swiper-button-prev:after {
    font-size: 12px;
    font-weight: 700;
}

.project-images-swiper .swiper-pagination-bullet-active {
    background: #1f7cfd;
}

/* Links */
.project-links .link-btn {
    padding: 8px 18px;
    border: 1px solid #000000;
    border-radius: 20px;
    font-weight: 600;

    font-size: 14px;
    text-decoration: none;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.project-links .link-btn:hover {
    background: #f5f5f5;
}

/* Button */
.request-btn {
    background: #1f7cfd;
    color: #fff;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600;
    padding: clamp(9px, 1.5vw, 12px) clamp(20px, 5vw, 26px);
    border-radius: 40px;
}

.request-btn:hover {
    background: #1c67d1;
    color: #fff;
}

/* Cards */
.info-card {
    border: 2px solid #d9d9d9;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    height: 100%;
}

.info-card h5 {
    font-size: clamp(16px, 1.6vw, 20px);
    color: #1f7cfd;
    margin-bottom: 20px;
}

.info-card p {
    font-size: 14px;
    margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-img {
        left: 20px;
        bottom: -30px;
    }

    .gallery-slide-card img {
        height: 210px;
    }

    .project-images-swiper .swiper-button-next,
    .project-images-swiper .swiper-button-prev {
        display: none;
    }

    .project-image-modal {
        padding: 10px;
    }

    .project-image-modal-close {
        top: 10px;
        right: 10px;
    }

    .project-links .link-btn {
        width: 100%;
        text-align: center;
    }
    .project-links .link-btn a {
        text-align: center;
    }
}
.material-icon-theme--google {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath fill='%23f44336' d='M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86' opacity='0.987'/%3E%3Cpath fill='%23ffc107' d='M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92' opacity='0.997'/%3E%3Cpath fill='%23448aff' d='M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49' opacity='0.999'/%3E%3Cpath fill='%2343a047' d='M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z' opacity='0.993'/%3E%3C/g%3E%3C/svg%3E");
}
.ic--twotone-apple {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25'/%3E%3C/svg%3E");
}
.tabler--world {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m.6-3h16.8M3.6 15h16.8'/%3E%3Cpath d='M11.5 3a17 17 0 0 0 0 18m1-18a17 17 0 0 1 0 18'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 768px) {
    .request-btn {
        margin-top: 16px !important;
        width: 100%;
    }
}