:root {
    /* Colors */
    --btn-color: linear-gradient(
        -90deg,
        rgba(101, 42, 147, 0.5) 0%,
        rgba(69, 42, 147, 0.5) 100%
    );
    --linear-bg: linear-gradient(
        270deg,
        rgba(86, 52, 184, 0.1) 0%,
        rgba(157, 65, 230, 0.1) 100%
    );
    --bg-linear: linear-gradient(
        270deg,
        rgba(26, 10, 47, 1) 0%,
        rgba(8, 8, 8, 1) 100%
    );
    --nav-bar-liear: linear-gradient(
        270deg,
        rgba(138, 56, 245, 0.1) 0%,
        rgba(157, 65, 230, 0.1) 100%
    );

    /* Fonts */
    --text-8-81-font-family: Aptos-Regular, sans-serif;
    --text-8-81-font-size: 8px;
    --text-8-81-line-height: normal;
    --text-8-81-font-weight: 400;
    --text-8-81-font-style: normal;
    --text-8-82-font-family: Aptos-SemiBold, sans-serif;
    --text-8-82-font-size: 8px;
    --text-8-82-line-height: normal;
    --text-8-82-font-weight: 600;
    --text-8-82-font-style: normal;
    --text-8-83-font-family: Aptos-SemiBold, sans-serif;
    --text-8-83-font-size: 8px;
    --text-8-83-line-height: normal;
    --text-8-83-font-weight: 600;
    --text-8-83-font-style: normal;
    --text-10-101-font-family: Aptos-Regular, sans-serif;
    --text-10-101-font-size: 10px;
    --text-10-101-line-height: normal;
    --text-10-101-font-weight: 400;
    --text-10-101-font-style: normal;
    --text-10-102-font-family: Aptos-SemiBold, sans-serif;
    --text-10-102-font-size: 10px;
    --text-10-102-line-height: normal;
    --text-10-102-font-weight: 600;
    --text-10-102-font-style: normal;
    --text-10-103-font-family: Aptos-SemiBold, sans-serif;
    --text-10-103-font-size: 10px;
    --text-10-103-line-height: normal;
    --text-10-103-font-weight: 600;
    --text-10-103-font-style: normal;
    --text-12-121-font-family: Aptos-Regular, sans-serif;
    --text-12-121-font-size: 12px;
    --text-12-121-line-height: normal;
    --text-12-121-font-weight: 400;
    --text-12-121-font-style: normal;
    --text-12-122-font-family: Aptos-SemiBold, sans-serif;
    --text-12-122-font-size: 12px;
    --text-12-122-line-height: normal;
    --text-12-122-font-weight: 600;
    --text-12-122-font-style: normal;
    --text-12-123-font-family: Aptos-SemiBold, sans-serif;
    --text-12-123-font-size: 12px;
    --text-12-123-line-height: normal;
    --text-12-123-font-weight: 600;
    --text-12-123-font-style: normal;
    --text-14-141-font-family: Aptos-Regular, sans-serif;
    --text-14-141-font-size: 14px;
    --text-14-141-line-height: normal;
    --text-14-141-font-weight: 400;
    --text-14-141-font-style: normal;
    --text-14-142-font-family: Aptos-SemiBold, sans-serif;
    --text-14-142-font-size: 14px;
    --text-14-142-line-height: normal;
    --text-14-142-font-weight: 600;
    --text-14-142-font-style: normal;
    --text-14-143-font-family: Inter-SemiBold, sans-serif;
    --text-14-143-font-size: 14px;
    --text-14-143-line-height: normal;
    --text-14-143-font-weight: 600;
    --text-14-143-font-style: normal;
    --text-16-161-font-family: Inter-Regular, sans-serif;
    --text-16-161-font-size: 16px;
    --text-16-161-line-height: 18px;
    --text-16-161-font-weight: 400;
    --text-16-161-font-style: normal;
    --text-16-162-font-family: Inter-Medium, sans-serif;
    --text-16-162-font-size: 16px;
    --text-16-162-line-height: normal;
    --text-16-162-font-weight: 500;
    --text-16-162-font-style: normal;
    --text-16-163-font-family: Aptos-SemiBold, sans-serif;
    --text-16-163-font-size: 16px;
    --text-16-163-line-height: normal;
    --text-16-163-font-weight: 600;
    --text-16-163-font-style: normal;
    --text-18-181-font-family: Aptos-Regular, sans-serif;
    --text-18-181-font-size: 18px;
    --text-18-181-line-height: 22px;
    --text-18-181-font-weight: 400;
    --text-18-181-font-style: normal;
    --text-18-182-font-family: Aptos-SemiBold, sans-serif;
    --text-18-182-font-size: 18px;
    --text-18-182-line-height: normal;
    --text-18-182-font-weight: 600;
    --text-18-182-font-style: normal;
    --text-18-183-font-family: Aptos-SemiBold, sans-serif;
    --text-18-183-font-size: 18px;
    --text-18-183-line-height: normal;
    --text-18-183-font-weight: 600;
    --text-18-183-font-style: normal;
    --text-20-201-font-family: Aptos-Regular, sans-serif;
    --text-20-201-font-size: 20px;
    --text-20-201-line-height: normal;
    --text-20-201-font-weight: 400;
    --text-20-201-font-style: normal;
    --text-20-202-font-family: Aptos-SemiBold, sans-serif;
    --text-20-202-font-size: 20px;
    --text-20-202-line-height: normal;
    --text-20-202-font-weight: 600;
    --text-20-202-font-style: normal;
    --text-20-203-font-family: Aptos-SemiBold, sans-serif;
    --text-20-203-font-size: 20px;
    --text-20-203-line-height: normal;
    --text-20-203-font-weight: 600;
    --text-20-203-font-style: normal;
    --text-24-241-font-family: Aptos-Regular, sans-serif;
    --text-24-241-font-size: 24px;
    --text-24-241-line-height: normal;
    --text-24-241-font-weight: 400;
    --text-24-241-font-style: normal;
    --text-24-242-font-family: Aptos-SemiBold, sans-serif;
    --text-24-242-font-size: 24px;
    --text-24-242-line-height: normal;
    --text-24-242-font-weight: 600;
    --text-24-242-font-style: normal;
    --text-24-243-font-family: Aptos-SemiBold, sans-serif;
    --text-24-243-font-size: 24px;
    --text-24-243-line-height: normal;
    --text-24-243-font-weight: 600;
    --text-24-243-font-style: normal;
    --heading-1-font-family: Aptos-Regular, sans-serif;
    --heading-1-font-size: 64px;
    --heading-1-line-height: normal;
    --heading-1-font-weight: 400;
    --heading-1-font-style: normal;
    --heading-2-font-family: Aptos-SemiBold, sans-serif;
    --heading-2-font-size: 64px;
    --heading-2-line-height: normal;
    --heading-2-font-weight: 600;
    --heading-2-font-style: normal;
    --heading-3-font-family: Aptos-Bold, sans-serif;
    --heading-3-font-size: 64px;
    --heading-3-line-height: normal;
    --heading-3-font-weight: 700;
    --heading-3-font-style: normal;
    --heading-2-1-font-family: Aptos-SemiBold, sans-serif;
    --heading-2-1-font-size: 48px;
    --heading-2-1-line-height: normal;
    --heading-2-1-font-weight: 600;
    --heading-2-1-font-style: normal;
    --heading-2-2-font-family: Aptos-SemiBold, sans-serif;
    --heading-2-2-font-size: 48px;
    --heading-2-2-line-height: normal;
    --heading-2-2-font-weight: 600;
    --heading-2-2-font-style: normal;
    --heading-2-3-font-family: Aptos-Bold, sans-serif;
    --heading-2-3-font-size: 48px;
    --heading-2-3-line-height: normal;
    --heading-2-3-font-weight: 700;
    --heading-2-3-font-style: normal;

    /* Effects */
    }
    /* Figma Color Variables of your File */
    [data-warning-mode="mode-1"] {
    /* mode-1 */
    --main: #eba823;
    --dark: #745311;
    --bg: #fbeccf;
    }

    :root,
    [data-colors-mode="mode-1"] {
    /* mode-1 */
    --primary-900: #15032d;
    --primary-700: #452a93;
    --primary-800: #1a0a2f;
    --primary-500: #6c41e6;
    --primary-400: #8260e3;
    --primary-100: #ac9bde;
    --primary-200: #a18bdf;
    --primary-950: #080808;
    --primary-600: #5634b8;
    --primary-300: #9378e1;
    --primary-50: #c3badb;
    --neturals-75: #464646;
    --neturals-60: #848484;
    --neturals-5: #f2f2f2;
    --neturals-40: #9c9c9c;
    --neturals-30: #b5b5b5;
    --neturals-85: #2d2d2d;
    --neturals-100: #080808;
    --neturals-50: #848484;
    --neturals-10: #e7e7e7;
    --neturals-white: #ffffff;
    --neturals-20: #cecece;
    --neturals-3: #f7f7f7;
    --secondary-800: #512276;
    --secondary-600: #7e34b8;
    --secondary-900: #411b5e;
    --secondary-700: #652a93;
    --secondary-500: #9d41e6;
    --secondary-400: #a95fe3;
    --secondary-300: #b377e1;
    --secondary-200: #c29ede;
    --secondary-100: #d0c1db;
    }

    [data-secondary-mode="mode-1"] {
    /* mode-1 */
    --500: #9d41e6;
    --600: #7e34b8;
    --700: #652a93;
    --800: #512276;
    --900: #411b5e;
    }



    /* Reset أساسي للـ body */
    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-color: #fff; /* اختياري */
        color: #000;
        background:linear-gradient(135deg, #1c053b 0%, #180a22 50%, #06010d 100%);

        overflow-x: hidden; /* يمنع أي scroll عرضي */
    }

/* Default English style */
html[lang="en"] body {
    font-family: 'Inter', sans-serif;
    direction: ltr;
    text-align: left;
  }

  /* Arabic style */
  html[lang="ar"] body {
    font-family: "Aptos-SemiBold", sans-serif;
    direction: rtl;
    text-align: right;
  }


    .home,
    .home * {
    box-sizing: border-box;
    }
    .home {
    background: var(
        --bg-linear,
        linear-gradient(270deg, rgba(26, 10, 47, 1) 0%, rgba(8, 8, 8, 1) 100%)
    );
    border-radius: 20px;
    position: relative;

    /*overflow-x: auto;*/
    }
    .all-content {
    width: 100%;
    height: 810px;
    position: absolute;
    left: 0px;
    top: 0px;
    }
    .footer {
    width: 100%;
    height: 827px;
    position: relative;
    left: -3px;
    top: 6500px
    }
    .outline-logo {
    width: 100%;
    height: 256px;
    position: absolute;
    left: 0px;
    top: 571px;
    overflow: hidden;
    }
    .outline-logo2 {
    opacity: 0.84;
    width: 100%;
    height: 170.07%;
    position: absolute;
    right: 0%;
    left: 0%;
    bottom: -70%;
    top: -0.07%;
    overflow: visible;
    }
    .footer-content {
    display: flex;
        flex-direction: row;
        gap: 108px;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        position: absolute;
        left: 157px;
        top: 0px;
    }
    .frame-427320752 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    }
    .logo-1 {
    flex-shrink: 0;
    width: 158px;
    height: 56px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 158/56;
    }
    .layer-2 {
    position: absolute;
    inset: 0;
    }
    .layer-1 {
    width: 175.36px;
    height: 60.17px;
    position: static;
    }
    .vector {
    width: 25.12%;
    height: 81.13%;
    position: absolute;
    right: 55.06%;
    left: 19.82%;
    bottom: 18.88%;
    top: -0.01%;
    overflow: visible;
    }
    .vector2 {
    width: 25.11%;
    height: 81.1%;
    position: absolute;
    right: 1.4%;
    left: 73.49%;
    bottom: 17.43%;
    top: 1.47%;
    overflow: visible;
    }
    .vector3 {
    width: 19.25%;
    height: 97.51%;
    position: absolute;
    right: 80.72%;
    left: 0.03%;
    bottom: 1.66%;
    top: 0.84%;
    overflow: visible;
    }
    .vector4 {
    width: 20.77%;
    height: 79.67%;
    position: absolute;
    right: 17.8%;
    left: 61.42%;
    bottom: 18.64%;
    top: 1.68%;
    overflow: visible;
    }
    .vector5 {
    width: 5.29%;
    height: 55.72%;
    position: absolute;
    right: 39.77%;
    left: 54.94%;
    bottom: 42.16%;
    top: 2.12%;
    overflow: visible;
    }
    .vector6 {
    width: 19.65%;
    height: 79.84%;
    position: absolute;
    right: 39.75%;
    left: 40.6%;
    bottom: 18.73%;
    top: 1.43%;
    overflow: visible;
    }
    .marketing-management {
    color: var(--neturals-color, #ffffff);
    text-align: left;
    font-family: "Aptos-Bold", sans-serif;
    font-size: 11.550000190734863px;
    font-weight: 700;
    position: absolute;
    right: -11.02%;
    left: 19.88%;
    width: 100%;
    bottom: -7.43%;
    top: 82.43%;
    height: 25%;
    }
    .vector7 {
    width: 3.88%;
    height: 43.17%;
    position: absolute;
    right: 23.61%;
    left: 72.5%;
    bottom: 17.5%;
    top: 39.33%;
    overflow: visible;
    }
    .we-offers-a-comprehensive-suite-of-digital-marketing-services-that-cover-all-aspects-of-our-online-presence-from-seo-and-social-media-marketing-to-content-creation-and-ppc-advertising-they-have-the-expertise-and-resources-to-handle-our-diverse-marketing-needs {
    color: #9b9b9c;
    text-align: left;
    font-family: "Roboto-Regular", sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    position: relative;
    width: 534px;
    }
    .frame-2007 {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    }
    .group-85 {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    position: static;
    }
    .rectangle-13 {
    border-radius: 60px;
    width: 34px;
    height: 34px;
    position: absolute;
    left: 0px;
    top: 0px;
    }
    .facebook-logo {
    width: 7px;
    height: 14px;
    position: absolute;
    left: 13px;
    top: 10px;
    overflow: visible;
    }
    .group-86 {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    position: static;
    }
    .rectangle-14 {
    border-radius: 60px;
    width: 34px;
    height: 34px;
    position: absolute;
    left: 46px;
    top: 0px;
    }
    .twitter-logo {
    width: 18px;
    height: 14px;
    position: absolute;
    left: 54px;
    top: 10px;
    overflow: visible;
    }
    .group-87 {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    position: static;
    }
    .rectangle-15 {
    border-radius: 60px;
    width: 34px;
    height: 34px;
    position: absolute;
    left: 92px;
    top: 0px;
    }
    .linkedin-logo {
    width: 16px;
    height: 15px;
    position: absolute;
    left: 101px;
    top: 9px;
    overflow: visible;
    }
    .group-88 {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    position: static;
    }
    .group-89 {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        position: static;
        }
    .rectangle-16 {
    border-radius: 60px;
    width: 34px;
    height: 34px;
    position: absolute;
    left: 138px;
    top: 0px;
    }
    .instagram-logo {
    width: 16px;
    height: 18px;
    position: absolute;
    left: 147px;
    top: 8px;
    overflow: visible;
    }
    .frame-427321780 {
    display: flex;
    flex-direction: row;
    gap: 115px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
    }
    .group-2011 {
    flex-shrink: 0;
    width: 96px;
    height: 471px;
    position: static;
    left: 0px;
    }
    .navigation {
    color: var(--neturals-3, #f7f7f7);
    text-align: left;
    font-family: "Roboto-SemiBold", sans-serif;
    font-size: 18px;
    letter-spacing: -0.01em;
    font-weight: 600;
    position: absolute;
    left: 0px;
    top: 0px;
    }
    .tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    left: 0px;
    top: 61px;
    }
    .tab {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    }
    .home2 {
    color: var(--neturals-20, #cecece);
    text-align: center;
    font-family: "Aptos-Regular", sans-serif;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .group-2013 {
    flex-shrink: 0;
    width: 87px;
    height: 157px;
    position: static;
    left: 0px;
    }
    .licence {
    color: var(--neturals-3, #f7f7f7);
    text-align: left;
    font-family: "Roboto-SemiBold", sans-serif;
    font-size: 18px;
    letter-spacing: -0.01em;
    font-weight: 600;
    position: absolute;
    left: 211px;
    top: 0px;
    }
    .privacy-policy-copyright-email-address {
    color: var(--neturals-20, #cecece);
    text-align: left;
    font-family: "Roboto-Regular", sans-serif;
    font-size: 14px;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: absolute;
    left: 211px;
    top: 61px;
    }
    .group-2009 {
    flex-shrink: 0;
    width: 184px;
    height: 191px;
    position: static;
    left: 0px;
    }
    .contact {
    color: var(--neturals-3, #f7f7f7);
    text-align: left;
    font-family: "Roboto-SemiBold", sans-serif;
    font-size: 18px;
    letter-spacing: -0.01em;
    font-weight: 600;
    position: absolute;
    left: 413px;
    top: 0px;
    }
    ._406-555-0120 {
    color: var(--neturals-20, #cecece);
    text-align: left;
    font-family: "Roboto-Regular", sans-serif;
    font-size: 14px;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: absolute;
    left: 445px;
    top: 64px;
    width: 200px;
    }
    .hey-boostim-com {
    color: var(--neturals-20, #cecece);
    text-align: left;
    font-family: "Roboto-Regular", sans-serif;
    font-size: 14px;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: absolute;
    left: 445px;
    top: 104px;
    }
    ._2972-westheimer-rd-santa-ana-illinois-85486 {
    color: var(--neturals-20, #cecece);
    text-align: left;
    font-family: "Roboto-Regular", sans-serif;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: absolute;
    left: 445px;
    top: 143px;
    width: 152px;
    }
    .frame-1 {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 437px;
    top: 61px;
    transform-origin: 0 0;
    transform: rotate(0deg) scale(-1, 1);
    overflow: hidden;
    }
    .ant-design-phone-filled {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: visible;
    }
    .frame-2 {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 413px;
    top: 100px;
    overflow: hidden;
    }
    .frame-3 {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 413px;
    top: 139px;
    overflow: hidden;
    }
    .fa-6-solid-location-dot {
    width: 58.33%;
    height: 79.17%;
    position: absolute;
    right: 20.83%;
    left: 20.83%;
    bottom: 8.33%;
    top: 12.5%;
    overflow: visible;
    }
    .dashicons-email {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 413px;
    top: 100px;
    overflow: visible;
    }
    .contact-us {
    background: var(
        --linear-bg,
        linear-gradient(
        270deg,
        rgba(86, 52, 184, 0.1) 0%,
        rgba(157, 65, 230, 0.1) 100%
        )
    );
    width: 100%;
    height: 941px;
    position: absolute;
    left: 0px;
    top: 6900px;
    overflow: hidden;
    }
    .content {
    width: 1198.11px;
    height: 735px;
    position: absolute;
    left: 200px;
    top: 84px;
    }
    .hero-title {
    display: flex;
    flex-direction: column;
    gap: 44px;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    left: 0px;
    top: 150px;
    }
    .frame-104 {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    }
    .we-take-care-of-your-brand {
    color: var(--neturals-3, #f7f7f7);
    text-align: left;
    font-family: "Aptos-SemiBold", sans-serif;
    font-size: 96px;
    font-weight: 500;
    position: relative;
    width: 518.11px;
    }
    .we-care-about-our-work-and-we-care-about-our-clients {
    color: var(--neturals-3, #f7f7f7);
    text-align: left;
    font-family: var(--text-20-202-font-family, "Aptos-SemiBold", sans-serif);
    font-size: var(--text-20-202-font-size, 20px);
    font-weight: var(--text-20-202-font-weight, 600);
    position: relative;
    width: 508px;
    }
    .frame-105 {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    }
    .email-input-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 335px;
    position: relative;
    }
    .field {
    background: var(--neutrals-white, #ffffff);
    border-radius: var(--full, 10000px);
    border-style: solid;
    border-color: var(--neutrals-10, #e7e7e7);
    border-width: 0.75px;
    padding: 0px var(--8, 8px) 0px 0px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    height: 48px;
    min-height: 48px;
    position: relative;
    overflow: hidden;
    }
    .input-filed-indicator-icon {
    background: var(--neturals-3, #f7f7f7);
    border-radius: var(--4, 4px);
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    width: 48px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    }
    .email-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
    }
    .placeholder-text {
    color: var(--neturals-30, #b5b5b5);
    text-align: left;
    font-family: var(--text-12-121-font-family, "WantedSans-Regular", sans-serif);
    font-size: var(--text-12-121-font-size, 12px);
    line-height: var(--text-12-121-line-height, 16px);
    font-weight: var(--text-12-121-font-weight, 400);
    position: relative;
    flex: 1;
    }
    .button-large {
    background: var(
        --btn-color,
        linear-gradient(
        -90deg,
        rgba(101, 42, 147, 0.5) 0%,
        rgba(69, 42, 147, 0.5) 100%
        )
    );
    border-radius: var(--full, 10000px);
    border-style: solid;
    border-color: var(--neturals-color, transparent);
    border-width: 1px;
    padding: 0px 24px 0px 24px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 48px;
    max-width: 335px;
    position: relative;
    overflow: hidden;
    }
    .button {
    color: var(--neturals-color, #ffffff);
    text-align: center;
    font-family: var(--text-16-162-font-family, "Inter-Medium", sans-serif);
    font-size: var(--text-16-162-font-size, 16px);
    font-weight: var(--text-16-162-font-weight, 500);
    position: relative;
    flex: 1;
    text-decoration: none;
    }
    .image {
    position: absolute;
    inset: 0;
    }
    .rectangle-196 {
    background: linear-gradient(to left, #d9d9d9, #d9d9d9);
    border-radius: 119.5px;
    width: 367px;
    height: 240px;
    position: absolute;
    left: 590.11px;
    top: 65px;
    object-fit: cover;
    }
    .rectangle-204 {
    background: #e0ff22;
    border-radius: 119.5px;
    width: 184px;
    height: 240px;
    position: absolute;
    left: 831.11px;
    top: 495px;
    }
    .rectangle-205 {
    background: #ffd360;
    border-radius: 119.5px;
    width: 183px;
    height: 240px;
    position: absolute;
    left: 1015.11px;
    top: 495px;
    }
    .rectangle-200 {
    background: linear-gradient(to left, #000000, #000000);
    border-radius: 119.5px;
    width: 241px;
    height: 240px;
    position: absolute;
    left: 957.11px;
    top: 65px;
    object-fit: cover;
    }
    .rectangle-201 {
    background: #5d34ff;
    border-radius: 119.5px;
    width: 241px;
    height: 190px;
    position: absolute;
    left: 590.11px;
    top: 305px;
    }
    .rectangle-202 {
    background: linear-gradient(to left, #e0ff22, #e0ff22);
    border-radius: 119.5px;
    width: 367px;
    height: 190px;
    position: absolute;
    left: 831.11px;
    top: 305px;
    object-fit: cover;
    }
    .ellipse-84 {
    background: linear-gradient(to left, #e0ff22, #e0ff22);
    border-radius: 50%;
    width: 241px;
    height: 240px;
    position: absolute;
    left: 590.11px;
    top: 495px;
    object-fit: cover;
    }
    .union {
    width: 149.98px;
    height: 110.5px;
    position: absolute;
    left: 754.11px;
    top: 422px;
    overflow: visible;
    }
    .union2 {
    width: 149.98px;
    height: 110.5px;
    position: absolute;
    left: 1015.09px;
    top: 0px;
    overflow: visible;
    }
    .div {
    color: #000000;
    text-align: left;
    font-family: "GeneralSansVariable-Semibold", sans-serif;
    font-size: 84px;
    line-height: 105px;
    font-weight: 600;
    position: absolute;
    left: 755.11px;
    top: 343px;
    transform-origin: 0 0;
    transform: rotate(0deg) scale(-1, 1);
    }
    .div2 {
    color: #000000;
    text-align: left;
    font-family: "GeneralSansVariable-Semibold", sans-serif;
    font-size: 98.00000762939453px;
    line-height: 122.5px;
    font-weight: 600;
    position: absolute;
    left: 874.11px;
    top: 546px;
    }
    .div3 {
    color: #000000;
    text-align: left;
    font-family: "GeneralSansVariable-Semibold", sans-serif;
    font-size: 98.00000762939453px;
    line-height: 122.5px;
    font-weight: 600;
    position: absolute;
    left: 1057.11px;
    top: 541px;
    }
    .div4 {
    color: #000000;
    text-align: left;
    font-family: "GeneralSansVariable-Semibold", sans-serif;
    font-size: 54.4444465637207px;
    line-height: 68.06px;
    font-weight: 600;
    position: absolute;
    left: 901.62px;
    top: 33.06px;
    transform-origin: 0 0;
    transform: rotate(-20.875deg) scale(1, 1);
    }
    .div5 {
    color: #000000;
    text-align: left;
    font-family: "GeneralSansVariable-Semibold", sans-serif;
    font-size: 54.4444465637207px;
    line-height: 68.06px;
    font-weight: 600;
    position: absolute;
    left: 814.08px;
    top: 435.74px;
    transform-origin: 0 0;
    transform: rotate(18.377deg) scale(1, 1);
    }
    .testmonial {
    background: var(
        --bg-linear,
        linear-gradient(270deg, rgba(26, 10, 47, 1) 0%, rgba(8, 8, 8, 1) 100%)
    );
    padding: 16px;
    width: 100%;
    height: 601px;
    position: absolute;
    left: 0px;
    top: 6300px;
    overflow: hidden;
    }
    .background-noise {
    width: 1633px;
    height: 1236px;
    position: absolute;
    left: 0px;
    top: calc(50% - 451.5px);
    backdrop-filter: blur(32px);
    object-fit: cover;
    }
    .frame-427321512 {
    display: flex;
    flex-direction: column;
    gap: 74px;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    left: 80px;
    top: 196px;
    }
    .they-thoroughly-analyze-our-industry-and-target-audience-allowing-them-to-develop-customized-campaigns-that-effectively-reach-and-engage-our-customers-their-creative-ideas-and-cutting-edge-techniques-have-helped-us-stay-ahead-of-the-competition {
    color: var(--neturals-5, #f2f2f2);
    text-align: left;
    font-family: "PlusJakartaSans-SemiBold", sans-serif;
    font-size: 36px;
    line-height: 160%;
    letter-spacing: -0.03em;
    font-weight: 600;
    position: relative;
    width: 1280px;
    }
    .frame-427321511 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 1280px;
    position: relative;
    }
    .frame-427321510 {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    }
    .ellipse-4 {
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
    border-width: 2px;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    position: relative;
    object-fit: cover;
    }
    .frame-427321509 {
    display: flex;
    flex-direction: column;
    gap: 19px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    }
    .michael-kaizer {
    color: var(--neturals-color, #ffffff);
    text-align: left;
    font-family: "PlusJakartaSans-Bold", sans-serif;
    font-size: 20px;
    line-height: 180%;
    font-weight: 700;
    position: relative;
    }
    .ceo-of-basecamp-corp {
    color: #878c91;
    text-align: left;
    font-family: "PlusJakartaSans-Medium", sans-serif;
    font-size: 16px;
    line-height: 180%;
    font-weight: 500;
    position: relative;
    }

    .frame-427320691 {
        border-radius: 70px;
        border-width: 1px;
        border-style: solid;
        border-image: var(--btn-color, linear-gradient(-90deg, rgba(101, 42, 147, 0.5) 0%, rgba(69, 42, 147, 0.5) 100%));
        border-image-slice: 1;
        padding: 16px 32px 16px 32px;
        display: flex
    ;
        flex-direction: row;
        gap: 42px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        transform-origin: 0 0;
        transform: rotate(180deg) scale(-1, 1);
        top: 58px;
    }
    .arrow-right {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
    }
    ._01-05 {
    color: var(--neturals-3, #f7f7f7);
    text-align: left;
    font-family: "PlusJakartaSans-SemiBold", sans-serif;
    font-size: 16px;
    line-height: 180%;
    font-weight: 600;
    position: relative;
    }
    ._01-05-span {
    text-decoration: underline;
    }
    ._01-05-span2 {
    }
    .frame-427320692 {
    background: var(
        --btn-color,
        linear-gradient(
        -90deg,
        rgba(101, 42, 147, 0.5) 0%,
        rgba(69, 42, 147, 0.5) 100%
        )
    );
    border-radius: 70px;
    padding: 16px 32px 16px 32px;
    display: flex;
    flex-direction: row;
    gap: 42px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    }
    .arrow-right2 {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
    }
    .title {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    left: 80px;
    top: 60px;
    }
    .what-our-client-said-about-us {
    color: var(--neturals-white, #ffffff);
    text-align: left;
    font-family: "Aptos-SemiBold", sans-serif;
    font-size: 60px;
    font-weight: 500;
    position: relative;
    }


    .blogs {
        width: 100%;
        height: 868px;
        position: absolute; /* زي ما كان */
        left: 100px;
        top: 5300px;
        overflow: hidden; /* عشان السلايدر ميخرجش برا */
    }



    .blogs2 {
        margin: 120px 0 0 0;
        display: flex;
    }


    .blog {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        justify-content: flex-start;
        width: 530px;
        box-sizing: border-box;
    }

    .blog-image {
        border-radius: 20px;
        align-self: stretch;
        flex-shrink: 0;
        height: 642px;
        position: relative;
        overflow: hidden;
    }

    .image-4 {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }

    .badge {
        border-radius: 10000px;
        border: 1px solid #e7e7e7;
        padding: 10px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 19px;
        top: 14px;
        background: rgba(0,0,0,0.5); /* خلفية خفيفة عشان يبان النص */
    }

    .seo {
        color: #ffffff;
        text-align: left;
        font-family: "Inter-Medium", sans-serif;
        font-size: 16px;
        font-weight: 500;
        position: relative;
    }

    .seo-pricing-packages-dubai-how-much-does-seo-cost-in-dubai {
        color: #ffffff;
        text-align: left;
        font-family: "Aptos-SemiBold", sans-serif;
        font-size: 20px;
        font-weight: 500;
        position: relative;
        align-self: stretch;
        padding: 12px 0;
    }



    .blog2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 541px;
    position: absolute;
    left: 571px;
    top: 0px;
    }
    .blog3 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 541px;
    position: absolute;
    left: 1142px;
    top: 0px;
    }
    .blogs-header {
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(50% - 291.5px);
    top: 0px;
    }
    .pointer {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    position: relative;
    }
    .ellipse-405 {
    background: rgba(164, 124, 244, 0.1);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0px;
    top: 0px;
    aspect-ratio: 1;
    }
    .ellipse-404 {
    background: #a47cf4;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    position: absolute;
    left: 8.76px;
    top: 8.63px;
    aspect-ratio: 1;
    }
    .our-blogs {
    color: #ffffff;
    text-align: left;
    font-family:"Aptos-SemiBold", sans-serif ;
    font-size: 60px;
    font-weight:500;
    position: relative;
    }
    .our-portfolio {
    background: linear-gradient(
        270deg,
        rgba(138, 56, 245, 0.1) 0%,
        rgba(157, 65, 230, 0.1) 100%
    );
    width: 100%;
    height: 823px;
    position: absolute;
    left: 0px;
    top: 4200px;
    background: url('../images/BG.png') center center / cover no-repeat;
    background-attachment: fixed; /* يعطي عمق بسيط عند التمرير */
    }
    .header {
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(50% - 695.5px);
    top: 60px;
    }
    .portfolio {
    color: var(--neturals-white, #ffffff);
    text-align: left;
    font-family:  "Aptos-SemiBold", sans-serif;
    font-size: 60px;
    font-weight: 500;
    position: relative;
    }
    .bg {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    width: 1440px;
    height: 878px;
    position: absolute;
    left: 0px;
    top: 0px;
    }
    .cursor {
    flex-shrink: 0;
    width: 103px;
    height: 98px;
    position: relative;
    }
    .blur {
    background: rgba(108, 65, 230, 0.1);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    translate: -50% -50%;
    top: 50%;
    filter: blur(150px);
    }
    .cursor2 {
    flex-shrink: 0;
    width: 102px;
    height: 98px;
    position: relative;
    }
    .cursor3 {
    flex-shrink: 0;
    width: 103px;
    height: 97px;
    position: relative;
    }
    .cursor4 {
    flex-shrink: 0;
    width: 102px;
    height: 97px;
    position: relative;
    }
    .our-work-speaks-for-itself-we-believe-the-best-proof-of-our-work-lies-in-the-results-we-ve-delivered-for-our-clients-here-you-ll-find-more-than-just-a-gallery-of-projects-you-ll-find-real-success-stories-of-brands-whose-journeys-we-transformed-from-the-starting-point-to-the-top-each-project-is-tangible-proof-that-our-creative-ideas-turn-into-measurable-growth {
    color: var(--neturals-color, #ffffff);
    text-align: left;
    font-family: var(--text-24-242-font-family, "Aptos-SemiBold", sans-serif);
    font-size: var(--text-24-242-font-size, 24px);
    font-weight: var(--text-24-242-font-weight, 600);
    position: absolute;
    left:830px;
    top: 60px;
    width: 611px;
    }

    .image2 {
    border-radius: var(--20, 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 310px;
    height: 608px;
    position: relative;
    overflow: hidden;
    object-fit: cover;
    }
    .arrow {
    background: rgba(255, 255, 255, 0.1);
        border-radius: var(--full, 10000px);
        padding: 0px 4px 0px 0px;
        width: 88px;
        height: 88px;
        position: absolute;
        left: 191px;
        top: 635px;
        transform-origin: 0 0;
        transform: rotate(180deg) scale(-1, 1);
        overflow: hidden;
        backdrop-filter: blur(10px);
    }
    .arrow-left-double {
    width: 56px;
    height: 56px;
    position: absolute;
    left: 19px;
    top: 16px;
    transform: translate(0px, 0px);
    overflow: visible;
    aspect-ratio: 1;
    }

    .arrow-left-double2 {
    width: 56px;
    height: 56px;
    position: absolute;
    left: 72px;
    top: 16px;
    transform: translate(-56px, 0px);
    overflow: visible;
    aspect-ratio: 1;
    }



    .our-work-box {
        position: absolute;
        top: 60px;
        left: 830px; /* زي مكان النص القديم */
        width: 611px;

        display: flex;
        justify-content: space-between; /* الكلام شمال والزر يمين */
        align-items: center;
        gap: 20px;
      }

      .our-work-text {
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.6;
        flex: 1;
      }

      .our-work-button {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-weight: bold;
        color: #D0C1DB;
        white-space: nowrap;
      }

      .our-work-button img {
        width: 20px;
        height: 20px;
      }



    .our-services {
    width: 100%;
    position: absolute;
    left: 141px;
    top: 3150px;
    }
    .content2 {
    display: flex;
    flex-direction: row;
    gap: 34px;
    align-items: center;
    justify-content: flex-start;
    width: 1240px;
    position: absolute;
    left: 0px;
    top: 0px;
    }
    .header2 {
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    position: relative;
    }
    .our-services2 {
    color: var(--neturals-white, #ffffff);
    text-align: left;
    font-family:"Aptos-SemiBold", sans-serif;
    font-size: 60px;
    font-weight: 500;
    position: relative;
    }
    .service {
    width: 1500px;
    height: 610px;
    position: absolute;
    left: 0px;
    top: 158px;
    }
    .service-title {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 473px;
    position: absolute;
    left: 0px;
    top: 202px;
    }
    .the-shortest-path-to-your-customers {
    color: var(--neturals-white, #ffffff);
    text-align: left;
    font-family: var(--heading-2-1-font-family, "Aptos-SemiBold", sans-serif);
    font-size: var(--heading-2-1-font-size, 48px);
    font-weight: var(--heading-2-1-font-weight, 600);
    position: relative;
    align-self: stretch;
    }
    .service-image {
    background: var(
        --linear-bg,
        linear-gradient(
        270deg,
        rgba(86, 52, 184, 0.1) 0%,
        rgba(157, 65, 230, 0.1) 100%
        )
    );
    border-radius: var(--20, 20px);
    border-style: solid;
    border-color: var(--primary-50, #c3badb);
    border-width: 4px;
    width: 950px;
    height: 540px;
    position: absolute;
    left: 671px;
    top: 0px;
    overflow: hidden;
    }
    .seo-1-1 {
    width: 1166px;
    height: 656px;
    position: absolute;
    left: -142px;
    top: -15px;
    overflow: hidden;
    }
    .group {
    position: absolute;
    inset: 0;
    }
    .layer-22 {
    width: 1184.82px;
    height: 666.58px;
    position: static;
    }
    .layer-12 {
    width: 1184.82px;
    height: 666.58px;
    position: static;
    }
    .rectangle {
    width: 101.61%;
    height: 101.61%;
    position: absolute;
    right: -1.61%;
    left: 0%;
    bottom: -1.61%;
    top: 0%;
    object-fit: cover;
    }
    .vector8 {
    width: 5.16%;
    height: 13.42%;
    position: absolute;
    right: 73.07%;
    left: 21.77%;
    bottom: 14.19%;
    top: 72.39%;
    overflow: visible;
    }
    .vector9 {
    width: 5.59%;
    height: 13.8%;
    position: absolute;
    right: 66.9%;
    left: 27.5%;
    bottom: 16.04%;
    top: 70.16%;
    overflow: visible;
    }
    .vector10 {
    width: 8.01%;
    height: 14.7%;
    position: absolute;
    right: 58.35%;
    left: 33.64%;
    bottom: 18%;
    top: 67.31%;
    overflow: visible;
    }
    .group2 {
    width: 19.01%;
    height: 16.95%;
    position: absolute;
    right: 58.78%;
    left: 22.21%;
    bottom: 14.97%;
    top: 68.08%;
    overflow: visible;
    mix-blend-mode: multiply;
    }
    .vector11 {
    width: 4.42%;
    height: 11.91%;
    position: absolute;
    right: 73.62%;
    left: 21.96%;
    bottom: 14.99%;
    top: 73.1%;
    overflow: visible;
    }
    .vector12 {
    width: 4.84%;
    height: 12.28%;
    position: absolute;
    right: 67.47%;
    left: 27.69%;
    bottom: 16.8%;
    top: 70.92%;
    overflow: visible;
    }
    .vector13 {
    width: 7.27%;
    height: 13.18%;
    position: absolute;
    right: 58.91%;
    left: 33.82%;
    bottom: 18.72%;
    top: 68.1%;
    overflow: visible;
    }
    .vector14 {
    width: 4.42%;
    height: 11.98%;
    position: absolute;
    right: 73.56%;
    left: 22.02%;
    bottom: 14.94%;
    top: 73.08%;
    overflow: visible;
    }
    .vector15 {
    width: 4.83%;
    height: 12.35%;
    position: absolute;
    right: 67.41%;
    left: 27.76%;
    bottom: 16.77%;
    top: 70.88%;
    overflow: visible;
    }
    .vector16 {
    width: 7.27%;
    height: 13.24%;
    position: absolute;
    right: 58.85%;
    left: 33.88%;
    bottom: 18.71%;
    top: 68.06%;
    overflow: visible;
    }
    .vector17 {
    width: 4.41%;
    height: 12.03%;
    position: absolute;
    right: 73.5%;
    left: 22.08%;
    bottom: 14.9%;
    top: 73.07%;
    overflow: visible;
    }
    .vector18 {
    width: 4.84%;
    height: 12.42%;
    position: absolute;
    right: 67.35%;
    left: 27.82%;
    bottom: 16.73%;
    top: 70.85%;
    overflow: visible;
    }
    .vector19 {
    width: 7.27%;
    height: 13.3%;
    position: absolute;
    right: 58.79%;
    left: 33.95%;
    bottom: 18.68%;
    top: 68.02%;
    overflow: visible;
    }
    .vector20 {
    width: 4.42%;
    height: 12.1%;
    position: absolute;
    right: 73.44%;
    left: 22.15%;
    bottom: 14.86%;
    top: 73.04%;
    overflow: visible;
    }
    .vector21 {
    width: 4.85%;
    height: 12.48%;
    position: absolute;
    right: 67.28%;
    left: 27.88%;
    bottom: 16.7%;
    top: 70.82%;
    overflow: visible;
    }
    .vector22 {
    width: 7.26%;
    height: 13.38%;
    position: absolute;
    right: 58.72%;
    left: 34.01%;
    bottom: 18.66%;
    top: 67.96%;
    overflow: visible;
    }
    .vector23 {
    width: 4.78%;
    height: 12.76%;
    position: absolute;
    right: 73.26%;
    left: 21.96%;
    bottom: 14.52%;
    top: 72.72%;
    overflow: visible;
    }
    .vector24 {
    width: 5.22%;
    height: 13.16%;
    position: absolute;
    right: 67.09%;
    left: 27.69%;
    bottom: 16.35%;
    top: 70.5%;
    overflow: visible;
    }
    .vector25 {
    width: 7.64%;
    height: 14.03%;
    position: absolute;
    right: 58.53%;
    left: 33.83%;
    bottom: 18.33%;
    top: 67.64%;
    overflow: visible;
    }
    .group3 {
    opacity: 0.82;
    width: 15.27%;
    height: 13.88%;
    position: absolute;
    right: 46.86%;
    left: 37.87%;
    bottom: 76.7%;
    top: 9.42%;
    overflow: visible;
    }
    .arrow3 {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--full, 10000px);
    padding: 0px 4px 0px 0px;
    width: 88px;
    height: 88px;
    position: absolute;
    left: 682px;
    top: 283px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    }
    .arrow-left-double3 {
    width: 56px;
    height: 56px;
    position: absolute;
    left: 72px;
    top: 16px;
    transform: translate(-56px, 0px);
    overflow: visible;
    aspect-ratio: 1;
    }





    .our-parteners {
    background: var(
        --linear-bg,
        linear-gradient(
        270deg,
        rgba(86, 52, 184, 0.1) 0%,
        rgba(157, 65, 230, 0.1) 100%
        )
    );
    width: 100%;
    height: 400px;
    position: absolute;
    left: 0px;
    top: 2601px;
    overflow: hidden;
    }
    .header3 {
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;

    }
    .our-partners {
    color: var(--neturals-white, #ffffff);
    text-align: left;
    font-family:  "Aptos-SemiBold", sans-serif;
    font-size: 60px;
    font-weight:500;
    position: relative;
    }

    .group-427320837 {
    position: absolute;
    inset: 0;
    }
    .rectangle-23806 {
    background: var(
        --btn-color,
        linear-gradient(
        -90deg,
        rgba(101, 42, 147, 0.5) 0%,
        rgba(69, 42, 147, 0.5) 100%
        )
    );
    border-radius: 1031.65px;
    border-style: solid;
    border-color: #fafafa;
    border-width: 12px;
    width: 163px;
    height: 163px;
    position: absolute;
    left: 577px;
    top: 348px;
    box-shadow: 0px 45.39px 76.34px -10.32px rgba(0, 0, 0, 0.44);
    }
    .solar-play-bold {
    width: 44px;
    height: 44px;
    position: absolute;
    left: 636px;
    top: 408px;
    overflow: visible;
    }
    .who-are-we {
    width: 100%;
    position: absolute;
    left: -668.17px;
    top: 950px;
    }
    .pic {
    width: 1346.24px;
    height: 1020.87px;
    position: absolute;
    left: 0px;
    top: -0.13px;
    }
    .shape {
    height: auto;
    position: absolute;
    left: 0px;
    top: 37.13px;
    overflow: visible;
    }
    .cover-image {
    height: auto;
    position: absolute;
    left: 767.16px;
    top: 0px;
    overflow: visible;
    width: 50%;
    }
    .who-we-are {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    left: 1485.24px;
    top: -0.13px;
    }
    .header4 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    }
    .who-we-are2 {
    color: var(--neturals-white, #ffffff);
    text-align: left;
    font-family: "Aptos-SemiBold", sans-serif;
    font-size:  60px;
    font-weight:500;
    position: relative;
    flex: 1;
    }
    .at-jalira-we-believe-that-effective-marketing-is-a-mix-of-creative-ideas-and-clear-results-we-craft-unique-content-build-a-powerful-strategy-and-measure-every-step-to-ensure-you-achieve-your-goals-our-aim-is-to-be-your-partner-in-success-from-the-first-idea-to-the-final-sale {
    text-align: left;
    font-family: "Aptos-SemiBold", sans-serif;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    width: 611px;
    }
    .at-jalira-we-believe-that-effective-marketing-is-a-mix-of-creative-ideas-and-clear-results-we-craft-unique-content-build-a-powerful-strategy-and-measure-every-step-to-ensure-you-achieve-your-goals-our-aim-is-to-be-your-partner-in-success-from-the-first-idea-to-the-final-sale-span {
    color: var(--neturals-color, #ffffff);
    font-family:'Aptos-Regular', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 400;
    }
    .at-jalira-we-believe-that-effective-marketing-is-a-mix-of-creative-ideas-and-clear-results-we-craft-unique-content-build-a-powerful-strategy-and-measure-every-step-to-ensure-you-achieve-your-goals-our-aim-is-to-be-your-partner-in-success-from-the-first-idea-to-the-final-sale-span2 {
    color: #a47cf4;
    }
    .button-large2 {
    background: linear-gradient(
        -90deg,
        rgba(157, 65, 230, 0.5) 0%,
        rgba(164, 124, 244, 0.5) 100%
    );
    border-radius: var(--full, 10000px);
    border-style: solid;
    border-color: var(--neturals-color, transparent);
    border-width: 1px;
    padding: 0px 24px 0px 24px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 48px;
    max-width: 335px;
    position: relative;
    overflow: hidden;
    }



    .content3 {
    background: linear-gradient(
        180deg,
        rgba(14, 0, 33, 1) 0%,
        rgba(35, 0, 51, 1) 100%
    );
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0%;
    left: 0%;
    bottom: 0%;
    top: 0%;
    }
    .bg2 {
    width: 100%;
    height: 864px;
    position: absolute;
    left: 0px;
    top: 0px;
    object-fit: cover;
    }
    .clouds {
    opacity: 0.6;
    width: 100%;
    height: 950px;
    position: absolute;
    left: 0px;
    top: -27px;
    mix-blend-mode: overlay;
    object-fit: cover;
    }
    .sparkles {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 619.5px;
    top: 617px;
    mix-blend-mode: screen;
    }
    .large-planet {
    width: 100%;
    height: 155px;
    position: absolute;
    left: -89px;
    top: 714px;
    overflow: visible;
    }
    .vector-15 {
    opacity: 3.25;
    width: 457.27px;
    height: 698.98px;
    position: absolute;
    left: 812px;
    top: 9.19px;
    transform: translate(-54.73px, -9.19px);
    overflow: visible;
    }
    .vector-16 {
    opacity: 0.25;
    width: 334.91px;
    height: 638.5px;
    position: absolute;
    left: 252.59px;
    top: 33px;
    overflow: visible;
    }
    .vector-18 {
    opacity: 0.2;
    width: 325.33px;
    height: 423px;
    position: absolute;
    left: 1203px;
    top: 303px;
    overflow: visible;
    }
    .vector-17 {
    opacity: 1.2;
    width: 324.8px;
    height: 477.33px;
    position: absolute;
    left: -42px;
    top: 207px;
    overflow: visible;
    }
    .smal-planet {
    width: 724px;
        height: 420px;
        position: absolute;
        left: 510px;
        top: 155px;
    }
    .ellipse-5 {
    background: radial-gradient(
        closest-side,
        rgba(12, 1, 30, 1) 73.78434538841248%,
        rgba(26, 10, 47, 1) 100%
    );
    border-radius: 50%;
    width: 420px;
    height: 420px;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 0px;
    }
    .ellipse-19 {
    background: radial-gradient(closest-side, rgb(0 0 0) 97.00197577476501%, rgb(59 25 131 / 73%) 100%);
        border-radius: 50%;
        opacity: 0.1;
        width: 420px;
        height: 420px;
        position: absolute;
        left: 50%;
        translate: -50%;
        top: 0px;
    }
    .main-star {
    width:88%;
    height: 270px;
    position: absolute;
    left: 150px;
    top: 582px;
    }
    .mask-group {
    height: auto;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 0px;
    overflow: visible;
    }
    .ellipse-6 {
    background: #6c41e6;
    border-radius: 50%;
    width: 1030px;
    height: 182px;
    position: absolute;
    left: 54.61px;
    top: 44px;
    filter: blur(177.63px);
    }
    .ellipse-7 {
    background: #6c41e6;
    border-radius: 50%;
    width: 668px;
    height: 120px;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 75px;
    filter: blur(101.84px);
    mix-blend-mode: plus-lighter;
    }
    .ellipse-20 {
    background: #6c41e6;
    border-radius: 50%;
    width: 234.47px;
    height: 61.58px;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 104.21px;
    filter: blur(49.74px);
    mix-blend-mode: screen;
    }
    .ellipse-21 {
    background: #6c41e6;
    border-radius: 50%;
    width: 85.26px;
    height: 61.58px;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 104.21px;
    filter: blur(26.05px);
    mix-blend-mode: soft-light;
    }
    .ellipse-22 {
    background: #ffffff;
    border-radius: 50%;
    width: 75.79px;
    height: 75.79px;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 97.11px;
    filter: blur(26.05px);
    mix-blend-mode: color-dodge;
    }
    .stars {
    width: 1299px;
    height: 596px;
    position: absolute;
    left: 70px;
    top: 37px;
    }
    .ellipse-26 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 15px;
    top: 259px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-27 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 148px;
    top: 265px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-38 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 204px;
    top: 344px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-39 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 189px;
    top: 406px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-40 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 334px;
    top: 468px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-11 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 96px;
    top: 475px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-41 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 48px;
    top: 571px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-42 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 0px;
    top: 523px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-43 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 984px;
    top: 366px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-44 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1267px;
    top: 595px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-45 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1131px;
    top: 547px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-15 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 931px;
    top: 273px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-25 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 551px;
    top: 42px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-17 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 1233px;
    top: 511px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-46 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1202px;
    top: 346px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-48 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1284px;
    top: 0px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-52 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 1284px;
    top: 416px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-23 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 3px;
    height: 3px;
    position: absolute;
    left: 1296px;
    top: 327px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-112 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 235px;
    top: 550px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .group-2 {
    position: absolute;
    inset: 0;
    }
    .ellipse-28 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 3px;
    height: 3px;
    position: absolute;
    left: 133px;
    top: 208px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-29 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 114px;
    top: 177px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-30 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 374px;
    top: 166px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-31 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 383px;
    top: 212px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-34 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 410px;
    top: 186px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-35 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 378px;
    top: 175px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-53 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 353px;
    top: 214px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-36 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 326px;
    top: 213px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-37 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 14px;
    top: 76px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-32 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 298px;
    top: 43px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-60 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 426px;
    top: 104px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-61 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 364px;
    top: 35px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-62 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 433px;
    top: 13px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-63 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 374px;
    top: -9px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-33 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 62px;
    top: 108px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-8 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 180px;
    top: 91px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-14 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 879px;
    top: 63px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-56 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 870px;
    top: 58px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-9 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 299px;
    top: 290px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-13 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 1016px;
    top: 89px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-10 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 34px;
    top: 183px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-12 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 1126px;
    top: 204px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-57 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 1088px;
    top: 252px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-58 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1062px;
    top: 188px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-59 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1090px;
    top: 219px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-212 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 3px;
    height: 3px;
    position: absolute;
    left: 1264px;
    top: 86px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-222 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 787px;
    top: 9px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-16 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 1235px;
    top: 126px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-24 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 902px;
    top: 77px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-47 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1243px;
    top: 149px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-49 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1212px;
    top: 103px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-50 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1220px;
    top: 80px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-51 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 1060px;
    top: 168px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-18 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1069px;
    top: 76px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-54 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 881px;
    top: 27px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-55 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 2px;
    height: 2px;
    position: absolute;
    left: 839px;
    top: 75px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .ellipse-202 {
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1306px;
    top: 111px;
    box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1),
        0px 0px 4px 0px rgba(255, 255, 255, 1),
        0px 0px 8px 0px rgba(255, 255, 255, 1),
        0px 0px 12px 0px rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    }
    .jalira {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: "Aptos-Display", sans-serif;
    font-size: 160px;
    letter-spacing: 0.5em;
    font-weight: 400;
    opacity: 0.1;
    position: absolute;
    left: calc(50% - 409px);
    top: calc(50% - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .marketing-management2 {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: "Aptos-Light", sans-serif;
    font-size: 20px;
    letter-spacing: 0.4em;
    font-weight: 300;
    position: absolute;
    left: 53%;
    translate: -50%;
    top: 318px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .mask-group2 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0%;
    left: 0%;
    bottom: 0%;
    top: 0%;
    overflow: visible;
    }
    .header5 {
    background: linear-gradient(270deg, rgb(21 9 35 / 78%) 0%, rgba(157, 65, 230, 0.1) 100%);
    border-radius: var(--borderradius-super, 999px);
    padding: 24px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    width: 70%;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 30px;
    overflow: hidden;
    z-index: 500;
    }
    .vector26 {
    width: 25.12%;
    height: 81.13%;
    position: absolute;
    right: 55.06%;
    left: 19.82%;
    bottom: 18.88%;
    top: -0.01%;
    overflow: visible;
    }
    .vector27 {
    width: 25.11%;
    height: 81.1%;
    position: absolute;
    right: 1.4%;
    left: 73.49%;
    bottom: 17.43%;
    top: 1.47%;
    overflow: visible;
    }
    .vector28 {
    width: 19.25%;
    height: 97.51%;
    position: absolute;
    right: 80.72%;
    left: 0.03%;
    bottom: 1.66%;
    top: 0.84%;
    overflow: visible;
    }
    .vector29 {
    width: 20.77%;
    height: 79.67%;
    position: absolute;
    right: 17.8%;
    left: 61.42%;
    bottom: 18.64%;
    top: 1.68%;
    overflow: visible;
    }
    .vector30 {
    width: 5.29%;
    height: 55.72%;
    position: absolute;
    right: 39.77%;
    left: 54.94%;
    bottom: 42.16%;
    top: 2.12%;
    overflow: visible;
    }
    .vector31 {
    width: 19.65%;
    height: 79.84%;
    position: absolute;
    right: 39.75%;
    left: 40.6%;
    bottom: 18.73%;
    top: 1.43%;
    overflow: visible;
    }
    .vector32 {
    width: 3.88%;
    height: 43.17%;
    position: absolute;
    right: 23.61%;
    left: 72.5%;
    bottom: 17.5%;
    top: 39.33%;
    overflow: visible;
    }
    .tabs2 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
    }
    .tab2 {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    }
    .home3 {
    color: #fff;
    font-family: "Aptos-Regular", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    }
    .home3.active + .line {
    border-image: linear-gradient(
        90deg,
        rgba(169, 95, 227, 1) 0%,
        rgba(161, 139, 223, 1) 100%
    );
    border-image-slice: 1;
    opacity: 1;
    }
    .line {
    margin-top: 5px;
    border-top: 3px solid transparent;
    width: 100%;
    opacity: 0;
    transition: all 0.3s ease;
    }

    /* عند الوقوف بالماوس */
    .tab:hover .line {
    border-image: linear-gradient(
        90deg,
        rgba(169, 95, 227, 1) 0%,
        rgba(161, 139, 223, 1) 100%
    );
    border-image-slice: 1;
    opacity: 1;
    }

    .bg3 {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    width: 1440px;
    position: fixed;
    left: 0px;
    top: 0px;
    }
    .cursor5 {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    position: relative;
    }
    .blur2 {
    background: rgba(254, 91, 91, 0);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    translate: -50% -50%;
    top: 50%;
    filter: blur(150px);
    }
    .social-media-icons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    left: 50px;
    top: 319px;
    z-index: 700;
    }
    .rectangle-132 {
    border-radius: 60px;
    border-width: 1px;
    border-style: solid;
    border-image: var(
        --btn-color,
        linear-gradient(
        -90deg,
        rgba(101, 42, 147, 0.5) 0%,
        rgba(69, 42, 147, 0.5) 100%
        )
    );
    border-image-slice: 1;
    width: 34px;
    height: 34px;
    position: absolute;
    left: 0px;
    top: 0px;
    }
    .facebook-logo2 {
    width: 7px;
    height: 14px;
    position: absolute;
    left: 13px;
    top: 10px;
    overflow: visible;
    }
    .rectangle-142 {
    border-radius: 60px;
    border-width: 1px;
    border-style: solid;
    border-image: var(
        --btn-color,
        linear-gradient(
        -90deg,
        rgba(101, 42, 147, 0.5) 0%,
        rgba(69, 42, 147, 0.5) 100%
        )
    );
    border-image-slice: 1;
    width: 34px;
    height: 34px;
    position: absolute;
    left: 0px;
    top: 46px;
    }
    .twitter-logo2 {
    width: 18px;
    height: 17px;
    position: absolute;
    left: 8px;
    top: 56px;
    overflow: visible;
    }
    .rectangle-152 {
    border-radius: 60px;
    border-width: 1px;
    border-style: solid;
    border-image: var(
        --btn-color,
        linear-gradient(
        -90deg,
        rgba(101, 42, 147, 0.5) 0%,
        rgba(69, 42, 147, 0.5) 100%
        )
    );
    border-image-slice: 1;
    width: 34px;
    height: 34px;
    position: absolute;
    left: 0px;
    top: 92px;
    }
    .linkedin-logo2 {
    width: 16px;
    height: 15px;
    position: absolute;
    left: 9px;
    top: 101px;
    overflow: visible;
    }
    .rectangle-162 {
    border-radius: 60px;
    border-width: 1px;
    border-style: solid;
    border-image: var(
        --btn-color,
        linear-gradient(
        -90deg,
        rgba(101, 42, 147, 0.5) 0%,
        rgba(69, 42, 147, 0.5) 100%
        )
    );
    border-image-slice: 1;
    width: 34px;
    height: 34px;
    position: absolute;
    left: 0px;
    top: 138px;
    }
    .rectangle-163 {
        border-radius: 60px;
        border-width: 1px;
        border-style: solid;
        border-image: var(
            --btn-color,
            linear-gradient(
            -90deg,
            rgba(101, 42, 147, 0.5) 0%,
            rgba(69, 42, 147, 0.5) 100%
            )
        );
        border-image-slice: 1;
        width: 34px;
        height: 34px;
        position: absolute;
        left: 0px;
        top: 185px;
        }
    .instagram-logo2 {
    width: 16px;
    height: 18px;
    position: absolute;
    left: 9px;
    top: 146px;
    overflow: visible;
    }

    .instagram-logo3 {
        width: 16px;
        height: 18px;
        position: absolute;
        left: 9px;
        top: 192px;
        overflow: visible;
        }



    /* Add this to your style.css file */

    /* For mobile devices */
    @media (max-width: 768px) {
    .home-preview {
        height: auto; /* Allow the page to grow based on content */
    }

    .all-content {
        width: 90%;
        margin: 0 auto;
    }

    /*.footer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        height: 100px;
        padding: 20px;
    }*/

    .footer-content {
        flex-direction: column;
        gap: 20px;
    }

    .frame-427320752, .frame-427321780 {
        width: 100%;
    }

    .frame-2007 {
        flex-direction: column;
        gap: 10px;
    }

    .group-85, .group-86, .group-87, .group-88 {
        width: 40px;
        height: 40px;
    }

    .rectangle-13, .rectangle-14, .rectangle-15, .rectangle-16 {
        width: 40px;
        height: 40px;
    }

    .facebook-logo, .twitter-logo, .linkedin-logo, .instagram-logo {
        width: 10px;
        height: 10px;
    }

    .navigation, .licence, .contact {
        font-size: 14px;
    }

    .tabs {
        gap: 5px;
    }

    .tab {
        padding: 5px;
    }

    .home {
        font-size: 12px;
    }

    .privacy-policy-copyright-email-address, ._406-555-0120, .hey-boostim-com, ._2972-westheimer-rd-santa-ana-illinois-85486 {
        font-size: 12px;
    }

    .hero-title {
        left: -300px;
    }

    .we-take-care-of-your-brand {
        font-size: 48px;
    }

    .we-care-about-our-work-and-we-care-about-our-clients {
        font-size: 16px;
    }

    .email-input-field {
        width: 100%;
    }

    .field {
        width: 100%;
    }

    .button-large {
        max-width: 100%;
    }

    .title {
        top: 30px;
    }

    .what-our-client-said-about-us {
        font-size: 32px;
    }




    .blogs-header, .header, .header2, .header3, .header4 {
        left: 50%;
        transform: translateX(-50%);
    }

    .blogs-header {
        left: 41%;
        transform: translateX(-50%);
    }

    .our-blogs, .portfolio, .our-services2, .our-partners {
        font-size: 24px;
        left: 186px;
    }
    .portfolio {
        left: 6px;
    }
    .our-blogs{
        left: -6px;
    }

    .pointer {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        position: relative;

    }

    .blog, .blog2, .blog3 {
        width: 100%;
        left: 0;
    }

    .blog-image {
        height: 300px;
    }

    .seo-pricing-packages-dubai-how-much-does-seo-cost-in-dubai {
        font-size: 18px;
    }

    .our-portfolio {
        height: 500px;
        top: 2500px;
    }

    .bg {
        flex-wrap: wrap;
    }

    .cursor {
        width: 60px;
        height: 60px;
    }

    .blur {
        width: 60px;
        height: 60px;
    }

    .our-work-speaks-for-itself-we-believe-the-best-proof-of-our-work-lies-in-the-results-we-ve-delivered-for-our-clients-here-you-ll-find-more-than-just-a-gallery-of-projects-you-ll-find-real-success-stories-of-brands-whose-journeys-we-transformed-from-the-starting-point-to-the-top-each-project-is-tangible-proof-that-our-creative-ideas-turn-into-measurable-growth {
        font-size: 16px;
    }

    .porfolio-images {
        width: 100%;
        top: 600px;
    }

    .image2, .image3, .image4 {
        width: 100%;
        height: 300px;
    }

    .share, .share2 {
        width: 30px;
        height: 30px;
    }

    .arrow-left-double, .arrow-left-double2 {
        width: 18px;
        height: 18px;
    }

    .our-services {
        width: 100%;
        left: 0;
        top: 1930px;
    }

    .content2 {
        width: 100%;
    }

    .our-services2 {
        font-size: 32px;
        left: 0px;
    }

    .service {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 20px;
        gap: 30px;
      }

    .service-title {
        width: 100%;
        left: 0;
    }

    .the-shortest-path-to-your-customers {
        font-size: 24px;
    }

    .service-image {
        width: 80%;
        height: 234px;
        left: -143px;
        top: -140px;
    }

    .arrow3prev {

        width: 88px;
        height: 88px;
        left: 100px;
        top: 226px

    }

    .arrow3prev img {
        width: 66px;
        height: 55px;
        left: 6px;
    }



    .arrow3next {

        width: 88px;
        height: 88px;
        left: 682px;
        top: 226px

    }

    .arrow3next img {
        width: 66px;
        height: 55px;


    }


    .seo-1-1 {
        width: 100%;
        height: 300px;
    }

    .our-parteners {
        height: 247px;
        top: 1600px;
    }

    .video {
        width: 100%;
        height: 400px;
        left: 0px;
        top: 1800px;
    }

    .who-are-we {
        width: 94%;
        left: 21px;
        top: 390px;
    }

    .cover-image {
        height: 70p;
        position: absolute;
        left: 37px;
        top: 259px;
        overflow: visible;
        width: 89%;
    }
    .pic {
        width: 100%;
        top: 106px;
        left: -26px;
    }

    .who-we-are {
        left: 0;
    }

    .who-we-are2 {
        font-size: 32px;
    }

    .at-jalira-we-believe-that-effective-marketing-is-a-mix-of-creative-ideas-and-clear-results-we-craft-unique-content-build-a-powerful-strategy-and-measure-every-step-to-ensure-you-achieve-your-goals-our-aim-is-to-be-your-partner-in-success-from-the-first-idea-to-the-final-sale {
        font-size: 16px;
        width: 100%;
    }

    .hero-section {
        height: auto;
    }

    .banner {
        height: auto;
    }

    .content3 {
        height: auto;
    }

    .bg2 {
        height: auto;
    }

    .clouds {
        height: auto;
    }

    .large-planet {
        width: 100%;
    }

    .smal-planet {
        width: 100px;
        height: 100px;
    }

    .ellipse-5 {
        width: 100px;
        height: 100px;
    }

    .main-star {
        width: 100%;
    }

    .stars {
        width: 100%;
    }

    .jalira {
        font-size: 80px;
    }

    .marketing-management2 {
        font-size: 12px;
    }
    }



    /* منع هوامش وافتراضي */
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    }

    /* القسم الرئيسي */
    .hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* يغطي الشاشة بالكامل */
    overflow: hidden;
    }

    /* البانر */
    .banner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    }


    /* الفيديو */
    .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 0;
    }

    /* طبقة غمقان (اختياري) */
    .banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
    }

    /* المحتوى */
    .content3 {
    position: relative;
    z-index: 2; /* فوق الفيديو وطبقة الغمقان */
    color: #fff;
    text-align: center;
    top: 40%;
    }

    .jalira {
    font-size: 48px;
    font-weight: bold;
    margin: 0;
    }

    .marketing-management2 {
    font-size: 24px;
    margin: 10px 0 0;
    }


    .content3 {
    position: relative;
    z-index: 1;        /* يخلي النص فوق الفيديو */
    color: white;
    text-align: center;
    top: 40%;
    }




    .slider-container {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%;
      }

      .slide {
        flex: 0 0 100%; /* كل صورة تاخد 100% من عرض السلايدر */
        box-sizing: border-box;
      }

      .slide img {
        width: 100%;
        height: auto;
        display: block;
      }

      .service-image {
        overflow: hidden; /* مهم: يمنع الصور اللي برا الإطار تظهر */
        position: relative;
      }


      .arrow3prev {
          background: rgba(255, 255, 255, 0.1);
          border-radius: var(--full, 10000px);
          padding: 0px 4px 0px 0px;
          width: 88px;
          height: 88px;
          position: absolute;
          left: 100px;
          top: 226px;
          overflow: hidden;
          backdrop-filter: blur(10px);

      }

      .arrow3prev img {
          width: 66px;
          height: 55px;
          cursor: pointer;
          border-radius: 50%;
          padding: 0px;
          pointer-events: all;
          transition: background 0.3s;
          transform: rotate(180deg);
          left: 6px;
      }



      .arrow3next {
          background: rgba(255, 255, 255, 0.1);
          border-radius: var(--full, 10000px);
          padding: 0px 4px 0px 0px;
          width: 88px;
          height: 88px;
          position: absolute;
          left: 682px;
           top: 226px;
          overflow: hidden;
          backdrop-filter: blur(10px);
      }

      .arrow3next img {
          width: 66px;
          height: 55px;
          cursor: pointer;
          border-radius: 50%;
          padding: 0px;
          pointer-events: all;
          transition: background 0.3s;

      }

      .porfolio-container {
        position: relative;
        overflow: hidden;
        margin: 50px auto;
        height: 910px;
        width: 100%; /* افتراضي */
        max-width: calc((310px + 24px) * 3 - 24px); /* أقصى حاجة 3 صور */
        margin: 6px auto;  /* يخليها في نص الصفحة */

      }


      .porfolio-images {
      display: flex;
      flex-direction: row;
      gap: 24px;
      align-items: center;
      justify-content: flex-start;
      margin: 300px auto 0 auto; /* نزل الكونتينر كله تحت */

        transition: transform 0.5s ease;  /* انيميشن للحركة */
      }

      .image2 {
        border-radius: var(--20, 20px);
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        justify-content: flex-start;
        flex-shrink: 0;
        width: 310px;
        height: 608px;
        margin-right: 10px;
        position: relative;
        overflow: hidden;
        object-fit: cover;
      }



      .arrow, .arrow2 {
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--full, 10000px);
        padding: 0px 4px 0px 0px;
        width: 88px;
        height: 88px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        top: 600px;
        overflow: hidden;
        backdrop-filter: blur(10px);
      }

      .arrow {
        left: 200px;
      }

      .arrow2 {
        right: 200px;
      }

      .arrow img {
          width: 66px;
          height: 55px;
          cursor: pointer;
          border-radius: 50%;
          padding: 0px;
          pointer-events: all;
          transition: background 0.3s;
          margin: 14px 0 0 10px;

      }
      .arrow2 img {
          width: 66px;
          height: 55px;
          cursor: pointer;
          border-radius: 50%;
          padding: 0px;
          pointer-events: all;
          transition: background 0.3s;
          margin: 14px 0 0 10px;

      }

      .testimonial-slider-wrapper {
          position: relative;
          width: 100%;
          height: 500px; /* ارتفاع ثابت مهم */
          overflow: hidden; /* يخفي الشرائح خارج العرض */
      }

      .testimonial-slider {
          display: flex;
          transition: transform 0.6s ease;
          height: 100%;
      }

      .testimonial-slide {
          flex: 0 0 100%;     /* كل شريحة تأخذ 100% من العرض */
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;  /* مهم لكي الأزرار داخل السلايدر تظهر فوق الشرائح */
      }


      .testimonial-content {
          width: 80%;
          display: flex;
          flex-direction: column; /* نخلي الترتيب عمودي */
          gap: 30px;
          color: #f2f2f2;
          font-size: 20px;
          line-height: 1.6;
      }

      /* النص */
      .testimonial-content p {
          text-align: left;
          font-size: 29px;
          line-height: 1.6;
          width: 100%;
      }

      /* الصف اللي فيه العميل + الأسهم */
      .testimonial-footer {
          display: flex;
          flex-direction: row;
          justify-content: space-between; /* العميل شمال والأسهم يمين */
          align-items: center;
          width: 100%;
      }

      /* العميل */
      .client-info {
          display: flex;
          align-items: center;
          gap: 15px;
      }

      .client-info img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          object-fit: cover;
      }




      .frame-427321508 {
          position: absolute;      /* تثبيت داخل السلايدر */
          bottom: 20px;            /* مسافة من أسفل السلايدر */
          right: 200px;             /* أقصى اليمين */
          display: flex;
          align-items: center;
          gap: 10px;               /* المسافة بين السابق / العداد / التالي */
          z-index: 10;
      }


    /* ===== RESPONSIVE DESIGN & MULTILINGUAL SUPPORT ===== */

    /* Arabic Font Support */
    @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

    /* Arabic Language Support */
    html[lang="ar"] body {
        font-family: 'Tajawal', sans-serif;
    }

    html[dir="rtl"] {
        direction: rtl;
    }

    /* RTL Navigation */
    html[dir="rtl"] .tabs2 {
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .social-media-icons {
        left: 20px;
        right: auto;
    }

    html[dir="rtl"] .footer-content {
        flex-direction: row-reverse;
    }

    /* Language Switcher Styles */
    .language-switcher {
        display: flex;
        gap: 10px;
        margin-left: 20px;
        align-items: center;
    }

    .language-switcher a {
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.1);
        color: var(--neturals-white, #ffffff);
        text-decoration: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
        min-width: 40px;
        text-align: center;
    }

    .language-switcher a:hover,
    .language-switcher a.active {
        background: var(--primary-500, #6c41e6);
        border-color: var(--primary-500, #6c41e6);
        transform: translateY(-1px);
    }

    /* Enhanced Header for Mobile */
    .header5 {


        z-index: 1000;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px 20px;
        transition: all 0.3s ease;
    }

    /* Mobile Menu Toggle */
    .mobile-menu-toggle {
        display: none;
        flex-direction: column;
        cursor: pointer;
        padding: 5px;
        background: none;
        border: none;
    }

    .mobile-menu-toggle span {
        width: 25px;
        height: 3px;
        background: var(--neturals-white, #ffffff);
        margin: 3px 0;
        transition: 0.3s;
        border-radius: 2px;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Mobile Navigation */
    .mobile-nav {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: rgb(26 10 47 / 49%);
        backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px;
        z-index: 999;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .mobile-nav.active {
        display: block;
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mobile-nav .tabs2 {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .mobile-nav .tab {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 15px;
    }

    .mobile-nav .home3 {
        display: block;
        padding: 10px 0;
        font-size: 18px;
    }

    .mobile-nav .language-switcher {
        margin: 20px 0 0 0;
        justify-content: center;
    }

    /* Responsive Breakpoints */

    /* Large Desktop */
    @media (min-width: 1400px) {
        .all-content {
            max-width: 100%;
            margin: 0 auto;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .we-offers-a-comprehensive-suite-of-digital-marketing-services-that-cover-all-aspects-of-our-online-presence-from-seo-and-social-media-marketing-to-content-creation-and-ppc-advertising-they-have-the-expertise-and-resources-to-handle-our-diverse-marketing-needs{
            width: 534px;
        }
    }

    /* Desktop */
    @media (max-width: 1200px) {
        .footer-content {
            gap: 60px;
            padding: 0 40px;
        }

        .home {
            height: auto;
            min-height: 100vh;
        }
        .we-offers-a-comprehensive-suite-of-digital-marketing-services-that-cover-all-aspects-of-our-online-presence-from-seo-and-social-media-marketing-to-content-creation-and-ppc-advertising-they-have-the-expertise-and-resources-to-handle-our-diverse-marketing-needs{
            width: 534px;
        }
    }

    /* Tablet */
    @media (max-width: 1024px) {
        .header5 {
            padding: 15px 30px;
        }

        .tabs2 {
            gap: 20px;
        }

        .home3 {
            font-size: 15px;
        }

        .social-media-icons {
            right: 15px;
            gap: 12px;
        }

        .footer-content {
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            padding: 0 30px;
        }

        .we-take-care-of-your-brand {
            font-size: 72px;
        }

        .language-switcher {
            margin-left: 15px;
        }
        .we-offers-a-comprehensive-suite-of-digital-marketing-services-that-cover-all-aspects-of-our-online-presence-from-seo-and-social-media-marketing-to-content-creation-and-ppc-advertising-they-have-the-expertise-and-resources-to-handle-our-diverse-marketing-needs{
            width: 534px;
        }
    }

    /* Mobile Large */
    @media (max-width: 768px) {
        .hero-video {
            position: relative; /* عشان يلتزم بحجمه داخل الحاوية */
            top: auto;
            left: auto;
            transform: none;
            width: 100%;
            height: auto; /* يخلي الطول يتناسب مع العرض */
            object-fit: contain; /* يمنع القص أو الاسترتش */
        }
        .header5 {
            flex-wrap: wrap;
            padding: 15px 20px;
        }

        .tabs2 {
            /*display: none;*/
        }

        .mobile-menu-toggle {
            display: flex;
        }

        .social-media-icons {
            /*position: static;*/
            flex-direction: row;
            justify-content: center;
            transform: none;
            margin: 20px 0;
            order: 3;
            width: 100%;
            top: 100px;
            left: 15px;
        }

        .all-content {
            margin-top: 70px;
        }

        .footer-content {
            grid-template-columns: 1fr;
            gap: 30px;
            text-align: center;
            padding: 0 20px;
        }

        .we-take-care-of-your-brand {
            font-size: 58px;
            width: 100%;
        }

        .hero-title {
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
        }

        .content {
            width: 45%;
            left: 20%;
            padding: 0 20px;
        }

        .language-switcher {
            margin: 10px 0 0 0;
            order: 2;
            width: 100%;
            justify-content: center;
        }

        .arrow3prev {

            width: 70px;
            height: 70px;
            left: 8px;
            top: 70px;

        }

        .arrow3prev img {
            width: 57px;
            height: 44px;
            left: 0px;
        }



        .arrow3next {

            width: 70px;
            height: 70px;
            left: 329px;
            top: 70px;

        }

        .arrow3next img {
            width: 48px;
            height: 44px;
            right: 0px;

        }

        .slide img {
            max-height: 270px;
            max-width: 400px;
          }

          .our-work-box {
            top: 143px;
            left: 30px;
            width: 626px;
            max-width: 400px;
        }
    }



    /* Mobile Medium */
    @media (max-width: 640px) {
        .header5 {
            padding: 12px 15px;
        }

        .logo-1 {
            width: 120px;
            height: 42px;
        }

        .we-take-care-of-your-brand {
            font-size: 36px;
        }

        .we-care-about-our-work-and-we-care-about-our-clients {
            font-size: 18px;
        }

        .social-media-icons {
            gap: 10px;
        }

        .rectangle-132, .rectangle-142, .rectangle-152, .rectangle-162 {
            width: 35px;
            height: 35px;
        }

        .contact-us {
            height: auto;
            min-height: 600px;
            padding: 40px 0;
            top: 5300px;
        }

        .content {
            position: relative;
            top: 20px;
            height: auto;
        }
    }

    /* Mobile Small */
    @media (max-width: 480px) {

        main {
            /*width: 100%;
            position: fixed;
            overflow-x: hidden;
            top: -71px;*/

            width: 112%;
            position: absolute;
           /* overflow-x: hidden;*/
            top: -71px;
        }

        .home {
            height: auto; /* السماح بارتفاع ديناميكي */
            min-height: 100vh; /* كحد أدنى ارتفاع الشاشة */
            overflow: visible; /* السماح بالتمرير */
        }

        .all-content {
            position: absolute; /* بدلاً من absolute إذا كان يسبب مشاكل */
            height: auto;
        }

        body {
            overflow-x: hidden; /* منع التمرير الأفقي */
            position: relative; /* تأكد من أن body قابل للتمرير */
        }

        /* تأكد أن جميع الأقسام قابلة للتمرير */
        .section {
            position: relative;
            overflow: visible;
            top: -71px;
        }

        .header5 {
            padding: 10px 15px;
            top: -55px;
            width: 100%;
            left: 55%;
            background: linear-gradient(270deg, rgb(21 9 35 / 0%) 0%, rgb(157 65 230 / 0%) 100%);
             backdrop-filter: none;

        }


        .logo-1 {
            width: 160px;
            height: 61px;
            right: 147px;
display: none;
        }

    .logo-11 {
        width: 160px;
        height: 61px;
        /*right: 147px;*/
                margin: 0 0 0 -121px;
    }
        .hero-section {

            width: 100%;
            height: 40vh;
            overflow: hidden;

        }
        }

        .we-take-care-of-your-brand {
            font-size: 53px;
            line-height: 1.2;
            max-width: 292px;
        }

        .we-care-about-our-work-and-we-care-about-our-clients {
            font-size: 16px;
        }

        .mobile-nav {
            top: 95px;
            padding: 20px;
        }

        .mobile-nav .home3 {
            font-size: 16px;
        }

        .language-switcher a {
            padding: 6px 10px;
            font-size: 13px;
            min-width: 35px;
        }




        .footer-content {
            padding: 0 15px;
        }

        .frame-427320752 {
            gap: 15px;
        }

        .we-offers-a-comprehensive-suite-of-digital-marketing-services-that-cover-all-aspects-of-our-online-presence-from-seo-and-social-media-marketing-to-content-creation-and-ppc-advertising-they-have-the-expertise-and-resources-to-handle-our-diverse-marketing-needs {
            font-size: 13px;
            line-height: 20px;
            /*width: 100%;*/
        }


    /* Extra Small Mobile */
    @media (max-width: 360px) {
        .we-take-care-of-your-brand {
            font-size: 24px;
        }

        .logo-1 {
            width: 80px;
            height: 30px;
        }

        .language-switcher a {
            padding: 5px 8px;
            font-size: 12px;
            min-width: 30px;
        }

        .mobile-nav {
            padding: 10px;
        }
    }

    /* Landscape Mobile */
    @media (max-height: 500px) and (orientation: landscape) {
        .mobile-nav {
            max-height: calc(100vh - 60px);
        }

        .social-media-icons {
            display: none;
        }
    }

    /* High DPI Displays */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .logo-1 img {
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }
    }

    /* Print Styles */
    @media print {
        .header5,
        .social-media-icons,
        .mobile-menu-toggle,
        .mobile-nav {
            display: none !important;
        }

        .all-content {
            margin-top: 0;
        }

        .home {
            background: white;
            color: black;
        }


    }

    /* Accessibility Improvements */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Focus Styles for Accessibility */
    .home3:focus,
    .language-switcher a:focus,
    .mobile-menu-toggle:focus {
        outline: 2px solid var(--primary-400, #8260e3);
        outline-offset: 2px;
    }

    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        :root {
            --neturals-white: #ffffff;
            --neturals-3: #f7f7f7;
            --neturals-20: #cecece;
        }
    }

    /* Container Queries Support (Future-proofing) */
    @supports (container-type: inline-size) {
        .header5 {
            container-type: inline-size;
        }

        @container (max-width: 768px) {
            .tabs2 {
                display: none;
            }

            .mobile-menu-toggle {
                display: flex;
            }
        }
    }

    /* Enhanced Hover Effects */
    .home3 {
        position: relative;
        overflow: hidden;
    }

    .home3::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s;
    }

    .home3:hover::before {
        left: 100%;
    }

    /* Smooth Scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Loading States */
    .loading {
        opacity: 0.6;
        pointer-events: none;
    }

    .loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid var(--primary-500, #6c41e6);
        border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Enhanced Button Styles */
    .btn-enhanced {
        position: relative;
        overflow: hidden;
        transform: translateZ(0);
    }

    .btn-enhanced::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s;
    }

    .btn-enhanced:hover::before {
        left: 100%;
    }

    /* Improved Form Styles */
    .form-field {
        position: relative;
        margin-bottom: 20px;
    }

    .form-field input,
    .form-field textarea {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: var(--neturals-white, #ffffff);
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .form-field input:focus,
    .form-field textarea:focus {
        outline: none;
        border-color: var(--primary-500, #6c41e6);
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 0 3px rgba(108, 65, 230, 0.1);
    }

    .form-field label {
        position: absolute;
        top: 12px;
        left: 16px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .form-field input:focus + label,
    .form-field input:not(:placeholder-shown) + label,
    .form-field textarea:focus + label,
    .form-field textarea:not(:placeholder-shown) + label {
        top: -8px;
        left: 12px;
        font-size: 12px;
        color: var(--primary-400, #8260e3);
        background: var(--primary-950, #080808);
        padding: 0 4px;
    }

    /* Enhanced Grid System */
    .responsive-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    @media (max-width: 640px) {
        .responsive-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
    }

    /* Utility Classes */
    .hide-mobile {
        display: block;
    }

    .show-mobile {
        display: none;
    }

    @media (max-width: 768px) {
        .hide-mobile {
            display: none;
        }

        .show-mobile {
            display: block;
        }
    }

    .text-responsive {
        font-size: clamp(14px, 2.5vw, 18px);
    }

    .heading-responsive {
        font-size: clamp(24px, 5vw, 48px);
    }

    /* Performance Optimizations */
    .gpu-accelerated {
        transform: translateZ(0);
        will-change: transform;
    }

    /* Intersection Observer Animations */
    .fade-in-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .fade-in-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Enhanced Social Media Icons
    .social-media-icons a {
        position: relative;
        display: block;
        transition: all 0.3s ease;
    }*/

    .social-media-icons a:hover {
        transform: translateY(-2px);
    }

   /* .social-media-icons a::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(108, 65, 230, 0.3);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .social-media-icons a:hover::after {
        opacity: 1;
    }*/


    /* Partners Section Styles */
   /* Partners grid لما تبقى Swiper */
/* Grid داخلي: 6 عناصر فوق و 6 تحت */
.swiper-slide {
    height: auto !important; /* منع Swiper من تقييد الارتفاع */
  }

  .partners-grid-vertical {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: center;
    padding: 20px;
    width: 100%;
  }

  .partner-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .partner-logo {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
  }

  /* تابلت */
  @media (max-width: 992px) {
    .partners-grid-vertical {
      grid-template-columns: repeat(3, 1fr);
    }
    .partner-logo {
      max-height: 70px;
    }
  }

  /* موبايل */
  @media (max-width: 576px) {
    .partners-grid-vertical {
      grid-template-columns: repeat(2, 1fr);
    }
    .partner-logo {
      max-height: 60px;
    }
  }






/* قبل الظهور */
.who-are-we .pic,
.who-are-we .who-we-are {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1.2s ease-out;
}

/* النص يجي من اليسار */
.who-are-we .who-we-are {
    transform: translateX(-100px);
}

/* عند الظهور */
.who-are-we.visible .pic,
.who-are-we.visible .who-we-are {
    opacity: 1;
    transform: translateX(0);
}




/* --- ضع هذا بدل قواعد .video و .video video القديمة --- */

.video {
    position: absolute;   /* تقدر تغير لو عايز تخلّيها في الـ flow */
    left: 126px;
    top: 1542px;
    width: 100%;
    max-width: 1400px;    /* اختياري */
    height: 859px;
    overflow: hidden;     /* مهم جداً لقص الفيديو داخل الكيرف */
    background: #131313;
    /* مثال لكيرف غير متماثل — ترتيب القيم: top-left top-right bottom-right bottom-left */
    border-radius: 60px 60px 30px 30px;
    /* أو لو عايز انحناء بيضاوي (horizontal / vertical radii) استخدم الشريط "/" كما في المثال أسفل */
    /* border-radius: 60px 60px 30px 30px / 40px 40px 20px 20px; */
  }

  /* عنصر الفيديو نفسه — يملأ الكونتينر مع قص زائد (بدون تشويه) */
  .video video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;      /* cover = يملأ ويقطع الزوائد، contain = يظهر كامل مع خلفية ظاهرة */
    /* عادة لا تحتاج border-radius هنا لأن الكونتينر يقطعه، لكن إن أردت: */
    border-radius: inherit; /* يرث نفس القيم من الكونتينر */
  }

  /* موبايل — حافظ على الـ absolute لكن خفف الارتفاع إن أردت */
  @media (max-width: 768px) {
    .video {
      left: 0;
      top: 1100px;   /* أترك القيمة اللي تناسبك */
      width: 100%;
      height: 400px;
      border-radius: 40px 40px 20px 20px;
    }
  }


  /* ✅ تابلت */
@media (max-width: 992px) {
    .our-portfolio .portfolio-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 في التابلت */
    }
  }

  /* ✅ موبايل */
  @media (max-width: 576px) {
    .our-portfolio .portfolio-grid {
      grid-template-columns: 1fr; /* صورة واحدة في الصف */
    }
  }
  .porfolio-container {
    position: relative;
    overflow: hidden;
    margin: 50px auto;
    width: 100%;
    max-width: calc((310px + 24px) * 3 - 24px); /* 3 صور في الديسكتوب */
  }

  /* السطر اللي فيه الصور */
  .porfolio-images {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.5s ease;
  }

  /* كل صورة */
  .porfolio-images .image2 {
    flex: 0 0 310px;   /* حجم الصورة الأساسي */
    height: auto;
    border-radius: 12px;
    object-fit: cover;
  }

  /* ✅ تابلت */
  @media (max-width: 992px) {
    .porfolio-container {
      max-width: calc((310px + 24px) * 2 - 24px); /* صورتين */
    }
    .arrow2 {
        left: 336px;
    }

    .arrow {
        left: 0;
    }
    .blogs {
        width: 100%;
        height: 868px;
        left: 45px;
        top: 3600px;
    }

    .testmonial {

        top: 4200px;
        }

        .frame-427321508 {

            right: 85px;
                   }
 }

  /* ✅ موبايل */
  @media (max-width: 576px) {
    .porfolio-container {
      max-width: 310px; /* صورة واحدة */
    }
    .blogs {
        grid-template-columns: 1fr; /* ✅ عمود واحد */
      }
    .porfolio-images {
      gap: 12px; /* مسافة أصغر في الموبايل */
    }
  }


  /* ========== Responsive ========== */
  @media (max-width: 992px) {
    .testimonial-slide {
      padding: 20px;
    }
    .testimonial-content p {
      font-size: 16px;
    }
  }

  @media (max-width: 576px) {
    .testimonial-slide {
      padding: 15px;
    }
    .testimonial-content p {
      font-size: 14px;
    }
    .client-info img {
      width: 50px;
      height: 50px;
    }
  }



  /* ===== Responsive ===== */
  @media (max-width: 991px) {
    .contact-us .content {
      flex-direction: column;
      text-align: center;
    }

    .frame-105 {
      justify-content: center;
    }

    .hero-title .we-take-care-of-your-brand {
      font-size: 28px;
    }

    .hero-title .we-care-about-our-work-and-we-care-about-our-clients {
      font-size: 16px;
      max-width: 324px;
    }
    .frame-104 {
        left: -80px;
    }
    .footer {
       top:5000px;
       position: absolute;
    }

  }

  @media (max-width: 576px) {
    .hero-title .we-take-care-of-your-brand {
      font-size: 22px;
    }

  }
/* الشاشات الصغيرة (جوال) */
@media (max-width: 768px) {
    .rectangle-196,
    .rectangle-204,
    .rectangle-205,
    .rectangle-200,
    .rectangle-201,
    .rectangle-202,
    .ellipse-84,
    .union,
    .div,
    .div2,
    .div3,
    .div4,
    .div5 {
      position: static;   /* يلغي الـ absolute */
      margin: 10px auto; /* يخليهم تحت بعض في النص */
      display: block;
    }

    .rectangle-196,
    .rectangle-200,
    .rectangle-202 {
      width: 90%;
      height: auto;
    }

    .ellipse-84 {
      width: 150px;
      height: 150px;
    }

    .div,
    .div2,
    .div3,
    .div4,
    .div5 {
      font-size: 40px;
      line-height: 1.2;
      text-align: center;
      transform: none;
    }
  }

  /* الشاشات المتوسطة (تابلت) */
  @media (min-width: 769px) and (max-width: 1024px) {
    .rectangle-196,
    .rectangle-200,
    .rectangle-202 {
      width: 60%;
      height: auto;
    }

    .ellipse-84 {
      width: 200px;
      height: 200px;
    }
  }
/* تصميم الصورة ليبقى بنفس المكان */
.group-image {
    position: absolute; /* لو عايز نفس الوضعية زي القديم */
    left: 80%;         /* ضبط في الوسط */
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;    /* مرن للشاشات الصغيرة */
    height: auto;
    z-index: 1;         /* خلف النصوص */
  }

  /* اجعل hero-title فوق الصورة */
  .hero-title {
    position: relative;
    z-index: 2;
    text-align: center;
  }

  /* Responsive للجوال */
  @media (max-width: 768px) {
    .group-image {
        width: 300px;
        top: 19%;
        left: 72%;
        max-width:none;
    }
    .hero-title h1 {
      font-size: 28px;
    }
    .hero-title p {
      font-size: 14px;
    }
  }




/* الفوتر العام */
.footer {
    width: 100%;
    position: relative; /* ليكون أسفل المحتوى */
    padding: 30px 20px; /* مسافة داخلية */
    box-sizing: border-box;
}

/* محتوى الفوتر */
.footer .footer-content {
    display: flex;
    flex-wrap: wrap; /* يسمح بالتفاف العناصر على الشاشات الصغيرة */
    justify-content: space-between;
    gap: 20px;
}

/* أقسام الفوتر */
.footer .footer-content > div {
    flex: 1 1 200px; /* يسمح بالمرونة */
}

/* صور وشعارات */
.footer img {
    max-width: 100%;
    height: auto;
}

/* ريسبونسيف للجوالات الصغيرة */
@media (max-width: 768px) {
    .footer .footer-content {
        flex-direction: column; /* ترتيب عمودي */
        align-items: center;
        text-align: center;
    }
}

/* ريسبونسيف لشاشات أصغر جدًا */
@media (max-width: 480px) {
    .footer {
        padding: 20px 10px;
                position: absolute;
    }
    .footer .footer-content > div {
        flex: 1 1 100%;
        /*margin-bottom: 15px;*/
        margin: -52px auto;
    }
    .we-offers-a-comprehensive-suite-of-digital-marketing-services-that-cover-all-aspects-of-our-online-presence-from-seo-and-social-media-marketing-to-content-creation-and-ppc-advertising-they-have-the-expertise-and-resources-to-handle-our-diverse-marketing-needs{
        left: -113px;
        max-width: 300px;
    }
    .frame-2007 {
        flex-direction: column;
        gap: 10px;
        left: -119px;
    }
    .group-2011 {
        flex-shrink: 0;
        width: 300px;
        height: 471px;
        position: absolute;
        left: -139px
    }
    .group-2013 {
        flex-shrink: 0;
        width: 87px;
        height: 157px;
        position: absolute;
        left: -235px
    }
    .group-2009 {
        flex-shrink: 0;
        width: 184px;
        height: 191px;
        position: absolute;
        left: -343px
    }
    .outline-logo {

        top: 626px;
    }
}