/* =========================================================
   WEBLINKUS TEMPLATES
   PREMIUM WEBSITE TEMPLATE STORE
   NAVY + BLUE EDITION
   PAGE-SPECIFIC CSS
========================================================= */


/* =========================================================
   GOOGLE FONT
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap');


/* =========================================================
   ROOT
========================================================= */

.templates-page {

    --primary: #1677ff;
    --primary-dark: #0b5ed7;
    --primary-light: #4da3ff;
    --primary-soft: #edf5ff;

    --discount: #d70808;

    --navy: #04316c;
    --navy-dark: #07162b;
    --navy-soft: #102b4e;

    --blue-gray: #38516f;

    --gray: #68778a;
    --gray-light: #f4f7fb;

    --btn-order: #0b5ed7;

    --border: #e2e8f0;

    --white: #ffffff;

    --shadow:
        0 15px 40px rgba(11, 31, 58, 0.09);

    --shadow-blue:
        0 12px 30px rgba(22, 119, 255, 0.20);

    font-family: 'Tajawal', sans-serif;

    direction: rtl;

    color: var(--navy);

    background: var(--gray-light);

    line-height: 1.7;

}


/* =========================================================
   BASIC RESET - PAGE ONLY
========================================================= */

.templates-page *,
.templates-page *::before,
.templates-page *::after {

    box-sizing: border-box;

}


.templates-page img {

    max-width: 100%;

}


.templates-page a {

    text-decoration: none;

}


.templates-page button {

    font-family: inherit;

}


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

.templates-hero {

    position: relative;

    min-height: 300px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:

        radial-gradient(
            circle at 15% 80%,
            rgba(22, 119, 255, 0.22),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 15%,
            rgba(77, 163, 255, 0.18),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            var(--navy-dark),
            var(--navy),
            #123866
        );

}


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

.templates-hero::before {

    content: '';

    position: absolute;

    width: 560px;

    height: 560px;

    border-radius: 50%;

    background: rgba(22, 119, 255, 0.07);

    left: -220px;

    bottom: -370px;

}


.templates-hero::after {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    border: 1px solid rgba(77, 163, 255, 0.13);

    left: 8%;

    top: -300px;

}


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

.templates-page .hero-content {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 35px 30px;

}


/* =========================================================
   HERO SMALL TITLE
========================================================= */

.templates-page .hero-small {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 8px;

    color: #a9c9ef;

    font-size: 16px;

    font-weight: 700;

}


.templates-page .hero-small::before {

    content: '';

    width: 28px;

    height: 2px;

    background: var(--primary);

    border-radius: 5px;

}


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

.templates-page .hero-content h1 {

    max-width: 780px;

    margin: 0;

    color: var(--white);

    font-size: clamp(32px, 4vw, 44px);

    line-height: 1.25;

    letter-spacing: -0.8px;

    font-weight: 800;

}


.templates-page .hero-content h1 span {

    color: var(--primary-light);

}


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

.templates-page .hero-content p {

    max-width: 610px;

    margin: 9px 0 0;

    color: #b4c2d3;

    font-size: 14px;

    line-height: 1.8;

}


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

.templates-page .hero-buttons {

    display: flex;

    gap: 10px;

    margin-top: 17px;

    flex-wrap: wrap;

}


.templates-page .hero-btn {

    height: 42px;

    padding: 0 21px;

    border-radius: 7px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 12px;

    font-weight: 700;

    transition: 0.3s ease;

}


/* =========================================================
   PRIMARY HERO BUTTON
========================================================= */

.templates-page .hero-btn-primary {

    background: var(--primary);

    color: var(--white);

    box-shadow:
        0 8px 22px rgba(22, 119, 255, 0.20);

}


.templates-page .hero-btn-primary:hover {

    background: var(--primary-light);

    color: var(--white);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(22, 119, 255, 0.30);

}


.templates-page .hero-btn-primary span {

    font-size: 17px;

    transition: 0.3s ease;

}


.templates-page .hero-btn-primary:hover span {

    transform: translateX(-3px);

}


/* =========================================================
   SECONDARY HERO BUTTON
========================================================= */

.templates-page .hero-btn-secondary {

    border: 1px solid rgba(255,255,255,0.20);

    color: var(--white);

    background: rgba(255,255,255,0.04);

}


.templates-page .hero-btn-secondary:hover {

    background: var(--white);

    color: var(--navy);

}


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

.templates-page .hero-bg-shape {

    position: absolute;

    pointer-events: none;

}


.templates-page .shape-1 {

    width: 220px;

    height: 220px;

    border: 1px solid rgba(77,163,255,0.12);

    left: 12%;

    top: 55px;

    border-radius: 50%;

}


.templates-page .shape-2 {

    width: 120px;

    height: 120px;

    border: 1px solid rgba(77,163,255,0.18);

    transform: rotate(45deg);

    left: 25%;

    bottom: 25px;

}


.templates-page .shape-3 {

    width: 8px;

    height: 8px;

    background: var(--primary-light);

    border-radius: 50%;

    left: 18%;

    top: 65px;

    box-shadow:

        0 0 0 8px rgba(77,163,255,0.08),

        0 0 0 18px rgba(77,163,255,0.04);

}


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

.templates-page .hero-decoration {

    position: absolute;

    pointer-events: none;

}


.templates-page .decoration-1 {

    width: 70px;

    height: 70px;

    border: 1px solid rgba(255,255,255,0.06);

    left: 5%;

    bottom: 20px;

    transform: rotate(30deg);

}


.templates-page .decoration-2 {

    width: 5px;

    height: 5px;

    background: var(--primary-light);

    right: 7%;

    top: 60px;

    border-radius: 50%;

}


.templates-page .decoration-3 {

    width: 35px;

    height: 2px;

    background: var(--primary);

    left: 8%;

    top: 125px;

    transform: rotate(45deg);

}


/* =========================================================
   FILTER SECTION
========================================================= */

.templates-page .filter-section {

    background: var(--gray-light) ; 

    border-bottom: 1px solid var(--border);

}


.templates-page .filter-container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 20px 30px;

    display: flex;

    align-items: center;

    gap: 10px;

    overflow-x: auto;

    scrollbar-width: thin;

}


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

.templates-page .filter {

    border: 1px solid var(--border);

    background: var(--white);

    color: #5b6b7e;

    padding: 9px 18px;

    border-radius: 7px;

    cursor: pointer;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 600;

    transition: 0.3s ease;

}


.templates-page .filter:hover {

    border-color: var(--primary);

    color: var(--primary);

}


.templates-page .filter.active-filter {

    background: var(--navy);

    border-color: var(--navy);

    color: var(--white);

}


/* =========================================================
   TEMPLATES SECTION
========================================================= */

.templates-page .templates-section {

    width: 100%;

    background: var(--white);

}


.templates-page .templates-container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 55px 30px 80px;

}


/* =========================================================
   GRID
========================================================= */

.templates-page .templates-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 28px;

}


/* =========================================================
   CARD
========================================================= */

.templates-page .template-card {

    min-width: 0;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;

    transition:

        transform 0.35s ease,

        box-shadow 0.35s ease,

        border-color 0.35s ease;

}


.templates-page .template-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);

    border-color: #c9d9ea;

}


/* =========================================================
   PREVIEW
========================================================= */

.templates-page .preview {

    position: relative;

    height: 250px;

    background: #e9eef5;

    overflow: hidden;

}


.templates-page .browser-bar {

    position: absolute;

    z-index: 5;

    top: 0;

    right: 0;

    left: 0;

    height: 28px;

    background: #edf2f7;

    border-bottom: 1px solid #d9e1eb;

    display: flex;

    align-items: center;

    gap: 5px;

    padding-right: 12px;

}


.templates-page .browser-bar span {

    display: block;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #aebdce;

}


/* =========================================================
   PREVIEW IMAGE
========================================================= */

.templates-page .preview img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top;

    display: block;

    transition: transform 0.5s ease;

}


.templates-page .template-card:hover .preview img {

    transform: scale(1.04);

}


/* =========================================================
   TEMPLATE NUMBER
========================================================= */

.templates-page .template-number {

    position: absolute;

    top: 42px;

    left: 12px;

    padding: 5px 9px;

    background: var(--primary);

    color: var(--white);

    border-radius: 4px;

    font-size: 18px;

    font-weight: 700;

    z-index: 6;

}


/* =========================================================
   DISCOUNT BADGE
========================================================= */

.templates-page .discount-badge {

    position: absolute;

    top: 42px;

    right: 12px;

    padding: 5px 10px;

    background: var(--discount);

    color: var(--white);

    border-radius: 4px;

    font-size: 10px;

    font-weight: 700;

    z-index: 6;

    box-shadow:
        0 5px 14px rgba(215, 8, 8, 0.22);

}


/* =========================================================
   PREVIEW OVERLAY
========================================================= */

.templates-page .preview-overlay {

    position: absolute;

    inset: 0;

    background: rgba(7, 22, 43, 0.62);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.3s ease;

}


.templates-page .template-card:hover .preview-overlay {

    opacity: 1;

}


.templates-page .preview-btn {

    background: var(--white);

    color: var(--navy);

    padding: 12px 20px;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 700;

    transform: translateY(10px);

    transition: 0.3s ease;

}


.templates-page .template-card:hover .preview-btn {

    transform: translateY(0);

}


.templates-page .preview-btn:hover {

    background: var(--primary);

    color: var(--white);

}


/* =========================================================
   CARD BODY
========================================================= */

.templates-page .card-body {

    padding: 22px;

}


.templates-page .category {

    display: inline-block;

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

    margin-bottom: 7px;

}


.templates-page .card-body h2 {

    margin: 0 0 7px;

    font-size: 19px;

    line-height: 1.5;

    font-weight: 800;

    color: var(--navy);

}


.templates-page .card-body p {

    min-height: 55px;

    margin: 0;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   CARD INFO
========================================================= */

.templates-page .card-info {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 17px;

    padding-top: 15px;

    border-top: 1px solid var(--border);

}


.templates-page .card-info span {

    color: #77879a;

    font-size: 11px;

    font-weight: 500;

}


/* =========================================================
   CARD BOTTOM
========================================================= */

.templates-page .card-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 20px;

    gap: 15px;

}


/* =========================================================
   PRICE
========================================================= */

.templates-page .price-box {

    display: flex;

    align-items: center;

    gap: 9px;

}


.templates-page .old-price {

    color: #9ba8b6;

    font-size: 11px;

    font-weight: 600;

    text-decoration: line-through;

}


.templates-page .price {

    color: var(--navy);

    font-size: 21px;

    font-weight: 900;

    line-height: 1;

}


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

.templates-page .order-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 15px;

    background: var(--btn-order);

    color: var(--white);

    border-radius: 6px;

    font-size: 11px;

    font-weight: 700;

    transition: 0.3s ease;

}


.templates-page .order-btn span {

    font-size: 15px;

    transition: 0.3s ease;

}


.templates-page .order-btn:hover {

    background: var(--primary);

    color: var(--white);

    box-shadow:
        0 7px 18px rgba(22,119,255,0.18);

}


.templates-page .order-btn:hover span {

    transform: translateX(-3px);

}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.templates-page .template-card.hide {

    display: none;

}


.templates-page .template-card.show {

    animation: templatesCardShow 0.35s ease;

}


@keyframes templatesCardShow {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .templates-page .templates-grid {

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

        gap: 22px;

    }


    .templates-page .templates-container {

        padding: 45px 25px 65px;

    }


    .templates-page .hero-content {

        padding: 32px 25px;

    }


    .templates-page .hero-content h1 {

        font-size: 38px;

    }


    .templates-page .preview {

        height: 230px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .templates-page .templates-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .templates-page .templates-container {

        padding: 35px 18px 55px;

    }


    .templates-page .filter-container {

        padding: 16px 18px;

        gap: 8px;

    }


    .templates-page .filter {

        padding: 8px 15px;

        font-size: 11px;

    }


    .templates-hero {

        min-height: 300px;

    }


    .templates-page .hero-content {

        padding: 30px 20px;

    }


    .templates-page .hero-small {

        font-size: 13px;

    }


    .templates-page .hero-content h1 {

        font-size: 31px;

        line-height: 1.3;

    }


    .templates-page .hero-content p {

        font-size: 12px;

        line-height: 1.8;

        max-width: 100%;

    }


    .templates-page .hero-buttons {

        margin-top: 15px;

        gap: 8px;

    }


    .templates-page .hero-btn {

        height: 40px;

        padding: 0 16px;

        font-size: 11px;

    }


    .templates-page .preview {

        height: 230px;

    }


    .templates-page .card-body {

        padding: 18px;

    }


    .templates-page .card-body h2 {

        font-size: 18px;

    }


    .templates-page .card-body p {

        font-size: 13px;

        min-height: auto;

    }


    .templates-page .card-info {

        gap: 12px;

        margin-top: 15px;

        padding-top: 13px;

    }


    .templates-page .card-bottom {

        margin-top: 18px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .templates-page .templates-container {

        padding-left: 14px;

        padding-right: 14px;

    }


    .templates-page .hero-content {

        padding: 25px 18px;

    }


    .templates-page .hero-content h1 {

        font-size: 28px;

    }


    .templates-page .hero-content p {

        font-size: 11px;

    }


    .templates-page .hero-buttons {

        flex-direction: row;

    }


    .templates-page .hero-btn {

        flex: 1;

        min-width: 0;

        padding: 0 10px;

    }


    .templates-page .preview {

        height: 220px;

    }


    .templates-page .template-number {

        top: 38px;

        left: 10px;

        font-size: 15px;

        padding: 4px 7px;

    }


    .templates-page .discount-badge {

        top: 38px;

        right: 10px;

        font-size: 9px;

        padding: 4px 8px;

    }


    .templates-page .card-info {

        gap: 8px;

    }


    .templates-page .card-info span {

        font-size: 10px;

    }


    .templates-page .price {

        font-size: 19px;

    }


    .templates-page .order-btn {

        padding: 9px 11px;

        font-size: 10px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .templates-page *,
    .templates-page *::before,
    .templates-page *::after {

        transition: none !important;

        animation: none !important;

        scroll-behavior: auto !important;

    }

}