/*
بداية كود هيرو الطريق دوت كوم النهائي المعدل
*/

.ag-home-main {
    min-height: 100vh;
    overflow-x: hidden;
}

.ag-hero {
    --hero-accent-1: #2563eb;
    --hero-accent-2: #19c7ff;
    --hero-accent-3: #22c55e;
    --hero-title-size: 46px;
    --hero-mobile-title-size: 30px;
    --hero-laptop-offset: -34px;
    --hero-height: 640px;
    position: relative;
    min-height: var(--hero-height);
    padding: 30px 0 34px;
    overflow: hidden;
    isolation: isolate;
    color: #07111f;
    background:
        radial-gradient(circle at 20% 20%, rgba(25,199,255,.08), transparent 30%),
        radial-gradient(circle at 82% 25%, rgba(37,99,235,.07), transparent 34%),
        linear-gradient(135deg, #fbfdff 0%, #f2f8ff 48%, #ffffff 100%);
}

html[data-theme="dark"] .ag-hero {
    color: #ffffff;
    background:
        radial-gradient(circle at 20% 20%, rgba(25,199,255,.14), transparent 28%),
        radial-gradient(circle at 82% 25%, rgba(124,58,237,.18), transparent 32%),
        linear-gradient(135deg, #030817 0%, #071835 50%, #07051f 100%);
}

.ag-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -5;
    background:
        linear-gradient(90deg, rgba(37,99,235,.022) 1px, transparent 1px),
        linear-gradient(0deg, rgba(37,99,235,.022) 1px, transparent 1px);
    background-size: 86px 86px;
    opacity: .48;
}

html[data-theme="dark"] .ag-hero::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
    opacity: .72;
}

.ag-hero-bg,
.ag-hero-glow,
.ag-hero-line,
.ag-hero-dot {
    position: absolute;
    pointer-events: none;
}

.ag-hero-bg {
    inset: 0;
    z-index: -2;
}

.ag-hero-glow {
    width: 440px;
    height: 440px;
    border-radius: 999px;
    filter: blur(30px);
    opacity: .14;
}

html[data-theme="dark"] .ag-hero-glow {
    opacity: .36;
}

.ag-hero-glow-1 {
    right: -120px;
    top: 110px;
    background: var(--hero-accent-2);
}

.ag-hero-glow-2 {
    left: -130px;
    bottom: -90px;
    background: var(--hero-accent-1);
}

.ag-hero-line {
    height: 1px;
    width: 360px;
    background: linear-gradient(90deg, transparent, rgba(25,199,255,.28), transparent);
    transform: rotate(-24deg);
    opacity: .30;
}

html[data-theme="dark"] .ag-hero-line {
    opacity: .55;
}

.ag-hero-line-1 {
    top: 18%;
    left: -80px;
}

.ag-hero-line-2 {
    bottom: 12%;
    right: -80px;
}

.ag-hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hero-accent-2);
    box-shadow: 0 0 18px rgba(25,199,255,.36);
    opacity: .56;
    animation: agHeroDot 6s ease-in-out infinite;
}

.ag-hero-dot-1 {
    top: 23%;
    right: 17%;
}

.ag-hero-dot-2 {
    bottom: 22%;
    left: 11%;
    width: 9px;
    height: 9px;
    animation-delay: -2s;
}

.ag-hero-container {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(430px, .98fr) minmax(460px, 1.02fr);
    gap: 54px;
    align-items: center;
    direction: ltr;
}

.ag-hero-visual {
    order: 1;
    direction: rtl;
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    perspective: 1000px;
    padding-top: 0;
}

.ag-hero-content {
    order: 2;
    direction: rtl;
    position: relative;
    z-index: 5;
    text-align: right;
    transform: translateY(-32px);
}

/*
بداية كود كتابة الهيرو والفرشة
*/

.ag-writing-board {
    position: relative;
    width: min(100%, 660px);
    min-height: 166px;
    margin-bottom: 4px;
    transform: rotate(-1deg);
}


/*
بداية كود Pen Tool وخطوط الهيرو
*/




/*
بداية كود Pen Tool وخطوط الهيرو بالتوقيت النهائي
*/

.ag-pen-tool {
    position: absolute;
    z-index: 9;
    right: 420px;
    top: 92px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--hero-accent-1), var(--hero-accent-2));
    box-shadow: 0 16px 34px rgba(37,99,235,.20);
    opacity: 0;
    animation: agPenMove 1.65s ease-in-out 3.55s forwards;
}

.ag-pen-tool i {
    font-size: 22px;
}

.ag-underline {
    position: absolute;
    right: 92px;
    height: 4px;
    border-radius: 999px;
    transform-origin: right center;
    transform: scaleX(0) rotate(-2deg);
    background: linear-gradient(90deg, var(--hero-accent-1), var(--hero-accent-2), var(--hero-accent-3));
    box-shadow: 0 0 14px rgba(25,199,255,.24);
}

.ag-underline-1 {
    top: 132px;
    width: 330px;
    animation: agDrawLine 1s ease 3.65s forwards;
}

.ag-underline-2 {
    top: 146px;
    right: 126px;
    width: 190px;
    height: 2px;
    opacity: .62;
    animation: agDrawLine .85s ease 3.98s forwards;
}

/*
نهاية كود Pen Tool وخطوط الهيرو بالتوقيت النهائي
*/




/*
نهاية كود Pen Tool وخطوط الهيرو
*/

.ag-hero-title {
    position: relative;
    z-index: 2;
    margin: 0;
    padding-top: 4px;
    max-width: 640px;
    color: currentColor;
    font-size: var(--hero-title-size);
    line-height: 1.1;
    letter-spacing: -1.2px;
    font-weight: 900;
}



/*
بداية كود توقيت كتابة عنوان الهيرو
*/

.ag-title-line {
    position: relative;
    display: block;
    width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    border-left: 3px solid var(--hero-accent-2);
}

.ag-title-line-1 {
    margin-right: 44px;
    transform: rotate(.8deg);
    animation:
        agTypeText 1.15s steps(18, end) .25s forwards,
        agCaret .7s step-end .25s 3,
        agHideCaret .01s linear 1.85s forwards;
}

.ag-title-line-2 {
    margin-top: 8px;
    margin-right: 92px;
    color: var(--hero-accent-1);
    transform: rotate(-1.2deg);
    animation:
        agTypeText 1.15s steps(18, end) 1.85s forwards,
        agCaret .7s step-end 1.85s 3,
        agHideCaret .01s linear 3.45s forwards;
}

html[data-theme="dark"] .ag-title-line-2 {
    color: #57dcff;
    text-shadow: 0 0 24px rgba(87,220,255,.26);
}

/*
نهاية كود توقيت كتابة عنوان الهيرو
*/


html[data-theme="dark"] .ag-title-line-2 {
    color: #57dcff;
    text-shadow: 0 0 24px rgba(87,220,255,.26);
}




.ag-like-burst {
    position: absolute;
    z-index: 8;
    top: 20px;
    right: 419px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, var(--hero-accent-3));
    opacity: 0;
    transform: scale(.4) rotate(-18deg);
    animation: agLikeBurst .8s ease 2.25s forwards;
}

.ag-like-burst i {
    font-size: 19px;
}

/*
نهاية كود كتابة الهيرو والفرشة
*/

.ag-hero-text {
    max-width: 660px;
    margin: 0 0 24px;
    color: #56657d;
    font-size: 18px;
    font-weight: 700;
    line-height: 2;
}

html[data-theme="dark"] .ag-hero-text {
    color: rgba(255,255,255,.72);
}

.ag-hero-search {
    width: min(100%, 700px);
    margin: 0;
}

.ag-search-shell {
    position: relative;
    min-height: 68px;
    padding: 7px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 24px;
    border: 1px solid rgba(37,99,235,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.94));
    box-shadow: 0 18px 48px rgba(24,70,140,.10), inset 0 1px 0 rgba(255,255,255,.88);
}

.ag-search-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(25,199,255,.13), rgba(34,197,94,.10));
    opacity: .55;
}

html[data-theme="dark"] .ag-search-shell {
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(17,30,67,.86), rgba(8,18,48,.76));
    box-shadow: 0 24px 66px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] .ag-search-shell::before {
    background: linear-gradient(135deg, rgba(25,199,255,.34), rgba(124,58,237,.28), rgba(34,197,94,.18));
    opacity: .75;
}

.ag-search-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: var(--hero-accent-1);
    background: rgba(37,99,235,.07);
    font-size: 24px;
}

html[data-theme="dark"] .ag-search-icon {
    color: #73ecff;
    background: rgba(25,199,255,.10);
}

.ag-hero-search input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: 0;
    outline: 0;
    background: transparent;
    color: currentColor;
    font-size: 15px;
    font-weight: 800;
}

.ag-hero-search input::placeholder {
    color: #8792a8;
}

html[data-theme="dark"] .ag-hero-search input::placeholder {
    color: rgba(255,255,255,.45);
}

.ag-hero-search button {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--hero-accent-3), var(--hero-accent-2));
    box-shadow: 0 16px 34px rgba(25,199,255,.20);
    font-size: 14px;
    font-weight: 900;
    transition: transform .22s ease, box-shadow .22s ease;
}

html[data-theme="dark"] .ag-hero-search button {
    background: linear-gradient(135deg, #7c3aed, #19c7ff);
}

.ag-hero-search button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(25,199,255,.30);
}

.ag-hero-search button i {
    font-size: 20px;
    transform: scaleX(-1);
}

.ag-hero-socials {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    margin-top: 18px;
    width: min(100%, 700px);
    transform: translateX(-120px);
}

.ag-hero-socials a {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(0,0,0,.13);
    transition: transform .22s ease, box-shadow .22s ease;
}

.ag-hero-socials a:hover {
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 22px 48px rgba(0,0,0,.20);
}

.ag-hero-socials i {
    font-size: 27px;
}

.ag-social-facebook { background: linear-gradient(135deg, #1877f2, #0b5bd3); }
.ag-social-telegram { background: linear-gradient(135deg, #2aabee, #168acd); }
.ag-social-youtube { background: linear-gradient(135deg, #ff0033, #c40022); }
.ag-social-x { background: linear-gradient(135deg, #111827, #000000); }
.ag-social-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); }

/*
بداية كود اللابتوب والمميزات
*/

.ag-holo-stage {
    position: relative;
    width: min(100%, 650px);
    height: 510px;
    transform-style: preserve-3d;
    transform: translateY(var(--hero-laptop-offset));
    animation: agStageFloat 5.8s ease-in-out infinite;
}

.ag-holo-ring {
    position: absolute;
    left: 54%;
    bottom: 8px;
    border-radius: 50%;
    transform: translateX(-50%) rotateX(68deg);
    border: 1px solid rgba(25,199,255,.20);
    box-shadow: inset 0 0 20px rgba(37,99,235,.08);
    animation: agRingPulse 4s ease-in-out infinite;
}

.ag-holo-ring-1 {
    width: 420px;
    height: 420px;
}

.ag-holo-ring-2 {
    width: 276px;
    height: 276px;
    bottom: 84px;
    animation-delay: -1.4s;
}

.ag-laptop {
    position: absolute;
    left: 58%;
    top: 104px;
    width: 430px;
    transform: translateX(-50%) rotateY(-15deg) rotateX(8deg);
    transform-style: preserve-3d;
    filter: drop-shadow(0 30px 38px rgba(14,36,82,.22));
}

html[data-theme="dark"] .ag-laptop {
    filter: drop-shadow(0 34px 44px rgba(0,0,0,.38));
}

.ag-laptop-screen {
    position: relative;
    height: 282px;
    padding: 22px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(116,236,255,.32);
    background:
        radial-gradient(circle at 68% 42%, rgba(109,92,255,.35), transparent 28%),
        linear-gradient(135deg, rgba(6,18,54,.96), rgba(11,25,72,.90));
    box-shadow:
        0 0 0 7px rgba(255,255,255,.06),
        inset 0 1px 0 rgba(255,255,255,.16),
        0 0 34px rgba(0,184,255,.16);
}

.ag-laptop-screen::after {
    content: "";
    position: absolute;
    inset: -42%;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.16), transparent 60%);
    animation: agScreenLight 6.8s linear infinite;
}

.ag-screen-top {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 7px;
    margin-bottom: 20px;
}

.ag-screen-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5a8d;
}

.ag-screen-top span:nth-child(2) { background: #ffd166; }
.ag-screen-top span:nth-child(3) { background: #20e36f; }

.ag-download-panel {
    position: relative;
    z-index: 3;
    width: 190px;
    min-height: 166px;
    margin: 0 auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 24px;
    border: 1px solid rgba(115,236,255,.24);
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 34px rgba(109,92,255,.22);
}

.ag-download-panel i {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #ffffff;
    font-size: 42px;
    background: linear-gradient(135deg, #2c6cff, #7c3cff);
    box-shadow: 0 16px 30px rgba(44,108,255,.30);
    animation: agDownloadIcon 2.7s ease-in-out infinite;
}

.ag-download-panel strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.ag-download-panel span {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}

.ag-download-panel span b {
    display: block;
    width: 78%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #20e36f, #57dcff);
    animation: agProgress 3.8s ease-in-out infinite;
}

.ag-download-panel em {
    color: #8befff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.ag-mini-list {
    position: absolute;
    z-index: 4;
    right: 20px;
    bottom: 20px;
    width: 120px;
    display: grid;
    gap: 8px;
}

.ag-mini-list span {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border-radius: 10px;
    color: rgba(255,255,255,.86);
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.09);
    font-size: 10px;
    font-weight: 800;
}

.ag-mini-list i {
    color: #57dcff;
    font-size: 15px;
}

.ag-laptop-base {
    position: relative;
    width: 500px;
    height: 34px;
    margin: -2px 0 0 -35px;
    border-radius: 0 0 42px 42px;
    background: linear-gradient(180deg, #193477, #061631);
    border: 1px solid rgba(115,236,255,.20);
    transform: rotateX(58deg);
    transform-origin: top center;
    box-shadow: 0 22px 32px rgba(0,0,0,.20);
}

.ag-float-icon {
    position: absolute;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 23px;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.12);
    box-shadow: 0 16px 30px rgba(14,36,82,.12), inset 0 1px 0 rgba(255,255,255,.18);
    animation: agFloatIcon 5.4s ease-in-out infinite;
}

html[data-theme="dark"] .ag-float-icon {
    background: rgba(255,255,255,.08);
    box-shadow: 0 16px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14);
}

.ag-float-icon i {
    font-size: 34px;
}

.ag-icon-code { top: 58px; left: 100px; color: #b98cff; }
.ag-icon-adobe { top: 64px; right: 100px; color: #62dbff; animation-delay: -1s; }
.ag-icon-shield { top: 204px; right: 20px; color: #20e36f; animation-delay: -1.8s; }
.ag-icon-folder { bottom: 96px; left: 114px; color: #ffd166; animation-delay: -2.6s; }
.ag-icon-win { bottom: 84px; right: 112px; color: #4da3ff; animation-delay: -3.2s; }
.ag-icon-zip { bottom: 18px; left: 228px; color: #8befff; animation-delay: -4s; }

.ag-hero-side-features {
    position: absolute;
    z-index: 8;
    top: 112px;
    left: 0;
    right: 545px;
    width: 178px;
    display: grid;
    gap: 10px;
}

.ag-side-feature {
    min-height: 66px;
    padding: 10px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 9px;
    align-items: center;
    border-radius: 18px;
    border: 1px solid rgba(37,99,235,.10);
    background: rgba(255,255,255,.70);
    box-shadow: 0 12px 28px rgba(24,70,140,.08);
}

html[data-theme="dark"] .ag-side-feature {
    border-color: rgba(255,255,255,.10);
    background: rgba(8,18,48,.72);
    box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.ag-side-feature i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--hero-accent-1);
    background: rgba(37,99,235,.07);
    font-size: 20px;
}

html[data-theme="dark"] .ag-side-feature i {
    color: #73ecff;
    background: rgba(25,199,255,.10);
}

.ag-side-feature strong {
    display: block;
    color: currentColor;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
}

.ag-side-feature em {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

html[data-theme="dark"] .ag-side-feature em {
    color: rgba(255,255,255,.58);
}

/*
نهاية كود اللابتوب والمميزات
*/

/*
بداية كود الحركات
*/

@keyframes agHeroDot {
    0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .52; }
    50% { transform: translate3d(14px,-18px,0) scale(1.16); opacity: .82; }
}


@keyframes agPenMove {
    0% {
        opacity: 0;
        transform: translate(38px,-28px) rotate(-18deg) scale(.8);
    }
    14% {
        opacity: 1;
    }
    52% {
        opacity: 1;
        transform: translate(-40px,8px) rotate(7deg) scale(1);
    }
    86% {
        opacity: 1;
        transform: translate(-98px,22px) rotate(-8deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-118px,12px) rotate(-18deg) scale(.65);
    }
}

@keyframes agDrawLine {
    to {
        transform: scaleX(1) rotate(-2deg);
    }
}

@keyframes agTypeText {
    to { max-width: 100%; }
}

@keyframes agCaret {
    50% { border-left-color: transparent; }
}

@keyframes agHideCaret {
    to {
        border-left-color: transparent;
    }
}

@keyframes agLikeBurst {
    0% { opacity: 0; transform: scale(.4) rotate(-18deg); }
    35% { opacity: 1; transform: scale(1.15) rotate(8deg); }
    70% { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: .92; transform: scale(1) rotate(0); }
}

@keyframes agStageFloat {
    0%,100% { transform: translateY(var(--hero-laptop-offset)); }
    50% { transform: translateY(calc(var(--hero-laptop-offset) - 10px)); }
}

@keyframes agRingPulse {
    0%,100% { opacity: .32; transform: translateX(-50%) rotateX(68deg) scale(.98); }
    50% { opacity: .68; transform: translateX(-50%) rotateX(68deg) scale(1.03); }
}

@keyframes agScreenLight {
    from { transform: translateX(-36%); }
    to { transform: translateX(36%); }
}

@keyframes agDownloadIcon {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(7px); }
}

@keyframes agProgress {
    0%,100% { width: 58%; }
    50% { width: 94%; }
}

@keyframes agFloatIcon {
    0%,100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-14px,0); }
}

/*
نهاية كود الحركات
*/

/*
بداية كود هيرو التابلت فقط
*/

@media (max-width: 1180px) {
    .ag-hero {
        min-height: auto;
        padding: 34px 0 30px;
    }

    .ag-hero-container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ag-hero-content {
        order: 1;
        text-align: center;
        transform: none;
    }

    .ag-writing-board,
    .ag-hero-text,
    .ag-hero-search,
    .ag-hero-socials {
        margin-inline: auto;
    }

    .ag-founder-signature {
        margin-inline: auto;
        justify-content: center;
    }

    .ag-hero-socials {
        justify-content: center;
    }

    .ag-hero-visual {
        display: none !important;
    }
}

/*
نهاية كود هيرو التابلت فقط
*/

/*
بداية كود هيرو الموبايل فقط
*/

@media (max-width: 680px) {
    .ag-hero {
        min-height: auto;
        padding: 24px 0 22px;
    }

    .ag-hero-container {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .ag-hero-content {
        width: 100%;
        text-align: center;
        transform: none;
    }

    .ag-writing-board {
        width: 100%;
        min-height: 130px;
        margin-bottom: 6px;
        transform: rotate(0);
    }


.ag-pen-tool {
    width: 31px;
    height: 31px;
    right: auto;
    left: 34px;
    top: 82px;
    border-radius: 11px;
    animation: agPenMoveMobile 1.45s ease-in-out 3.55s forwards;
}

.ag-pen-tool i {
    font-size: 18px;
}

.ag-underline-1 {
    top: 102px;
    right: 50%;
    width: 174px;
    height: 3px;
    margin-right: -87px;
    animation: agDrawLine .85s ease 3.65s forwards;
}

.ag-underline-2 {
    top: 112px;
    right: 50%;
    width: 108px;
    margin-right: -54px;
    animation: agDrawLine .75s ease 3.95s forwards;
}



    .ag-hero-title {
        margin-inline: auto;
        padding-top: 10px;
        font-size: var(--hero-mobile-title-size);
        line-height: 1.16;
        letter-spacing: -.8px;
    }

    .ag-title-line {
        margin-inline: auto !important;
        white-space: normal;
        text-align: center;
        border-left-width: 2px;
    }

    .ag-title-line-1,
    .ag-title-line-2 {
        transform: none;
    }

    .ag-title-line-2 {
        margin-top: 6px;
    }

    .ag-like-burst {
        top: 8px;
        right: auto;
        left: 28px;
        width: 25px;
        height: 25px;
    }

    .ag-like-burst i {
        font-size: 14px;
    }

    .ag-hero-text {
        max-width: 94%;
        margin-bottom: 14px;
        font-size: 13px;
        line-height: 1.75;
    }

    .ag-hero-search {
        width: 100%;
    }

    .ag-search-shell {
        min-height: auto;
        padding: 7px;
        border-radius: 20px;
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 7px;
    }

    .ag-search-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        font-size: 20px;
    }

    .ag-hero-search input {
        height: 40px;
        text-align: right;
        font-size: 12px;
    }

    .ag-hero-search button {
        grid-column: 1 / -1;
        width: 100%;
        height: 43px;
        border-radius: 15px;
        font-size: 13px;
    }

    .ag-hero-socials {
        justify-content: center;
        gap: 8px;
        margin-top: 11px;
    }

    .ag-hero-socials a {
        width: 39px;
        height: 39px;
        border-radius: 14px;
    }

    .ag-hero-socials i {
        font-size: 20px;
    }

    .ag-hero-visual {
        display: none !important;
    }

  
    }
}





@keyframes agPenMoveMobile {
    0% {
        opacity: 0;
        transform: translate(24px,-18px) rotate(-18deg) scale(.8);
    }
    14% {
        opacity: 1;
    }
    55% {
        opacity: 1;
        transform: translate(-22px,6px) rotate(7deg) scale(1);
    }
    86% {
        opacity: 1;
        transform: translate(-58px,14px) rotate(-8deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-72px,6px) rotate(-18deg) scale(.65);
    }
}




/*
نهاية كود هيرو الموبايل فقط
*/

/*
نهاية كود هيرو الطريق دوت كوم النهائي المعدل
*/