/*
Theme Name: Weblinkus
Description: قالب Weblinkus - Premium RTL Business Website
Version: 0.4.0
Author: Weblinkus
Text Domain: weblinkus
*/


/* =========================================================
   01. ROOT
========================================================= */

:root {
    --navy: #03132d;
    --navy-2: #061e43;

    --blue: #0868e8;
    --blue-light: #079cff;
    --cyan: #00a7ff;

    --text: #111827;
    --muted: #64748b;

    --bg: #f5f7fb;
    --white: #ffffff;

    --border: #e7ebf2;

    --shadow-sm: 0 5px 18px rgba(16, 33, 58, 0.06);
    --shadow-md: 0 12px 35px rgba(16, 33, 58, 0.10);
}


/* =========================================================
   02. RESET + GLOBAL WIDTH CONTROL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;

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

    overflow-x: hidden;
}

body {
    margin: 0;

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

    overflow-x: hidden;

    background: var(--bg);
    color: var(--text);

    font-family: "Tajawal", sans-serif;
    font-weight: 400;

    line-height: 1.75;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
textarea,
select,
.btn,
.main-nav {
    font-family: "Tajawal", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

button {
    cursor: pointer;
}

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


/* =========================================================
   03. TOP BAR
========================================================= */

.topbar {
    height: 34px;

    background: #020c1d;
    color: #fff;

    font-size: 12px;
}

.topbar .container {
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;
}


/* Social Icons */

.socials {
    display: flex;
    align-items: center;

    gap: 10px;

    direction: ltr;

    min-width: 0;
}

.socials a {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: #fff;
    font-size: 14px;

    border-radius: 50%;

    transition:
        background .25s ease,
        transform .25s ease;
}

.socials a:hover {
    background: var(--blue);

    transform: translateY(-2px);
}

.socials i {
    line-height: 1;
}


/* =========================================================
   04. HEADER
========================================================= */

.site-header {
    position: relative;
    z-index: 100;

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

    background: #fff;

    border-bottom: 1px solid #e8edf4;
}

.header-inner {
    height: 76px;

    display: flex;
    align-items: center;

    gap: 27px;

    min-width: 0;
}


/* Logo */

.site-branding {
    min-width: 0;
}

.logo {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 10px;

    max-width: 100%;

    color: #081a38;

    font-size: 27px;
    font-weight: 900;
}

.logo-mark {
    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue);
    color: #fff;

    font-size: 27px;
}


/* Navigation */

.main-nav {
    order: 2;

    display: flex;
    align-items: center;

    gap: 25px;

    min-width: 0;
}

.main-nav a {
    color: #152033;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    transition: color .25s ease;
}

.main-nav a:hover {
    color: var(--blue);
}


/* Mobile Menu */

.mobile-menu {
    display: none;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    padding: 0;

    border: 0;

    background: transparent;
    color: #10213b;

    font-size: 24px;

    line-height: 1;
}


/* =========================================================
   05. SEARCH
========================================================= */

.header-search {
    position: relative;

    order: 3;

    flex: 0 0 auto;
}

.search-toggle {
    width: 43px;
    height: 43px;

    padding: 0;

    border: 0;
    border-radius: 8px;

    display: grid;
    place-items: center;

    background: var(--blue);
    color: #fff;

    font-size: 25px;

    transition:
        background .25s ease,
        transform .25s ease;
}

.search-toggle:hover {
    background: #0878ff;

    transform: translateY(-1px);
}

.search-form {
    position: absolute;

    top: calc(100% + 15px);
    left: 0;

    width: 360px;
    max-width: calc(100vw - 30px);

    display: flex;

    gap: 8px;

    padding: 10px;

    background: #fff;

    border-radius: 10px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 10001;
}

.header-search.active .search-form {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.search-form input[type="search"] {
    flex: 1;

    min-width: 0;

    height: 43px;

    padding: 0 14px;

    border: 1px solid #ddd;
    border-radius: 7px;

    font-size: 15px;

    outline: none;
}

.search-form input[type="search"]:focus {
    border-color: var(--blue);
}

.search-form button[type="submit"] {
    height: 43px;

    flex: 0 0 auto;

    padding: 0 18px;

    border: 0;
    border-radius: 7px;

    background: var(--blue);
    color: #fff;

    font-size: 15px;
}


/* =========================================================
   06. HERO SLIDER
========================================================= */

.hero-slider {
    position: relative;

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

    height: 420px;

    overflow: hidden;

    background: var(--navy);

    direction: rtl;

    isolation: isolate;
}

.slider-wrapper {
    position: relative;

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

    height: 100%;
}

.hero-slide {
    position: absolute;

    inset: 0;

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

    height: 100%;

    background-image: var(--desktop-bg);

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}


/* Premium Overlay */

.hero-slide::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 45, .02) 0%,
            rgba(3, 20, 45, .06) 25%,
            rgba(3, 20, 45, .24) 48%,
            rgba(3, 20, 45, .72) 72%,
            rgba(3, 20, 45, .96) 100%
        );

    z-index: 1;

    pointer-events: none;
}


/* Blue Glow */

.hero-slide::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -100px;

    border-radius: 50%;

    background: rgba(0, 156, 255, .14);

    filter: blur(80px);

    z-index: 1;

    pointer-events: none;
}


/* Slide Content */

.slide-content {
    position: relative;

    z-index: 3;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding: 0 30px;

    margin-inline: auto;

    min-width: 0;
}

.slide-text {
    width: 560px;
    max-width: 100%;

    color: #fff;

    opacity: 0;

    transform: translateX(40px);

    transition:
        opacity .8s ease .2s,
        transform .8s ease .2s;
}

.hero-slide.active .slide-text {
    opacity: 1;

    transform: translateX(0);
}


/* Label */

.slide-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    max-width: 100%;

    padding: 5px 16px;

    margin-bottom: 13px;

    border: 1px solid rgba(0, 166, 255, .45);

    border-radius: 30px;

    background: rgba(0, 153, 255, .12);

    color: #19a8ff;

    font-size: 13px;
    font-weight: 700;

    backdrop-filter: blur(5px);

    box-shadow:
        0 0 20px rgba(0, 156, 255, .08);

    overflow: hidden;
}

.slide-label::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -80px;

    width: 45px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .30),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        labelShine 4.5s ease-in-out infinite;
}


/* Heading */

.slide-text h1 {
    margin: 0 0 14px;

    color: #fff;

    font-size: 46px;
    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -.4px;
}

.slide-text h1 strong {
    position: relative;

    display: inline-block;

    color: #069cff;

    font-weight: 900;

    text-shadow:
        0 0 8px rgba(6, 156, 255, .18),
        0 0 22px rgba(6, 156, 255, .12);

    animation:
        titleGlow 3s ease-in-out infinite;
}


/* Paragraph */

.slide-text p {
    width: 100%;
    max-width: 540px;

    margin: 0 0 22px;

    color: #e7eef8;

    font-size: 16px;
    line-height: 1.9;
}


/* =========================================================
   07. HERO BUTTONS
========================================================= */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    min-width: 0;
}

.hero-buttons .btn,
.btn {
    min-height: 44px;

    padding: 10px 22px;

    border: 0;
    border-radius: 8px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    max-width: 100%;
}


/* Primary */

.btn-primary,
.hero-buttons .btn-primary {
    background: var(--blue);
    color: #fff;

    box-shadow:
        0 8px 24px rgba(8, 104, 232, .28);
}

.hero-buttons .btn-primary:hover {
    background: #0878ff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(8, 104, 232, .38);
}


/* Primary Shine */

.hero-buttons .btn-primary {
    position: relative;

    overflow: hidden;
}

.hero-buttons .btn-primary::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -70px;

    width: 45px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .5s ease;

    pointer-events: none;
}

.hero-buttons .btn-primary:hover::after {
    left: 120%;
}


/* White */

.btn-white,
.hero-buttons .btn-white {
    background: rgba(255,255,255,.96);

    color: #15233c;

    box-shadow:
        0 8px 22px rgba(0,0,0,.13);
}

.hero-buttons .btn-white:hover {
    background: #fff;

    transform: translateY(-2px);
}


/* =========================================================
   08. SLIDER ARROWS
========================================================= */

.slider-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: rgba(0,0,0,.18);

    color: #fff;

    font-size: 31px;

    line-height: 1;

    backdrop-filter: blur(6px);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.slider-arrow:hover {
    background: var(--blue);

    border-color: var(--blue);

    transform:
        translateY(-50%)
        scale(1.06);
}

.slider-prev {
    right: 22px;
}

.slider-next {
    left: 22px;
}


/* =========================================================
   09. SLIDER DOTS
========================================================= */

.slider-dots {
    position: absolute;

    bottom: 19px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    display: flex;
    align-items: center;

    gap: 7px;

    direction: ltr;
}

.slider-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 20px;

    background: rgba(255,255,255,.45);

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.slider-dot.active {
    width: 28px;

    background: var(--blue-light);

    box-shadow:
        0 0 7px rgba(7,156,255,.45),
        0 0 16px rgba(7,156,255,.20);
}


/* =========================================================
   10. SERVICES
========================================================= */

.round-section {
    position: relative;

    z-index: 5;

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

    margin-top: -1px;

    padding: 28px 0 30px;

    background: #fff;

    border-radius: 32px 32px 0 0;
}

.section-title {
    text-align: center;

    margin: 0 0 22px;
}

.section-title h2 {
    margin: 0 0 3px;

    color: #0b1e3b;

    font-size: 25px;
    line-height: 1.4;

    font-weight: 900;
}

.section-title p {
    margin: 5px 0 0;

    color: #6b7280;

    font-size: 16px;
}

.underline {
    width: 54px;
    height: 3px;

    margin: 8px auto 0;

    border-radius: 10px;

    background: var(--blue);

    box-shadow:
        0 0 12px rgba(8,104,232,.18);
}


/* Services Grid */

.services {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;

    align-items: stretch;

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


/* Service Card */

.service {
    position: relative;

    min-width: 0;

    min-height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 22px 17px 18px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 100%
        );

    border: 1px solid #e7ebf2;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 6px 22px rgba(16,33,58,.055);

    isolation: isolate;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* Service Variables */

.service:nth-child(1) {
    --service-color: #ef8500;
    --service-glow: rgba(239,133,0,.18);
}

.service:nth-child(2) {
    --service-color: #5a20c9;
    --service-glow: rgba(90,32,201,.17);
}

.service:nth-child(3) {
    --service-color: #1269e8;
    --service-glow: rgba(18,105,232,.18);
}

.service:nth-child(4) {
    --service-color: #078c34;
    --service-glow: rgba(7,140,52,.17);
}


/* Top Light */

.service::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 70px;
    height: 3px;

    transform: translateX(-50%);

    border-radius:
        0 0 10px 10px;

    background: var(--service-color);

    opacity: .55;

    transition:
        width .35s ease,
        opacity .35s ease;
}

.service:hover::before {
    width: 105px;

    opacity: .9;
}


/* Card Hover */

.service:hover {
    transform: translateY(-7px);

    border-color:
        rgba(8,104,232,.16);

    box-shadow:
        0 18px 40px rgba(16,33,58,.11);
}


/* Card Shine */

.service::after {
    content: "";

    position: absolute;

    top: -120%;
    left: -55%;

    width: 35%;
    height: 340%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.48),
            transparent
        );

    transform: rotate(20deg);

    opacity: 0;

    pointer-events: none;

    z-index: 5;

    transition:
        left .7s ease,
        opacity .25s ease;
}

.service:hover::after {
    left: 125%;

    opacity: 1;
}


/* Service Icon */

.service .ico {
    position: relative;

    width: 64px;
    height: 64px;

    flex: none;

    margin: 4px auto 13px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            #f5f7fb
        );

    color: var(--service-color);

    font-size: 36px;
    line-height: 1;

    box-shadow:
        0 7px 20px rgba(16,33,58,.07);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease;
}

.service .ico::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 22px;

    background: var(--service-glow);

    filter: blur(10px);

    opacity: 0;

    z-index: -1;

    transition: opacity .35s ease;
}

.service:hover .ico {
    transform:
        translateY(-3px)
        scale(1.05);

    box-shadow:
        0 10px 25px var(--service-glow);
}

.service:hover .ico::before {
    opacity: 1;
}


/* Service Title */

.service h3 {
    margin: 0 0 7px;

    color: var(--service-color);

    font-size: 17px;
    line-height: 1.5;

    font-weight: 900;

    transition:
        transform .3s ease;
}

.service:hover h3 {
    transform: translateY(-1px);
}


/* Service Description */

.service p {
    width: 100%;
    max-width: 100%;

    min-height: 52px;

    margin: 0 0 15px;

    color: #596579;

    font-size: 15px;
    line-height: 1.8;

    text-align: center;
}


/* Service Button */

.service .btn {
    position: relative;

    margin-top: auto;

    min-height: 38px;

    max-width: 100%;

    padding: 7px 18px;

    border-radius: 8px;

    color: #fff !important;

    font-size: 12px;
    font-weight: 700;

    overflow: hidden;

    box-shadow:
        0 5px 15px rgba(16,33,58,.10);

    transition:
        transform .25s ease,
        filter .25s ease,
        box-shadow .25s ease;
}

.service .btn::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -70px;

    width: 45px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .55s ease;

    pointer-events: none;
}

.service .btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        0 8px 20px var(--service-glow);
}

.service .btn:hover::after {
    left: 120%;
}


/* =========================================================
   11. POS
========================================================= */

.pos-section {
    width: 100%;
    max-width: 100%;

    padding: 18px 0;
}

.pos-box {
    width: 100%;
    max-width: 100%;

    display: grid;

    grid-template-columns:
        1fr 1.35fr 1fr;

    align-items: center;

    gap: 14px;

    min-width: 0;

    padding: 13px;

    background: #fff;

    border: 1px solid #e9edf3;

    border-radius: 13px;

    box-shadow:
        0 4px 18px rgba(16,42,74,.05);
}

.pos-products {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    min-width: 0;
}

.pos-product {
    min-width: 0;

    padding: 8px;

    background: #fff;

    border: 1px solid #e9edf3;

    border-radius: 10px;

    text-align: center;
}

.prod-img {
    height: 100px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #f5f7fa,
            #fff
        );

    color: #243d61;

    font-weight: 900;
}

.pos-product h4 {
    margin: 6px 0 1px;

    font-size: 12px;
}

.price {
    color: #0669e8;

    font-size: 16px;
    font-weight: 900;
}

.pos-copy {
    text-align: center;

    min-width: 0;
}

.pos-copy h2 {
    margin: 0;

    font-size: 22px;
}

.pos-copy p {
    color: #657083;

    font-size: 16px;
}

.pos-features {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin: 8px;

    color: #34445b;

    font-size: 11px;

    flex-wrap: wrap;
}

.pos-right {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   12. YOUTUBE
========================================================= */

.youtube {
    width: 100%;
    max-width: 100%;

    padding: 10px 0 20px;
}

.youtube-box {
    width: 100%;
    max-width: 100%;

    padding: 50px;

    background: #fff;

    border: 1px solid #e9edf3;

    border-radius: 13px;
}

.youtube-grid {
    display: grid;

    grid-template-columns:
        235px repeat(3, 1fr);

    gap: 14px;

    min-width: 0;
}

.subscribe-card {
    min-width: 0;

    padding: 18px;

    background:
        linear-gradient(
            145deg,
            #020b20,
            #081d42
        );

    color: #fff;

    border-radius: 10px;

    text-align: center;
}

.youtube-logo {
    color: #1c8cff;

    font-size: 28px;
    font-weight: 900;
}

.subscribe-card .yt {
    color: #f00;

    font-size: 55px;
    line-height: 1;
}

.subscribe-card p {
    font-size: 12px;
}

.subscribe-card .btn {
    background: #f20d1d;

    color: #fff;

    font-size: 12px;
}

.video-card {
    min-width: 0;

    background: #fff;
}

.video-thumb {
    width: 100%;

    height: 105px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            #071d42,
            #123d6b
        );

    color: #fff;

    border-radius: 8px;

    font-size: 30px;
}

.video-card h4 {
    margin: 7px 0;

    font-size: 12px;
}

.video-card p {
    margin: 0;

    color: #7b8492;

    font-size: 10px;
}


/* =========================================================
   13. CONTENT LISTS
========================================================= */

.content-section {
    width: 100%;
    max-width: 100%;
  padding: 30px 5px;
  
}

.three-cols {
    display: grid;

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

    gap: 16px;

    min-width: 0;
}

.list-box {
    min-width: 0;

    padding: 10px;

    background: #fff;

    border: 1px solid #e7ebf2;

    border-radius: 11px;
}

.list-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 3px 7px 9px;

    border-bottom: 1px solid #eef1f5;
}

.list-head h3 {
    margin: 0;

    font-size: 16px;
}

.list-head a {
    color: var(--blue);

    font-size: 11px;
}

.list-item {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

    padding: 8px 5px;

    border-bottom: 1px solid #f0f2f6;
}

.list-item:last-child {
    border: 0;
}

.list-icon {
    width: 34px;
    height: 34px;

    flex: none;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: #edf4ff;

    color: #1269e8;

    font-weight: 900;
}

.list-text {
    flex: 1;

    min-width: 0;

    font-size: 12px;
    font-weight: 700;
}

.list-text small {
    display: block;

    color: #7b8492;

    font-weight: 400;
}

.rank {
    width: 23px;
    height: 23px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue);

    color: #fff;

    font-size: 11px;
}

 /* =========================================================
   WEBLINKUS FOOTER — PREMIUM
========================================================= */

.site-footer {
    width: 100%;
    max-width: 100%;

    background:
        linear-gradient(
            145deg,
            #020b1d 0%,
            #03132d 55%,
            #061d3e 100%
        );

    color: #fff;

    overflow: hidden;
}


/* =========================================================
   01. FOOTER GRID
========================================================= */

.site-footer .footer-grid {
    display: grid;

    grid-template-columns:
        1.35fr
        1fr
        1fr
        1.15fr;

    gap: 42px;

    padding:
        42px 0 34px;

    min-width: 0;
}


/* =========================================================
   02. FOOTER COLUMNS
========================================================= */

.site-footer .footer-grid > div {
    min-width: 0;
}


/* =========================================================
   03. HEADINGS
========================================================= */

.site-footer h3 {
    position: relative;

    margin: 0 0 15px;

    color: #fff;

    font-size: 16px;
    line-height: 1.5;

    font-weight: 900;
}


/* Small heading line */

.site-footer h3::after {
    content: "";

    display: block;

    width: 34px;
    height: 2px;

    margin-top: 7px;

    border-radius: 10px;

    background:
        var(--blue-light);
}


/* =========================================================
   04. PARAGRAPHS
========================================================= */

.site-footer p {
    margin: 0 0 8px;

    color: #b9c7d9;

    font-size: 12px;
    line-height: 1.8;
}


/* First column description */

.site-footer .footer-grid > div:first-child p {
    max-width: 280px;

    color: #c7d3e3;
}


/* =========================================================
   05. LINKS
========================================================= */

.site-footer a {
    color: #c6d2e2;

    transition:
        color .25s ease,
        padding-right .25s ease;
}

.site-footer a:hover {
    color: #fff;

    padding-right: 4px;
}


/* =========================================================
   06. CONTACT
========================================================= */

.site-footer .footer-grid > div:last-child p {
    color: #d4dfec;

    word-break: break-word;
}


/* =========================================================
   07. BOTTOM BAR
========================================================= */

.site-footer .footer-bottom {
    border-top:
        1px solid rgba(255,255,255,.09);

    padding:
        14px 0;

    background:
        rgba(0,0,0,.14);

    color: #8fa0b5;

    font-size: 11px;

    text-align: center;
}

.site-footer .footer-bottom .container {
    width: min(
        1180px,
        calc(100% - 34px)
    );
}


/* =========================================================
   08. FOOTER GLOW
========================================================= */

.site-footer {
    position: relative;

    isolation: isolate;
}

.site-footer::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    top: -220px;
    right: 25%;

    border-radius: 50%;

    background:
        rgba(0,156,255,.08);

    filter: blur(80px);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   09. MOBILE
========================================================= */

@media (max-width: 700px) {

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

        gap: 26px;

        padding:
            34px 18px 28px;
    }

    .site-footer .footer-grid > div {
        width: 100%;
        max-width: 100%;
    }

    .site-footer h3 {
        margin-bottom: 12px;

        font-size: 15px;
    }

    .site-footer p,
    .site-footer a {
        font-size: 12px;
    }

    .site-footer .footer-grid > div:first-child p {
        max-width: 100%;
    }

    .site-footer .footer-bottom {
        padding:
            13px 18px;
    }

    .site-footer .footer-bottom .container {
        width: 100%;
        max-width: 100%;
    }

}


/* =========================================================
   10. SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .site-footer .footer-grid {
        gap: 22px;

        padding:
            30px 16px 24px;
    }

    .site-footer h3 {
        font-size: 14px;
    }

    .site-footer p,
    .site-footer a {
        font-size: 11px;
    }

}

.newsletter input {
    width: 100%;
    max-width: 100%;

    margin: 5px 0;

    padding: 10px;

    border: 0;

    border-radius: 6px;
}

.newsletter .btn {
    width: 100%;

    padding: 8px;
}

.footer-bottom {
    padding: 10px;

    border-top:
        1px solid rgba(255,255,255,.09);

    color: #aeb9c8;

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   15. LEGACY HERO SUPPORT
========================================================= */

.hero {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 50%,
            #103d72 0,
            #061b3c 35%,
            #020e25 100%
        );

    color: #fff;
}

.hero-inner {
    min-height: 390px;

    display: grid;

    grid-template-columns:
        45% 55%;

    align-items: center;

    gap: 15px;
}

.hero-copy {
    padding: 35px 0;
}

.hero h1 {
    margin: 0 0 13px;

    font-size: 43px;
    line-height: 1.25;

    font-weight: 900;
}

.hero h1 span {
    color: #0699ff;
}

.hero p {
    max-width: 570px;

    margin: 0 0 18px;

    color: #eef5ff;

    font-size: 17px;
}

.trust {
    display: flex;

    gap: 35px;

    margin-top: 25px;
}

.trust div {
    font-size: 12px;

    text-align: center;
}

.trust b {
    display: block;

    color: #fff;

    font-size: 15px;
}

.trust span {
    color: #0ba5ff;

    font-size: 24px;
}

.hero-visual {
    position: relative;

    height: 100%;
    min-height: 390px;

    display: flex;

    align-items: end;
    justify-content: center;
}

.laptop,
.pos-machine,
.scanner,
.printer {
    position: absolute;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #aeb9c8
        );

    box-shadow:
        0 22px 40px #0008;
}

.laptop {
    width: 390px;
    height: 245px;

    right: 155px;
    bottom: 25px;

    transform: skew(-5deg);

    border: 8px solid #24384e;
}

.laptop:after {
    content: "Weblinkus";

    position: absolute;

    inset: 26px;

    display: grid;
    place-items: center;

    background: #06224a;

    color: #fff;

    font-size: 28px;
}

.pos-machine {
    width: 205px;
    height: 145px;

    right: 50px;
    bottom: 55px;

    border: 7px solid #25384e;
}

.pos-machine:after {
    content: "POS";

    position: absolute;

    inset: 18px;

    display: grid;
    place-items: center;

    background: #1d3659;

    color: #fff;

    font-size: 24px;
}

.scanner {
    width: 72px;
    height: 160px;

    right: 0;
    bottom: 48px;

    background: #18202b;
}

.printer {
    width: 160px;
    height: 90px;

    right: 245px;
    bottom: 15px;

    background: #202936;
}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1000px) {

    .hero-slider {
        height: 400px;
    }

    .slide-content {
        padding-inline: 55px;
    }

    .slide-text {
        width: 520px;
    }

    .slide-text h1 {
        font-size: 39px;
    }

    .slide-text p {
        font-size: 15px;
    }

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

    .pos-box {
        grid-template-columns: 1fr;
    }

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

    .three-cols {
        grid-template-columns: 1fr;
    }

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


/* =========================================================
   17. MOBILE MENU
========================================================= */

@media (max-width: 768px) {

    .main-nav {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    .header-inner {
        width: 100%;
        max-width: 100%;

        gap: 10px;
    }

    .site-branding {
        min-width: 0;
        max-width: 100%;
    }

    .header-search {
        flex: 0 0 auto;
    }

    .mobile-menu {
        flex: 0 0 auto;
    }
}


/* =========================================================
   18. MOBILE — MAIN
========================================================= */

@media (max-width: 700px) {

    /* ---------------------------------------------
       GLOBAL WIDTH
    --------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }

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

        max-width: 100%;

        margin-inline: auto;
    }


    /* ---------------------------------------------
       TOPBAR
    --------------------------------------------- */

    .topbar .container {
        justify-content: center;

        width: calc(100% - 20px);
    }

    .topbar-welcome {
        max-width: 100%;

        text-align: center;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }

    .socials {
        display: none;
    }


    /* ---------------------------------------------
       HEADER
    --------------------------------------------- */

    .header-inner {
        width: 100%;
        max-width: 100%;

        height: 65px;

        gap: 10px;

        min-width: 0;
    }

    .site-branding {
        min-width: 0;

        flex: 1 1 auto;
    }

    .logo {
        margin-left: 0;

        max-width: 100%;

        font-size: 22px;
    }

    .logo-mark {
        width: 40px;
        height: 40px;

        font-size: 23px;
    }

    .header-search {
        flex: 0 0 auto;
    }

    .search-toggle {
        width: 40px;
        height: 40px;

        font-size: 22px;
    }

    .mobile-menu {
        width: 40px;
        height: 40px;

        flex: 0 0 auto;

        font-size: 23px;
    }

    .search-form {
        position: fixed;

        top: 75px;

        left: 15px;
        right: 15px;

        width: auto;
        max-width: none;
    }


    /* ---------------------------------------------
       HERO SLIDER
    --------------------------------------------- */

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

        height: 430px;

        overflow: hidden;
    }

    .slider-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .hero-slide {
        width: 100%;
        max-width: 100%;
        height: 100%;

        background-image: var(--mobile-bg);

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .hero-slide::before {
        background:
            linear-gradient(
                90deg,
                rgba(2,13,35,.94),
                rgba(3,22,48,.84)
            );
    }

    .hero-slide::after {
        width: 280px;
        height: 280px;

        right: 50%;
        top: -100px;

        transform:
            translateX(50%);

        opacity: .40;
    }


    /* ---------------------------------------------
       SLIDE CONTENT
    --------------------------------------------- */

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

        height: 100%;

        padding:
            25px 42px 42px;

        justify-content: center;

        text-align: center;
    }

    .slide-text {
        width: 100%;
        max-width: 360px;

        min-width: 0;

        transform:
            translateY(25px);
    }

    .hero-slide.active .slide-text {
        transform:
            translateY(0);
    }


    /* ---------------------------------------------
       LABEL
    --------------------------------------------- */

    .slide-label {
        margin-bottom: 10px;

        padding:
            4px 14px;

        font-size: 11px;
    }


    /* ---------------------------------------------
       TITLE
    --------------------------------------------- */

    .slide-text h1 {
        margin-bottom: 11px;

        font-size: 29px;

        line-height: 1.4;
    }


    /* ---------------------------------------------
       PARAGRAPH
    --------------------------------------------- */

    .slide-text p {
        width: 100%;

        max-width: 340px;

        margin:
            0 auto 17px;

        font-size: 13px;

        line-height: 1.8;
    }


    /* ---------------------------------------------
       BUTTONS
    --------------------------------------------- */

    .hero-buttons {
        justify-content: center;

        gap: 8px;

        flex-wrap: nowrap;
    }

    .hero-buttons .btn {
        min-width: 128px;

        min-height: 41px;

        padding:
            8px 12px;

        font-size: 12px;

        white-space: nowrap;
    }


    /* ---------------------------------------------
       ARROWS
    --------------------------------------------- */

    .slider-arrow {
        width: 34px;
        height: 34px;

        font-size: 25px;
    }

    .slider-prev {
        right: 8px;
    }

    .slider-next {
        left: 8px;
    }


    /* ---------------------------------------------
       DOTS
    --------------------------------------------- */

    .slider-dots {
        bottom: 12px;
    }


    /* ---------------------------------------------
       SERVICES
    --------------------------------------------- */

    .round-section {
        width: 100%;
        max-width: 100%;

        padding-top: 25px;

        border-radius:
            25px 25px 0 0;
    }

    .section-title {
        max-width: 100%;
    }

    .section-title h2 {
        font-size: 23px;
    }

    .section-title p {
        font-size: 13px;
    }

    .services {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .service {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        min-height: 0;

        padding:
            21px 17px 18px;
    }

    .service p {
        width: 100%;

        max-width: 330px;

        min-height: 0;
    }


    /* ---------------------------------------------
       POS
    --------------------------------------------- */

    .pos-box {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr;

        min-width: 0;
    }

    .pos-products,
    .pos-right {
        width: 100%;
        max-width: 100%;

        grid-template-columns:
            1fr 1fr;

        min-width: 0;
    }

    .pos-product {
        min-width: 0;
    }


    /* ---------------------------------------------
       YOUTUBE
    --------------------------------------------- */

    .youtube-box {
        width: 100%;
        max-width: 100%;

        padding: 22px 16px;
    }

    .youtube-grid {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr;

        min-width: 0;
    }


    /* ---------------------------------------------
       CONTENT LISTS
    --------------------------------------------- */

    .three-cols {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr;

        min-width: 0;
    }


    /* ---------------------------------------------
       FOOTER
    --------------------------------------------- */

    .footer-grid {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr;

        min-width: 0;
    }

}


/* =========================================================
   19. SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .pos-products,
    .pos-right {
        grid-template-columns:
            1fr 1fr;
    }

}


/* =========================================================
   20. VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .hero-slider {
        height: 410px;
    }

    .slide-content {
        padding:
            22px 37px 40px;
    }

    .slide-text {
        max-width: 325px;
    }

    .slide-text h1 {
        font-size: 27px;
    }

    .slide-text p {
        max-width: 295px;

        font-size: 12px;

        line-height: 1.75;
    }

    .hero-buttons {
        gap: 6px;
    }

    .hero-buttons .btn {
        min-width: 118px;

        padding:
            8px 9px;

        font-size: 11px;
    }

    .slider-arrow {
        width: 32px;
        height: 32px;

        font-size: 23px;
    }

    .service .ico {
        width: 58px;
        height: 58px;

        font-size: 33px;
    }

}


/* =========================================================
   21. LARGE SCREENS
========================================================= */

@media (min-width: 1400px) {

    .hero-slider {
        height: 450px;
    }

    .slide-text h1 {
        font-size: 50px;
    }

}


/* =========================================================
   22. ANIMATIONS
========================================================= */

@keyframes sliderShine {

    0% {
        left: -30%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    45% {
        left: 115%;
        opacity: 0;
    }

    100% {
        left: 115%;
        opacity: 0;
    }

}

.hero-slider::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -30%;

    width: 18%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    transform: skewX(-18deg);

    z-index: 4;

    pointer-events: none;

    animation:
        sliderShine 7s ease-in-out infinite;
}


@keyframes titleGlow {

    0%,
    100% {
        text-shadow:
            0 0 8px rgba(6,156,255,.18),
            0 0 22px rgba(6,156,255,.12);
    }

    50% {
        text-shadow:
            0 0 10px rgba(6,156,255,.38),
            0 0 30px rgba(6,156,255,.24);
    }

}


/* =========================================================
   23. ACCESSIBILITY
========================================================= */

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

    .hero-slider::after,
    .slide-text h1 strong,
    .slide-label::after {
        animation: none;
    }

    .hero-slide,
    .slide-text,
    .service,
    .service::before,
    .service::after,
    .service .ico,
    .service h3,
    .service .btn,
    .service .btn::after {
        transition: none;
    }

}



/* =========================================================
   MOBILE FOOTER SPACING
========================================================= */

@media (max-width: 700px) {

    .footer-grid {
        padding-left: 18px;
        padding-right: 18px;
    }

    .footer p,
    .footer a,
    .footer h3 {
        padding-right: 4px;
    }

}



/* =========================================================
   WEBLINKUS POS SECTION — PREMIUM
========================================================= */


/* =========================================================
   01. POS SECTION
========================================================= */

.pos-section {
    width: 100%;
    max-width: 100%;

    padding: 22px 0 28px;

    background: var(--bg);
}


/* =========================================================
   02. MAIN POS BOX
========================================================= */

.pos-box {
    position: relative;

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

    display: grid;

    grid-template-columns:
        1fr 1.25fr 1fr;

    align-items: center;

    gap: 18px;

    min-width: 0;

    padding: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f9fbff 100%
        );

    border: 1px solid #e5ebf4;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(15, 35, 65, .07);
}


/* Soft background glow */

.pos-box::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -150px;
    right: 50%;

    transform: translateX(50%);

    border-radius: 50%;

    background:
        rgba(8, 104, 232, .07);

    filter: blur(60px);

    pointer-events: none;
}


/* =========================================================
   03. PRODUCTS GRID
========================================================= */

.pos-products,
.pos-right {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;

    min-width: 0;
}


/* =========================================================
   04. PRODUCT CARD
========================================================= */

.pos-product {
    position: relative;

    min-width: 0;

    padding: 10px;

    background: #fff;

    border: 1px solid #e7ebf2;

    border-radius: 14px;

    text-align: center;

    box-shadow:
        0 5px 18px rgba(16, 33, 58, .05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* Product hover */

.pos-product:hover {
    transform: translateY(-5px);

    border-color:
        rgba(8, 104, 232, .18);

    box-shadow:
        0 15px 32px rgba(16, 33, 58, .11);
}


/* =========================================================
   05. PRODUCT IMAGE AREA
========================================================= */

.prod-img {
    width: 100%;

    height: 145px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 10px;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #f6f8fb,
            #ffffff
        );

    color: #24456f;

    font-weight: 900;
}


.prod-img img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: contain;

    object-position: center;

    transition:
        transform .35s ease;
}


.pos-product:hover .prod-img img {
    transform: scale(1.04);
}


/* =========================================================
   06. PRODUCT TITLE
========================================================= */

.pos-product h4 {
    margin: 10px 4px 3px;

    color: #182b46;

    font-size: 13px;
    line-height: 1.5;

    font-weight: 800;
}


/* =========================================================
   07. PRICE
========================================================= */

.price {
    color: var(--blue);

    font-size: 16px;
    line-height: 1.4;

    font-weight: 900;
}


/* =========================================================
   08. CENTER CONTENT
========================================================= */

.pos-copy {
    position: relative;

    z-index: 2;

    min-width: 0;

    padding: 10px 12px;

    text-align: center;
}


/* Small label */

.pos-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;

    padding: 10px 25px;

    border: 1px solid rgba(8, 104, 232, .18);

    border-radius: 30px;

    background:
        rgba(8, 104, 232, .06);

    color: var(--blue);

    font-size: 15px;
    font-weight: 800;
}


/* Heading */

.pos-copy h2 {
    margin: 0 0 9px;

    color: #0b1e3b;

    font-size: 28px;
    line-height: 1.35;

    font-weight: 900;
}


.pos-copy h2 strong {
    color: var(--blue);
}


/* Description */

.pos-copy p {
    max-width: 390px;

    margin: 0 auto 16px;

    color: #68768b;

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   09. FEATURES
========================================================= */

.pos-features {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    flex-wrap: wrap;

    margin: 0 0 18px;
}


.pos-features span {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding: 5px 10px;

    border: 1px solid #e8edf4;

    border-radius: 8px;

    background: #fff;

    color: #40516a;

    font-size: 10px;
    font-weight: 700;

    box-shadow:
        0 3px 10px rgba(16, 33, 58, .04);
}


/* =========================================================
   10. MAIN BUTTON
========================================================= */

.pos-copy .btn-primary {
    min-width: 165px;

    min-height: 43px;

    padding: 9px 20px;

    border-radius: 8px;

    font-size: 13px;

    box-shadow:
        0 8px 22px rgba(8, 104, 232, .22);
}


/* =========================================================
   11. TABLET
========================================================= */

@media (max-width: 1000px) {

    .pos-box {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 18px;
    }

    .pos-copy {
        order: -1;
    }

    .pos-copy h2 {
        font-size: 25px;
    }

    .pos-products,
    .pos-right {
        width: 100%;
    }

}


/* =========================================================
   12. MOBILE
========================================================= */

@media (max-width: 600px) {

    .pos-section {
        padding:
            18px 0 22px;
    }

    .pos-box {
        width: 100%;
        max-width: 100%;

        gap: 14px;

        padding: 14px;

        border-radius: 17px;
    }

    .pos-copy {
        padding:
            6px 4px 10px;
    }

    .pos-label {
        margin-bottom: 8px;

        padding:
            4px 12px;

        font-size: 10px;
    }

    .pos-copy h2 {
        font-size: 23px;
        line-height: 1.4;
    }

    .pos-copy p {
        max-width: 310px;

        font-size: 12px;
        line-height: 1.8;

        margin-bottom: 13px;
    }

    .pos-features {
        gap: 6px;

        margin-bottom: 14px;
    }

    .pos-features span {
        min-height: 29px;

        padding:
            4px 8px;

        font-size: 9px;
    }

    .pos-copy .btn-primary {
        min-width: 150px;

        min-height: 41px;

        font-size: 12px;
    }

    .pos-products,
    .pos-right {
        grid-template-columns:
            1fr 1fr;

        gap: 9px;
    }

    .pos-product {
        padding: 7px;

        border-radius: 12px;
    }

    .prod-img {
        height: 120px;

        padding: 8px;

        border-radius: 9px;
    }

    .pos-product h4 {
        margin-top: 8px;

        font-size: 11px;
    }

    .price {
        font-size: 14px;
    }

}


/* =========================================================
   13. VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .pos-box {
        padding: 11px;
    }

    .pos-products,
    .pos-right {
        gap: 7px;
    }

    .prod-img {
        height: 105px;
    }

    .pos-product h4 {
        font-size: 10px;
    }

    .price {
        font-size: 13px;
    }

    .pos-copy h2 {
        font-size: 21px;
    }

}


/* =========================================================
   WEBLINKUS YOUTUBE — PREMIUM SECTION
========================================================= */


/* =========================================================
   01. SECTION
========================================================= */

.youtube {
    width: 100%;
    max-width: 100%;

    padding: 18px 0 28px;

    background: var(--bg);
}


/* =========================================================
   02. MAIN BOX
========================================================= */

.youtube-box {
    position: relative;

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

    padding: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );

    border: 1px solid #e5ebf4;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(15, 35, 65, .07);
}


/* Soft blue glow */

.youtube-box::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -170px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(8, 104, 232, .06);

    filter: blur(65px);

    pointer-events: none;
}


/* =========================================================
   03. SECTION TITLE
========================================================= */

.youtube-box > .section-title {
    position: relative;

    z-index: 2;

    margin-bottom: 24px;
}

.youtube-box > .section-title h2 {
    color: #0b1e3b;

    font-size: 25px;
    font-weight: 900;
}

.youtube-box > .section-title p {
    color: #68768b;

    font-size: 13px;
}


/* =========================================================
   04. GRID
========================================================= */

.youtube-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        225px
        repeat(3, 1fr);

    gap: 15px;

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

    min-width: 0;
}


/* =========================================================
   05. SUBSCRIBE CARD
========================================================= */

.subscribe-card {
    position: relative;

    min-width: 0;

    min-height: 250px;

    padding: 22px 16px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    color: #fff;

    border-radius: 15px;

    background:
        radial-gradient(
            circle at 50% 0%,
            #123c72 0,
            #081b3d 45%,
            #020b20 100%
        );

    box-shadow:
        0 12px 30px rgba(2, 11, 32, .15);
}


/* Subscribe card glow */

.subscribe-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -70px;
    right: -60px;

    border-radius: 50%;

    background:
        rgba(255, 30, 30, .16);

    filter: blur(30px);
}


/* YouTube logo */

.youtube-logo {
    position: relative;

    z-index: 2;

    color: #fff;

    font-size: 22px;
    font-weight: 900;
}


/* YouTube icon */

.subscribe-card .yt {
    position: relative;

    z-index: 2;

    width: 64px;
    height: 46px;

    margin: 10px auto;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #ff0000;

    color: #fff;

    font-size: 30px;

    line-height: 1;

    box-shadow:
        0 8px 22px rgba(255, 0, 0, .28);
}


/* Description */

.subscribe-card p {
    position: relative;

    z-index: 2;

    margin: 7px 0 12px;

    color: #dce8f8;

    font-size: 12px;

    line-height: 1.7;
}


/* Subscribe Button */

.subscribe-card .btn {
    position: relative;

    z-index: 2;

    min-width: 135px;

    min-height: 37px;

    padding: 7px 15px;

    border-radius: 8px;

    background: #f20d1d;

    color: #fff;

    font-size: 12px;

    box-shadow:
        0 7px 18px rgba(242, 13, 29, .22);

    transition:
        transform .25s ease,
        filter .25s ease;
}

.subscribe-card .btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.06);
}


/* =========================================================
   06. VIDEO CARD
========================================================= */

.video-card {
    position: relative;

    min-width: 0;

    padding: 10px;

    background: #fff;

    border: 1px solid #e7ebf2;

    border-radius: 14px;

    box-shadow:
        0 5px 18px rgba(16, 33, 58, .05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

    overflow: hidden;
}

.video-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(8, 104, 232, .16);

    box-shadow:
        0 15px 32px rgba(16, 33, 58, .11);
}


/* =========================================================
   07. VIDEO THUMB
========================================================= */

.video-thumb {
    position: relative;

    width: 100%;

    height: 145px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #071d42,
            #123d6b
        );

    color: #fff;

    font-size: 28px;
}


/* =========================================================
   REAL YOUTUBE PLAY BUTTON
========================================================= */

.video-thumb {
    position: relative;
    overflow: hidden;
}


/* Real thumbnail */

.video-thumb img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .4s ease,
        filter .35s ease;
}


/* Play button from PHP */

.video-thumb .play-button {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 50px;
    height: 50px;

    transform:
        translate(-50%, -50%);

    display: grid;
    place-items: center;

    padding-left: 3px;

    border-radius: 50%;

    background: rgba(255, 0, 0, .94);

    color: #fff;

    font-size: 18px;

    line-height: 1;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .22);

    z-index: 3;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* Hover */

.video-card:hover .video-thumb img {
    transform: scale(1.05);

    filter: brightness(.88);
}

.video-card:hover .video-thumb .play-button {
    transform:
        translate(-50%, -50%)
        scale(1.10);

    background: #ff0000;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .28);
}

/* Thumbnail image support */

.video-thumb img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}

.video-card:hover .video-thumb img {
    transform: scale(1.04);
}


/* =========================================================
   08. VIDEO TITLE
========================================================= */

.video-card h4 {
    margin: 10px 3px 4px;

    color: #182b46;

    font-size: 13px;
    line-height: 1.6;

    font-weight: 800;
}


/* Meta */

.video-card p {
    margin: 0 3px;

    color: #7b8798;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   09. MOBILE
========================================================= */

@media (max-width: 700px) {

    .youtube {
        padding:
            16px 0 24px;
    }

    .youtube-box {
        padding:
            22px 14px;

        border-radius: 17px;
    }

    .youtube-box > .section-title {
        margin-bottom: 20px;
    }

    .youtube-box > .section-title h2 {
        font-size: 22px;
    }

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

        gap: 12px;
    }

    .subscribe-card {
        min-height: 225px;

        padding: 20px 15px;
    }

    .video-card {
        padding: 8px;

        border-radius: 13px;
    }

    .video-thumb {
        height: 180px;

        border-radius: 9px;
    }

    .video-card h4 {
        margin-top: 9px;

        font-size: 13px;
    }

}


/* =========================================================
   10. SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .youtube-box {
        padding:
            20px 11px;
    }

    .video-thumb {
        height: 165px;
    }

    .subscribe-card {
        min-height: 215px;
    }

}



/* =========================================================
   WEBLINKUS YOUTUBE — FINAL POLISH
========================================================= */


/* =========================================================
   01. REAL THUMBNAIL 16:9
========================================================= */

.video-thumb {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    height: auto;

    overflow: hidden;

    border-radius: 10px;
}


/* =========================================================
   02. REAL YOUTUBE IMAGE
========================================================= */

.video-thumb img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .4s ease,
        filter .35s ease;
}


/* =========================================================
   03. REAL PLAY BUTTON FROM PHP
========================================================= */

.video-thumb .play-button {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 50px;
    height: 50px;

    transform:
        translate(-50%, -50%);

    display: grid;
    place-items: center;

    padding-left: 3px;

    border-radius: 50%;

    background: rgba(255, 0, 0, .94);

    color: #fff;

    font-size: 18px;
    line-height: 1;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .22);

    z-index: 3;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* =========================================================
   04. VIDEO HOVER
========================================================= */

.video-card:hover .video-thumb img {
    transform: scale(1.05);

    filter: brightness(.88);
}

.video-card:hover .video-thumb .play-button {
    transform:
        translate(-50%, -50%)
        scale(1.10);

    background: #ff0000;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .28);
}


/* =========================================================
   05. SUBSCRIBERS NUMBER
========================================================= */

.subscribe-card p:last-child {
    margin-top: 10px;

    color: #8fd0ff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .2px;
}


/* =========================================================
   06. ALL VIDEOS BUTTON
========================================================= */

.youtube-more {
    display: flex;

    justify-content: center;

    margin-top: 22px;
}

.youtube-more-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 42px;

    padding: 9px 18px;

    border: 1px solid #dfe7f2;

    border-radius: 9px;

    background: #fff;

    color: var(--blue);

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 5px 16px rgba(16, 33, 58, .05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.youtube-more-btn:hover {
    transform: translateY(-2px);

    border-color:
        rgba(8, 104, 232, .25);

    background: #fbfdff;

    box-shadow:
        0 10px 24px rgba(8, 104, 232, .10);
}

.youtube-more-icon {
    font-size: 17px;

    line-height: 1;

    transition:
        transform .25s ease;
}

.youtube-more-btn:hover .youtube-more-icon {
    transform: translateX(-3px);
}


/* =========================================================
   07. MOBILE
========================================================= */

@media (max-width: 700px) {

    .youtube-more {
        margin-top: 18px;
    }

    .youtube-more-btn {
        min-height: 40px;

        padding:
            8px 15px;

        font-size: 12px;
    }

    .video-thumb {
        aspect-ratio: 16 / 9;

        border-radius: 9px;
    }

    .video-thumb .play-button {
        width: 46px;
        height: 46px;

        font-size: 17px;
    }

}


/* =========================================================
   08. SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .video-thumb .play-button {
        width: 43px;
        height: 43px;

        font-size: 16px;
    }

}

/* =========================================================
   WEBLINKUS CONTACT CTA — LIGHT MODERN + PREMIUM SHINE
========================================================= */

.contact-section {
    width: 100%;
    max-width: 100%;

    padding: 22px 0 30px;

    background: var(--bg);
}


/* =========================================================
   MAIN BOX
========================================================= */

.contact-box {
    position: relative;

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

    min-height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 38px 24px;

    overflow: hidden;

    border: 1px solid #e5ebf3;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );

    box-shadow:
        0 12px 35px rgba(16, 33, 58, .07);

    isolation: isolate;
}


/* =========================================================
   PREMIUM SHINE — نفس فكرة Slider
========================================================= */

.contact-box::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -30%;

    width: 18%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(8, 104, 232, .055),
            transparent
        );

    transform: skewX(-18deg);

    z-index: 1;

    pointer-events: none;

    animation:
        contactShine 7s ease-in-out infinite;
}


@keyframes contactShine {

    0% {
        left: -30%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    45% {
        left: 115%;
        opacity: 0;
    }

    100% {
        left: 115%;
        opacity: 0;
    }

}


/* =========================================================
   SOFT MODERN GLOW
========================================================= */

.contact-box::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(8, 104, 232, .045),
            transparent 58%
        );

    z-index: 0;

    pointer-events: none;
}


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

.contact-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 720px;

    text-align: center;
}


/* =========================================================
   LABEL
========================================================= */

.contact-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;

    padding: 10px 25px;

    border: 1px solid rgba(8, 104, 232, .13);

    border-radius: 30px;

    background:
        rgba(8, 104, 232, .045);

    color: var(--blue);

    font-size: 16px;
    font-weight: 800;
}


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

.contact-content h2 {
    margin: 0 0 9px;

    color: #0b1e3b;

    font-size: 30px;
    line-height: 1.4;

    font-weight: 900;
}

.contact-content h2 strong {
    color: var(--blue);

    text-shadow:
        0 0 18px rgba(8, 104, 232, .10);
}


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

.contact-content p {
    max-width: 620px;

    margin: 0 auto 19px;

    color: #66758a;

    font-size: 16px;
    line-height: 1.85;
}


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

.contact-btn {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 44px;

    padding: 10px 22px;

    border: 0;

    border-radius: 9px;

    background: var(--blue);

    color: #fff;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 8px 22px rgba(8, 104, 232, .22);

    overflow: hidden;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


/* Button Shine */

.contact-btn::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -65px;

    width: 42px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .55s ease;

    pointer-events: none;
}

.contact-btn:hover {
    background: #0878ff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(8, 104, 232, .30);
}

.contact-btn:hover::after {
    left: 120%;
}


/* Arrow */

.contact-btn span {
    font-size: 17px;

    line-height: 1;

    transition:
        transform .25s ease;
}

.contact-btn:hover span {
    transform: translateX(-3px);
}


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

@media (max-width: 700px) {

    .contact-section {
        padding: 16px 0 24px;
    }

    .contact-box {
        min-height: 220px;

        padding: 34px 18px;

        border-radius: 18px;
    }

    .contact-content h2 {
        font-size: 24px;
    }

    .contact-content p {
        max-width: 320px;

        font-size: 12px;

        line-height: 1.8;
    }

    .contact-btn {
        min-height: 42px;

        padding: 9px 18px;

        font-size: 12px;
    }
}


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

@media (max-width: 400px) {

    .contact-box {
        min-height: 215px;

        padding: 30px 15px;
    }

    .contact-content h2 {
        font-size: 22px;
    }
}


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

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

    .contact-box::before {
        animation: none;
    }

    .contact-btn,
    .contact-btn::after,
    .contact-btn span {
        transition: none;
    }
}


/* =========================================================
   WEBLINKUS TRUST BAR
========================================================= */

.trust-bar {
    width: 100%;
    max-width: 100%;

    padding: 10px 0;

    background: #fff;

    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #e7edf5;

    box-shadow:
        0 4px 16px rgba(16, 33, 58, .035);
}

.trust-items {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-items: center;

    width: 100%;
}

.trust-item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 0;

    padding: 7px 18px;
}

.trust-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 15%;
    right: 0;

    width: 1px;
    height: 70%;

    background: #e8edf4;
}

.trust-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #f4f8ff,
            #edf4ff
        );

    color: var(--blue);

    font-size: 25px;
    font-weight: 900;

    box-shadow:
        0 5px 15px rgba(8, 104, 232, .08);
}

.trust-text {
    display: flex;
    flex-direction: column;

    min-width: 0;

    line-height: 1.35;
}

.trust-text strong {
    color: #0b1e3b;

    font-size: 14px;
    font-weight: 900;
}

.trust-text span {
    color: #718096;

    font-size: 16px;
}


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

@media (max-width: 700px) {

    .trust-bar {
        padding: 8px 0;
    }

    .trust-items {
        grid-template-columns:
            1fr 1fr;

        gap: 4px 0;
    }

    .trust-item {
        justify-content: flex-start;

        padding:
            8px 8px;
    }

    .trust-item:nth-child(2)::after {
        display: none;
    }

    .trust-item:nth-child(1)::after,
    .trust-item:nth-child(3)::after {
        top: 15%;
        height: 70%;
    }

    .trust-icon {
        width: 34px;
        height: 34px;

        border-radius: 10px;

        font-size: 14px;
    }

    .trust-text strong {
        font-size: 12px;
    }

    .trust-text span {
        font-size: 10px;
    }
}


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

@media (max-width: 400px) {

    .trust-item {
        gap: 7px;
        padding: 7px 5px;
    }

    .trust-icon {
        width: 31px;
        height: 31px;
    }

    .trust-text strong {
        font-size: 11px;
    }

    .trust-text span {
        font-size: 9px;
    }

}



/* =========================================================
   WEBLINKUS — WHY US
========================================================= */

.why-weblinkus {
    position: relative;

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

    padding: 34px 0 30px;

    background:
        linear-gradient(
            180deg,
           #e5eaf5b3  0%,
            #ffffff 100%
        );

 



    overflow: hidden;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.why-weblinkus .section-title {
    position: relative;

    z-index: 2;

    margin-bottom: 24px;
}

.why-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 8px;

    padding: 10px 25px;

    border: 1px solid rgba(8,104,232,.12);

    border-radius: 30px;

    background: rgba(8,104,232,.045);

    color: var(--blue);

    font-size: 16px;
    font-weight: 800;
}

.why-weblinkus .section-title h2 {
    margin-bottom: 5px;

    color: #0b1e3b;

    font-size: 26px;
    line-height: 1.4;
}

.why-weblinkus .section-title h2 strong {
    color: var(--blue);
}

.why-weblinkus .section-title p {
    max-width: 620px;

    margin-inline: auto;

    color: #6b7280;

    font-size: 16px;
}


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

.why-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

    width: 100%;
}


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

.why-card {
    position: relative;

    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 18px 16px;

    background: #fff;

    border: 1px solid #e7edf4;

    border-radius: 15px;

    box-shadow:
        0 5px 20px rgba(16,33,58,.045);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

    overflow: hidden;
}

.why-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(8,104,232,.15);

    box-shadow:
        0 15px 30px rgba(16,33,58,.09);
}


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

.why-card::after {
    content: "";

    position: absolute;

    top: -100%;
    left: -45%;

    width: 30%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform: rotate(20deg);

    opacity: 0;

    transition:
        left .65s ease,
        opacity .25s ease;

    pointer-events: none;
}

.why-card:hover::after {
    left: 120%;

    opacity: 1;
}


/* =========================================================
   ICON
========================================================= */

.why-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #f4f8ff,
            #edf4ff
        );

    color: var(--blue);

    font-size: 18px;
    font-weight: 900;

    box-shadow:
        0 6px 16px rgba(8,104,232,.08);
}


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

.why-content {
    min-width: 0;
}

.why-content h3 {
    margin: 1px 0 5px;

    color: #172a45;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 900;
}

.why-content p {
    margin: 0;

    color: #66758a;

    font-size: 14px;
    line-height: 1.8;
    text-align: justify ;
}


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

@media (max-width: 1000px) {

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

}


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

@media (max-width: 700px) {

    .why-weblinkus {
        padding:
            28px 0 24px;
    }

    .why-weblinkus .section-title {
        margin-bottom: 20px;
    }

    .why-weblinkus .section-title h2 {
        font-size: 23px;
    }

    .why-weblinkus .section-title p {
        max-width: 320px;

        font-size: 12px;
    }

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

        gap: 10px;
    }

    .why-card {
        display: block;

        padding:
            16px 13px;

        border-radius: 13px;

        text-align: center;
    }

    .why-icon {
        margin: 0 auto 10px;
    }

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

    .why-content p {
        font-size: 10px;
        line-height: 1.75;
    }

}


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

@media (max-width: 400px) {

    .why-grid {
        gap: 8px;
    }

    .why-card {
        padding:
            14px 10px;
    }

    .why-icon {
        width: 42px;
        height: 42px;

        font-size: 16px;
    }

    .why-content h3 {
        font-size: 13px;
    }

    .why-content p {
        font-size: 9.5px;
    }

}



/* =========================================================
   WEBLINKUS — OUR WORK
========================================================= */

.our-work {
    width: 100%;
    max-width: 100%;

    padding: 34px 0 32px;

    background: #fff;
}


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

.our-work .section-title {
    margin-bottom: 24px;
}

.work-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 8px;

    padding: 10px 25px;

    border: 1px solid rgba(8,104,232,.12);

    border-radius: 30px;

    background: rgba(8,104,232,.045);

    color: var(--blue);

    font-size: 16px;
    font-weight: 800;
}

.our-work .section-title h2 {
    margin: 0 0 5px;

    color: #0b1e3b;

    font-size: 26px;
    line-height: 1.4;
}

.our-work .section-title h2 strong {
    color: var(--blue);
}

.our-work .section-title p {
    color: #6b7280;

    font-size: 16px;
}


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

.work-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    width: 100%;
}


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

.work-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e5ebf3;

    border-radius: 15px;

    box-shadow:
        0 6px 22px rgba(16,33,58,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.work-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(8,104,232,.16);

    box-shadow:
        0 18px 36px rgba(16,33,58,.11);
}


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

.work-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #eef3f9;
}

.work-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: cover;

    transition:
        transform .45s ease,
        filter .35s ease;
}

.work-card:hover .work-image img {
    transform: scale(1.05);

    filter: brightness(.84);
}


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

.work-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(3,19,45,.28);

    opacity: 0;

    transition:
        opacity .3s ease;
}

.work-card:hover .work-overlay {
    opacity: 1;
}

.work-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 39px;

    padding: 8px 14px;

    border-radius: 8px;

    background: rgba(255,255,255,.96);

    color: var(--blue);

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(0,0,0,.16);
}

.work-link span {
    font-size: 15px;
}


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

.work-content {
    padding: 12px 13px 14px;

    text-align: right;
}

.work-content h3 {
    margin: 0 0 3px;

    color: #182b46;

    font-size: 14px;
    line-height: 1.5;

    font-weight: 900;
}

.work-content span {
    color: #7a8798;

    font-size: 10px;
}


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

.work-more {
    display: flex;

    justify-content: center;

    margin-top: 22px;
}

.work-more-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 42px;

    padding: 9px 18px;

    border: 1px solid #dfe7f2;

    border-radius: 9px;

    background: #fff;

    color: var(--blue);

    font-size: 12px;
    font-weight: 800;

    box-shadow:
        0 5px 16px rgba(16,33,58,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.work-more-btn:hover {
    transform: translateY(-2px);

    border-color:
        rgba(8,104,232,.22);

    box-shadow:
        0 10px 24px rgba(8,104,232,.10);
}


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

@media (max-width: 1000px) {

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

}


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

@media (max-width: 700px) {

    .our-work {
        padding:
            28px 0 26px;
    }

    .our-work .section-title h2 {
        font-size: 23px;
    }

    .our-work .section-title p {
        font-size: 12px;
    }

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

        gap: 10px;
    }

    .work-card {
        border-radius: 13px;
    }

    .work-content {
        padding:
            10px 10px 12px;
    }

    .work-content h3 {
        font-size: 12px;
    }

    .work-content span {
        font-size: 9px;
    }

    .work-overlay {
        display: none;
    }

}


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

@media (max-width: 400px) {

    .work-grid {
        gap: 8px;
    }

    .work-content h3 {
        font-size: 11px;
    }

}