/*
	Theme Name: portfolio 1
	Theme URI: https://foursw.com/
	Author: تم تصميم وتطوير بواسطة شركة foursw
	Author URI: https://foursw.com/
*/

/*=============== VARIABLES CSS ===============*/
:root {
    --header-height: 3.5rem;

    /*========== Colors ==========*/
    --primary-1: #4E9FE2;
    --primary-2: #5D87AC;
    --primary-3: #292D32;
    --Secondary-1: #F2F4F7;
    --Secondary-2: #F5C536;



    /*========== Font and typography ==========*/
    --body-font: "Arial", sans-serif;
    --h1-font-size: 95px;
    --h2-font-size: 64px;
    --h3-font-size: 48px;
    --h4-font-size: 40px;
    --h5-font-size: 32px;
    --normal-font-size: 20px;

    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: var(--body-font);
}

html {
    scroll-behavior: smooth;
}

input,
button {
    outline: none;
    border: none;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    position: relative;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
    width: 0.6rem;
    background-color: hsl(24, 32%, 95%);
    border-radius: 0.2rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-2);
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
    max-width: 1320px;
    margin-inline: 1.5rem;
    margin: 0 auto;
}

.section {
    padding-block: 5rem 3rem;
}



/*=============== HEADER & NAV ===============*/
.header {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: var(--z-fixed);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* bounce effect */
}


.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 50px;
    padding: 0 10px;
    height: 86px;
    width: fit-content;
    background: rgba(78, 159, 226, 0.11);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header.scroll-header {
    transform: translateX(-50%) translateY(0);
    animation: slideDown 0.4s ease-out;
}

.header.scroll-header .nav {
    justify-content: space-between;
    width: 90%;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.nav_logo img {
    width: 139px;
    height: 46px;
}


.nav_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 3rem;
    width: 100%;
}


.nav_link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 135px;
    height: 63px;
    color: var(--primary-3);
    font-size: var(--normal-font-size);
    font-weight: var(--font-regular);
    border-radius: 60px;
    transition: all 0.3s ease-in-out;

    &:hover {
        color: white;
        background-color: var(--primary-1);
        border-radius: 60px;
    }
}


.nav_link.active {
    color: white;
    background-color: var(--primary-1);
    font-weight: var(--font-bold);
    border-radius: 60px;
}

.nav_toggle {
    width: 35px;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.nav_toggle span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: var(--primary-1);
    border-radius: 2px;
    transform-origin: right;
    /* دلوقتي الموجة من الجهة اليمنى */
    animation: wave 1.5s ease-in-out infinite alternate;
}

.nav_toggle span:nth-child(1) {
    animation-delay: 0s;
}

.nav_toggle span:nth-child(2) {
    animation-delay: 0.2s;
}

.nav_toggle span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes wave {
    0% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1.5);
        /* تتوسع من اليمين */
    }

    100% {
        transform: scaleX(1);
    }
}


.nav_toggle,
.nav_close,
.nav_logo_mobile,
.nav_link_mobile {
    display: none;
}


/*=============== ANIMATION ================*/
@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
    }

    to {
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* حركة الطيارة للأعلى واليمين */
@keyframes planeMove {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -30px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* حركة السحاب للأعلى واليسار */
@keyframes windMove {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-30px, -30px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes beam-in {
    from {
        left: -150%;
        opacity: 0;
    }

    to {
        left: 150%;
        opacity: 1;
    }
}

@keyframes beam-out {
    from {
        left: 150%;
        opacity: 1;
    }

    to {
        left: -150%;
        opacity: 0;
    }
}

/*=============== HOME ===============*/
.featured-box {
    padding: 12rem 3rem 0rem 3rem;
    position: relative;
    overflow: hidden;

    .featured-box_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;

        .featured-box_text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            text-align: center;
            gap: 1rem;

            .span {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 101px;
                height: 45px;
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: #171717;
                border: 1.27px solid #171717;
                border-radius: 38px;

                &::after {
                    content: '';
                    position: absolute;
                    background-image: url(assets/image/lines.png);
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                    top: -20px;
                    right: -20px;
                    width: 27.5px;
                    height: 28.5px;
                    z-index: -1;
                    opacity: 0;
                    animation: fadeInOut 3s ease-in-out infinite;
                }
            }

            h1 {
                position: relative;
                font-size: var(--h1-font-size);
                font-weight: var(--font-bold);
                color: #171717;
                z-index: -1;

                span {
                    color: var(--primary-2);
                }

                &::before {
                    content: '';
                    position: absolute;
                    background-image: url(assets/image/lines.png);
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                    transform: rotate(185.61deg);
                    bottom: -45px;
                    left: -60px;
                    width: 71.89011189326769px;
                    height: 74.50430097076959px;
                    z-index: -1;
                    opacity: 0;
                    animation: fadeInOut 3s ease-in-out infinite;
                }
            }
        }

        .featured-box_img {
            position: relative;
            margin-top: -4rem;

            .img {
                position: relative;
                width: 100%;
                max-width: 546px;
                height: 723px;
                z-index: 1;
                margin-bottom: -7rem;
            }

            .wind {
                position: absolute;
                top: 38%;
                left: -17%;
                transform: rotate(10deg);
                width: 185.983045px;
                height: 130.001219px;
                z-index: 2;
                animation: windMove 8s linear infinite;
            }

            .plan {
                position: absolute;
                top: 23%;
                right: -30%;
                width: 270.003532px;
                height: 240.328516px;
                z-index: 2;
                animation: planeMove 6s linear infinite;
            }

            &::after {
                content: '';
                position: absolute;
                background-color: #EBF6FF;
                bottom: -65%;
                left: 50%;
                transform: translateX(-50%);
                width: 811.7788696289062px;
                height: 811.7788696289062px;
                border-radius: 50%;
                z-index: -1;
            }
        }

        .pra {
            position: absolute;
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 25px;
            width: 304px;
            top: 60%;
            left: 15%;
            transform: translate(-50%, -50%);

            i {
                font-size: 35px;
                color: #344054;
            }

            p {
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: #344054;
            }
        }

        .experince {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: end;
            flex-direction: column;
            top: 60%;
            right: -3%;
            transform: translate(-50%, -50%);

            .stars {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 3px;
                margin-bottom: 5px;

                i {
                    color: #FEC827;
                    font-size: 25px;
                }
            }

            h2 {
                font-size: var(--h3-font-size);
                font-weight: var(--font-bold);
                color: var(--primary-3);
            }

            span {
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: var(--primary-3);
            }
        }

        .btns {
            position: absolute;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            gap: 10px;
            border: 0.5px solid #D0D5DD;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 50px;
            bottom: 45px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;

            .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                overflow: hidden;
                gap: 10px;
                width: 208px;
                height: 62px;
                font-size: 26px;
                font-weight: var(--font-regular);
                color: white;
                background-color: var(--primary-1);
                border-radius: 60px;
                border: 0.5px solid rgba(208, 213, 221, 1);
                cursor: pointer;
                transition: box-shadow 0.3s ease;

                i {
                    font-size: 25px;
                    transform: rotate(45deg);
                }

                &::before {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -150%;
                    width: 40%;
                    height: 200%;
                    background: linear-gradient(110deg,
                            transparent 35%,
                            rgba(255, 255, 255, 0.15) 45%,
                            rgba(255, 255, 255, 0.9) 50%,
                            rgba(255, 255, 255, 0.15) 55%,
                            transparent 65%);
                    transform: rotate(12deg);
                    filter: blur(1px);
                    opacity: 0;
                }

                &:hover::before {
                    animation: beam-in 1s ease-out forwards;
                    opacity: 1;
                }

                &:not(:hover)::before {
                    animation: beam-out 0.9s ease-in forwards;
                }

                &:hover {
                    box-shadow:
                        0 0 14px rgba(255, 255, 255, 0.25),
                        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
                }
            }

            .btn-secondary {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 130px;
                height: 50px;
                font-size: 26px;
                font-weight: var(--font-regular);
                color: white;
                cursor: pointer;
                transition: all 0.3s ease;

                &:hover {
                    transform: scale(1.15);
                }
            }
        }
    }
}

/*=============== SERVICES ===============*/
.services {
    position: relative;
    background-image: url(assets/image/Background\ services.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50px;
    overflow: hidden;
    padding-inline: 3rem;

    .services_container {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 5.5rem;

        .section_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            h2 {
                font-size: var(--h3-font-size);
                font-weight: var(--font-bold);
                color: white;

                span {
                    color: var(--primary-3);
                }
            }

            p {
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: white;
                max-width: 575px;
                width: 100%;
            }
        }

        .swiper {
            width: 100% !important;
            height: auto !important;
            padding-bottom: 4rem;

            .swiper-wrapper {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 25px;

                .swiper-slide {
                    width: 416px !important;
                    height: 460px !important;
                    overflow: visible !important;
                    z-index: 5;



                    .service_card {
                        position: relative;
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        flex-direction: column;
                        gap: 2rem;
                        width: 100%;
                        height: 100%;
                        border-radius: 35px;
                        background: rgba(64, 134, 192, 0.6);
                        backdrop-filter: blur(15px);
                        -webkit-backdrop-filter: blur(15px);
                        padding: 0;
                        overflow: visible;
                        clip-path: path('M 35 0 L 381 0 Q 416 0 416 35 L 416 310 Q 416 345 381 345 L 335 345 Q 300 345 300 380 L 300 425 Q 300 460 265 460 L 35 460 Q 0 460 0 425 L 0 35 Q 0 0 35 0 Z');

                        &::before {
                            content: '';
                            position: absolute;
                            inset: 0px;
                            border-radius: 35px;
                            padding: 2px;
                            background: radial-gradient(87.42% 50% at 50% 50%,
                                    rgba(255, 255, 255, 0) 0%,
                                    rgba(255, 255, 255, 0.5) 100%);
                            -webkit-mask:
                                linear-gradient(#fff 0 0) content-box,
                                linear-gradient(#fff 0 0);
                            -webkit-mask-composite: xor;
                            mask-composite: exclude;
                            pointer-events: none;
                            z-index: -1;
                        }

                        .header_card {
                            padding: 2rem 1.5rem 1rem 1.5rem;
                            border-bottom: 2px solid #F9FAFB4D;
                            width: 100%;

                            h3 {
                                font-size: var(--h5-font-size);
                                font-weight: var(--font-bold);
                                color: white;
                            }
                        }

                        .img {
                            position: relative;
                            width: 100%;
                            height: 307px;
                            border-radius: 35px;
                            z-index: 3;

                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 35px;
                                object-fit: cover;
                                z-index: 3;
                            }

                            &::before {
                                content: '';
                                position: absolute;
                                width: 375px;
                                height: 100%;
                                background: #A4D1F5;
                                top: -20px;
                                left: 50%;
                                transform: translateX(-50%);
                                border-radius: 35px;
                                z-index: -1;
                            }

                            &::after {
                                content: '';
                                position: absolute;
                                width: 330px;
                                height: 100%;
                                background: #84C7FF;
                                top: -35px;
                                left: 50%;
                                transform: translateX(-50%);
                                border-radius: 35px;
                                z-index: -2;
                            }

                        }


                    }

                    .arrow {
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        width: 100px;
                        height: 100px;
                        background-color: white;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        z-index: 10;
                        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

                        i {
                            font-size: 30px;
                            color: var(--primary-1);
                            transform: rotate(320deg);
                            transition: transform 0.3s ease;
                        }
                    }
                }
            }

            .swiper-pagination-bullet {
                width: 15px;
                height: 15px;
                background-color: rgba(255, 255, 255, 0.5);
                opacity: 1;
                transition: all 0.3s ease-in-out;
            }

            .swiper-pagination-bullet-active {
                width: 60px;
                height: 15px;
                border-radius: 20px;
                background-color: white;
            }
        }

        &::after {
            content: '';
            position: absolute;
            background-image: url(assets/image/wind\ 2.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            bottom: 72%;
            right: 50%;
            width: 180.94528084630718px;
            height: 180.94528084630718px;
            z-index: -1;
            animation: windMove 8s linear infinite;
        }
    }

    &::before {
        content: '';
        position: absolute;
        background-image: url(assets/image/wind\ 1.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        top: 13%;
        left: 0;
        width: 432.334011857398px;
        height: 441.9066131085534px;
        animation: windMove 8s linear infinite;
        z-index: -1;
    }

    &::after {
        content: '';
        position: absolute;
        background-image: url(assets/image/wind\ 3.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        bottom: 0;
        right: 0;
        width: 510px;
        height: 570px;
        z-index: -1;
        animation: windMove 8s linear infinite;
    }
}

/*=============== EXPERINCE ===============*/
.experience {
    padding-inline: 3rem;

    .experience_container {

        .section_header {
            display: flex;
            justify-content: center;
            align-items: center;

            h2 {
                font-size: var(--h3-font-size);
                font-weight: var(--font-bold);
                color: var(--primary-3);

                span {
                    color: var(--primary-2);
                }
            }


        }

        .experience_content {
            margin-top: 4rem;

            .timeline {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 3rem;
                flex-direction: column;

                .timeline_item {
                    display: flex;
                    justify-content: center;
                    align-items: start;
                    width: 100%;
                    gap: 22rem;

                    .timeline_left,
                    .timeline_right {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        flex-direction: column;
                        text-align: start;
                        gap: 0.8rem;
                        width: 100%;

                        h4 {
                            font-size: var(--h4-font-size);
                            font-weight: var(--font-regular);
                            color: var(--primary-3);
                        }

                        span,
                        p {
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-regular);
                            color: #98A2B3;
                        }

                        p {
                            width: 444px;
                        }
                    }
                }

                .timeline_dote {
                    position: absolute;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    height: 90%;
                    bottom: 30px;

                    span {
                        position: relative;
                        width: 36px;
                        height: 36px;
                        background-color: #CDCDCD;
                        border-radius: 50%;

                        &::after {
                            content: '';
                            position: absolute;
                            width: 2px;
                            height: 125px;
                            border-right: 2px dashed #CDCDCD;
                            top: 40px;
                            right: 15px;
                        }


                        &.active {
                            position: relative;
                            background-color: var(--primary-1);
                            z-index: 1;

                            &::after {
                                content: '';
                                position: absolute;
                                width: 48px;
                                height: 48px;
                                border: 2px dashed var(--primary-1);
                                background-color: transparent;
                                border-radius: 50%;
                                z-index: 0;
                                inset: -8px;
                            }
                        }
                    }

                    .dote_mobile {
                        display: none;
                    }
                }
            }
        }
    }
}

/*=============== HIRE ME ===============*/
.hire_me {
    background: #F2F4F7;
    border-radius: 50px;
    padding-inline: 3rem;

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

        .hire_me_img {
            position: relative;
            width: 440px;
            height: 670px;
            z-index: 1;

            &::after {
                content: '';
                position: absolute;
                width: 493px;
                height: 511px;
                background: linear-gradient(to bottom, #5D87AC 0%, #4D6377 100%);
                border-radius: 114px;
                top: 62%;
                left: 52%;
                transform: translate(-50%, -50%);
                z-index: -1;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .hire_me_text {
            display: flex;
            justify-content: center;
            align-items: start;
            flex-direction: column;
            gap: 2rem;

            h2 {
                font-size: var(--h2-font-size);
                font-weight: var(--font-bold);
                color: var(--primary-3);

                span {
                    color: var(--primary-1);
                }
            }

            p {
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: #98A2B3;
                max-width: 580px;
                width: 100%;
            }

            .achivement {
                display: flex;
                justify-content: center;
                align-items: start;
                gap: 4rem;

                .achivement_item {
                    display: flex;
                    justify-content: center;
                    align-items: start;
                    flex-direction: column;
                    gap: 10px;

                    h3 {
                        font-size: 36px;
                        font-weight: var(--font-bold);
                        color: var(--primary-3);
                    }

                    span {
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-regular);
                        color: #667085;
                    }
                }
            }

            .btn_hire_me {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 233px;
                height: 82px;
                font-size: var(--h5-font-size);
                font-weight: var(--font-bold);
                color: var(--primary-3);
                border: 1px solid var(--primary-3);
                border-radius: 32px;
                cursor: pointer;
                margin-top: 10px;
                transition: all 0.3s ease-in-out;

                &:hover {
                    color: white;
                    background-color: var(--primary-3);
                }
            }
        }
    }
}

/*=============== PORTFOLIO ===============*/
.portfolio {
    padding-inline: 3rem;

    .portfolio_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 48px;

        .portfolio_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            h2 {
                font-size: var(--h2-font-size);
                font-weight: var(--font-bold);
                color: var(--primary-3);
                width: 650px;

                span {
                    color: var(--primary-2);
                }
            }

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                overflow: hidden;
                width: 141px;
                height: 63px;
                border-radius: 60px;
                background-color: var(--primary-1);
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: white;
                cursor: pointer;
                transition: box-shadow 0.3s ease;

                &::before {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -150%;
                    width: 40%;
                    height: 200%;
                    background: linear-gradient(110deg,
                            transparent 35%,
                            rgba(255, 255, 255, 0.15) 45%,
                            rgba(255, 255, 255, 0.9) 50%,
                            rgba(255, 255, 255, 0.15) 55%,
                            transparent 65%);
                    transform: rotate(12deg);
                    filter: blur(1px);
                    opacity: 0;
                }

                &:hover::before {
                    animation: beam-in 1s ease-out forwards;
                    opacity: 1;
                }

                &:not(:hover)::before {
                    animation: beam-out 0.9s ease-in forwards;
                }

                &:hover {
                    box-shadow:
                        0 0 14px rgba(255, 255, 255, 0.25),
                        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
                }
            }
        }

        .swiper {
            width: 100% !important;
            height: auto !important;
            padding-bottom: 4rem;
            transition: opacity 0.4s ease, transform 0.4s ease;

            .swiper-wrapper {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 25px;

                .swiper-slide {
                    width: 633px !important;
                    height: 371px !important;

                    .portfolio_card {
                        position: relative;
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        flex-direction: column;
                        width: 100%;
                        height: 100%;
                        border-radius: 20px;

                        .header_card {
                            position: absolute;
                            bottom: 10px;
                            left: 10px;
                            width: 100%;
                            z-index: 3;

                            h3 {
                                font-size: 70px;
                                font-weight: var(--font-bold);
                                color: white;
                            }
                        }

                        .img {
                            position: relative;
                            width: 100%;
                            height: 100%;
                            border-radius: 35px;

                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 20px;
                                object-fit: cover;
                            }

                        }

                        &::after {
                            content: '';
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(207.19deg, rgba(78, 159, 226, 0.01) 47.41%, rgba(78, 159, 226, 0.36) 76.39%, rgba(78, 159, 226, 0.41) 89.23%);
                            border-radius: 24px;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            z-index: 1;
                        }

                        &:hover .arrow {
                            opacity: 1;
                        }

                    }

                    .arrow {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        width: 65px;
                        height: 65px;
                        background-color: white;
                        border-radius: 50%;
                        border: 1px solid #4E9FE2;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        z-index: 10;
                        box-shadow: 0px 1px 15px 0px #4E9FE280;
                        opacity: 0;
                        transition: opacity 0.3s ease;

                        i {
                            font-size: 30px;
                            color: var(--primary-1);
                            transition: transform 0.3s ease;
                        }
                    }
                }
            }

            .swiper-pagination-bullet {
                width: 15px;
                height: 15px;
                background-color: #CDCDCD;
                opacity: 1;
                transition: all 0.3s ease-in-out;
            }

            .swiper-pagination-bullet-active {
                width: 60px;
                height: 15px;
                border-radius: 20px;
                background-color: var(--primary-1);
            }
        }

        .portfolio_swiper.fade-out {
            opacity: 0;
            transform: translateY(20px);
        }

        .portfolio_swiper.fade-in {
            opacity: 1;
            transform: translateY(0);
        }

        .buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;

            button {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 15px 32px;
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: black;
                background-color: #F2F4F7;
                border-radius: 24px;
                cursor: pointer;
                border: none;
                transition: all 0.3s ease-in-out;
            }

            button.active {
                background-color: var(--primary-1);
                color: white;
            }

            button:not(.active):hover {
                background-color: var(--primary-1);
                color: white;
            }
        }

        .link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            flex-direction: column;
            gap: 25px;
            width: 790px;

            h4 {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 18px;
                font-size: var(--h3-font-size);
                font-weight: var(--font-bold);
                color: #344054;

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 58px;
                    height: 58px;
                    background-color: var(--primary-1);
                    border-radius: 50%;
                    cursor: pointer;
                    transition: all 0.3s ease-in-out;

                    i {
                        font-size: 34px;
                        color: white;
                        transform: rotate(320deg);
                        transition: all 0.3s ease-in-out;
                    }

                    &:hover {
                        background-color: #49a8f6;

                        i {
                            color: white;
                            transform: rotate(360deg);
                        }
                    }
                }
            }

            p {
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: #344054;
            }
        }
    }
}

/*=============== TESTIMONIALS ===============*/
.testimonalis {
    background-image: url(assets/image/Background\ services.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50px;
    padding-top: 7.5rem;
    padding-bottom: 12.5rem;

    .testimonalis_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 95px;

        .section_header {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            gap: 1rem;

            h2 {
                position: relative;
                font-size: var(--h3-font-size);
                font-weight: var(--font-bold);
                color: var(--primary-3);
                width: 555px;

                span {
                    color: white;
                }

                &::after {
                    content: '';
                    position: absolute;
                    background-image: url(assets/image/lines\ 2.png);
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                    top: -15px;
                    right: 45px;
                    width: 28.5px;
                    height: 28.5px;
                }
            }

            p {
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: white;
                max-width: 742px;
                width: 100%;
            }

            &::before {
                content: '';
                position: absolute;
                background-image: url(assets/image/star.png);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                bottom: 5px;
                left: -65px;
                width: 39.25496227765044px;
                height: 33.959747px;
            }

            &::after {
                content: '';
                position: absolute;
                background-image: url(assets/image/star.png);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                bottom: 55px;
                right: -65px;
                width: 56px;
                height: 49px;
            }
        }

        .swiper {
            width: 100%;
            height: auto;
            padding-top: 12px;

            .swiper-wrapper {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 75px;

                .swiper-slide {
                    width: 791px !important;
                    height: auto;

                    .testimonalis_card {
                        background-color: white;
                        width: 100%;
                        height: 100%;
                        padding: 21px;
                        border-radius: 24px;
                        transition: box-shadow 0.3s ease-in-out,
                            transform 0.3s ease-in-out;

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

                            .client_info {
                                display: flex;
                                justify-content: space-between;
                                align-items: start;
                                flex-direction: column;
                                gap: 15px;

                                .clint_img {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    gap: 12px;

                                    img {
                                        width: 55px;
                                        height: 55px;
                                        border-radius: 50%;
                                        object-fit: cover;
                                    }

                                    .client_text {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: start;
                                        flex-direction: column;
                                        gap: 3px;

                                        h3 {
                                            font-size: 23.5;
                                            font-weight: var(--font-bold);
                                            color: var(--primary-3);
                                        }

                                        span {
                                            font-size: 18px;
                                            font-weight: var(--font-regular);
                                            color: var(--primary-3);
                                        }
                                    }
                                }

                                .stars {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    gap: 5px;

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

                                        i {
                                            font-size: 30px;
                                            color: var(--Secondary-2);
                                        }
                                    }

                                    span {
                                        font-size: 25.69px;
                                        font-weight: var(--font-medium);
                                        color: var(--primary-3);
                                    }
                                }
                            }

                            .quote_icon {
                                font-size: 128px;
                                color: #97CFFF;
                            }
                        }

                        .pra {
                            margin-top: 20px;

                            p {
                                font-size: var(--normal-font-size);
                                font-weight: var(--font-regular);
                                color: var(--primary-3);
                            }
                        }

                        &:hover {
                            transform: translateY(-10px);
                            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                        }
                    }
                }
            }
        }
    }
}

/*=============== DISCUSS ===============*/
.discuss {
    padding-block: 8rem;

    .discuss_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 3rem;

        h2 {
            font-size: var(--h2-font-size);
            font-weight: var(--font-bold);
            color: var(--primary-3);
            text-align: center;
            width: 799px;

            span {
                color: var(--primary-1);
            }
        }

        form {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-direction: column;
            width: 100%;
            max-width: 832px;

            .input {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                max-width: 832px;
                height: 86px;
                border-radius: 50px;
                background-color: white;
                padding: 10px;
                border: 1px solid #DAEBF9;

                .mail {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 73.86561584472656px;
                    height: 58px;
                    border-radius: 50px;
                    background-color: #4E9FE236;

                    i {
                        font-size: 32px;
                        color: var(--primary-1);
                    }
                }

                input {
                    width: 75%;
                    height: 100%;
                    padding: 20px;
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-regular);
                    color: var(--primary-3);
                    border: none;
                    outline: none;
                    border-radius: 50px;
                    background-color: white;
                }

                button {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    overflow: hidden;
                    width: 126px;
                    height: 63px;
                    border-radius: 60px;
                    background-color: var(--primary-1);
                    color: white;
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-regular);
                    cursor: pointer;
                    transition: box-shadow 0.3s ease;

                    &::before {
                        content: '';
                        position: absolute;
                        top: -50%;
                        left: -150%;
                        width: 40%;
                        height: 200%;
                        background: linear-gradient(110deg,
                                transparent 35%,
                                rgba(255, 255, 255, 0.15) 45%,
                                rgba(255, 255, 255, 0.9) 50%,
                                rgba(255, 255, 255, 0.15) 55%,
                                transparent 65%);
                        transform: rotate(12deg);
                        filter: blur(1px);
                        opacity: 0;
                    }

                    &:hover::before {
                        animation: beam-in 1s ease-out forwards;
                        opacity: 1;
                    }

                    &:not(:hover)::before {
                        animation: beam-out 0.9s ease-in forwards;
                    }

                    &:hover {
                        box-shadow:
                            0 0 14px rgba(255, 255, 255, 0.25),
                            inset 0 0 0 1px rgba(255, 255, 255, 0.35);
                    }
                }
            }

            .ratting {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
                width: 100%;
                padding-inline: 2.3rem;

                span {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    font-size: 16px;
                    font-weight: var(--font-regular);
                    color: var(--primary-3);

                    i {
                        color: var(--Secondary-2);
                    }
                }
            }
        }
    }
}

/*=============== BANNAR ===============*/
.bannar {
    background-color: var(--primary-1);
    border-radius: 24px 0 24px 0;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;

    .bannar_container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

        .marquee {
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 100%;
            height: 63px;
            background-color: white;
            transform: rotate(-3.5deg);

            .marquee_track {
                display: flex;
                gap: 50px;
                /* المسافة بين العناصر */
                min-width: 200%;
                /* محتوى مكرر */
                animation: scroll 15s linear infinite;

                span {
                    white-space: nowrap;
                    font-size: var(--h3-font-size);
                    font-weight: var(--font-regular);
                    color: black;
                    position: relative;

                    i {
                        position: absolute;
                        right: -30px;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 20px;
                        color: var(--primary-1);
                    }
                }
            }
        }
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/*=============== BLOG ===============*/
.blog {
    padding-bottom: 6rem;
    padding-inline: 3rem;

    .blog_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 48px;

        .section_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            h2 {
                font-size: var(--h3-font-size);
                font-weight: var(--font-bold);
                color: var(--primary-3);
                width: 450px;
            }

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                overflow: hidden;
                width: 144px;
                height: 66px;
                border-radius: 60px;
                background-color: var(--primary-1);
                font-size: var(--normal-font-size);
                font-weight: var(--font-bold);
                color: white;
                cursor: pointer;
                transition: box-shadow 0.3s ease;

                &::before {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -150%;
                    width: 40%;
                    height: 200%;
                    background: linear-gradient(110deg,
                            transparent 35%,
                            rgba(255, 255, 255, 0.15) 45%,
                            rgba(255, 255, 255, 0.9) 50%,
                            rgba(255, 255, 255, 0.15) 55%,
                            transparent 65%);
                    transform: rotate(12deg);
                    filter: blur(1px);
                    opacity: 0;
                }

                &:hover::before {
                    animation: beam-in 1s ease-out forwards;
                    opacity: 1;
                }

                &:not(:hover)::before {
                    animation: beam-out 0.9s ease-in forwards;
                }

                &:hover {
                    box-shadow:
                        0 0 14px rgba(255, 255, 255, 0.25),
                        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
                }
            }
        }

        .blog_content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 30px;
            width: 100%;

            .blog_card {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                gap: 35px;
                width: 416px;


                .img {
                    width: 416px;
                    height: 432px;
                    border-radius: 32px;
                    box-shadow: 0px 4px 55px 0px #0000000D;
                    overflow: hidden;
                    transition: all 0.3s ease-in-out;
                    clip-path: path('M 35 0 L 381 0 Q 416 0 416 33 L 416 291 Q 416 324 381 324 L 335 324 Q 300 324 300 357 L 300 399 Q 300 432 265 432 L 35 432 Q 0 432 0 399 L 0 33 Q 0 0 35 0 Z');

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 32px;
                        object-fit: cover;
                        transition: all 0.3s ease-in-out;
                    }
                }

                .arrow {
                    position: absolute;
                    bottom: 37%;
                    right: 10px;
                    width: 100px;
                    height: 100px;
                    background-color: var(--primary-1);
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    z-index: 10;
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

                    i {
                        font-size: 30px;
                        color: white;
                        transform: rotate(320deg);
                        transition: transform 0.3s ease;
                    }
                }

                .blog_text {
                    display: flex;
                    justify-content: center;
                    align-items: start;
                    flex-direction: column;
                    gap: 35px;
                    width: 100%;

                    .serv {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 191px;
                        height: 53px;
                        border-radius: 24px;
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-regular);
                        color: black;
                        background-color: #F2F4F7;
                    }

                    .date {
                        display: flex;
                        justify-content: center;
                        align-items: start;
                        gap: 35px;

                        span {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 7px;
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-regular);
                            color: var(--primary-3);

                            i {
                                font-size: 10px;
                                color: var(--primary-1);
                            }
                        }
                    }

                    h3 {
                        font-size: var(--h5-font-size);
                        font-weight: var(--font-regular);
                        color: var(--primary-3);
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                &:hover .img img {
                    transform: scale(1.1);
                }
            }
        }

    }
}

/*=============== FOOTER ===============*/
footer {
    background-color: var(--primary-1);
    padding: 4rem 3rem 1rem 3rem;
    border-radius: 24px 24px 0 0;

    .footer_container {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
        gap: 2rem;

        .footer_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            h2 {
                font-size: var(--h2-font-size);
                font-weight: var(--font-bold);
                color: #FFFFFF;
            }

            .btn-footer {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 8px;
                width: 202px;
                height: 62px;
                font-size: 25.69px;
                font-weight: var(--font-regular);
                color: var(--primary-1);
                background-color: #FFFFFF;
                border-radius: 60px;
                cursor: pointer;
                transition: all 0.3s ease-in-out;

                i {
                    font-size: 20px;
                    transform: rotate(320deg);
                }

                &:hover {
                    box-shadow:
                        0 0 14px rgba(255, 255, 255, 0.25),
                        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
                }
            }
        }

        .footer_menu {
            padding: 4rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            border-top: 2px solid #97CFFF;
            border-bottom: 2px solid #97CFFF;

            .footer_social {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 2rem;

                .img {

                    img {
                        width: 140px;
                        height: 46px;
                    }
                }

                p {
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-regular);
                    color: #FFFFFF;
                    max-width: 635px;
                    width: 100%;
                }

                .social {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 1rem;

                    a {
                        font-size: 24px;
                        color: #FFFFFF;
                        transition: all 0.3s ease-in-out;

                        &:hover {
                            transform: translateY(-5px);
                        }
                    }
                }
            }

            .footer_links {
                display: flex;
                justify-content: center;
                align-items: start;
                flex-direction: column;

                h3 {
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-regular);
                    color: #FFFFFF;
                    margin-bottom: 1.7rem;
                }

                h4 {
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-semi-bold);
                    color: #FFFFFF;
                    margin: 32px 0 23px 0;
                }

                ul {
                    display: flex;
                    justify-content: space-between;
                    align-items: start;
                    flex-direction: column;
                    gap: 23px;

                    a {
                        font-size: 16px;
                        font-weight: var(--font-regular);
                        color: #FFFFFF;
                        cursor: pointer;
                    }

                    li {
                        transition: all 0.3s ease-in-out;

                        &:hover {
                            transform: translateY(-5px);
                        }
                    }
                }

                form {

                    .input {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 304px;
                        height: 51px;
                        border-radius: 14px;
                        background-color: #FFFFFF;
                    }

                    input {
                        width: 250px;
                        height: 100%;
                        padding: 10px;
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-regular);
                        color: var(--primary-3);
                        border-radius: 14px 0 0 14px;
                        background-color: #FFFFFF;
                    }

                    button {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 50px;
                        height: 100%;
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-regular);
                        color: var(--primary-1);
                        background-color: #DAEBF9;
                        border-radius: 0 14px 14px 0;
                        cursor: pointer;

                        i {
                            transform: rotate(45deg);
                        }
                    }
                }
            }

        }

        .footer_copy {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            span {
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: #FFFFFF;
            }

            a {

                img {
                    width: 173.4065704345703px;
                    height: 20.510000228881836px;
                }
            }

            .page_links {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1rem;

                a {
                    position: relative;
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-regular);
                    color: #FFFFFF;
                    cursor: pointer;

                    &:first-child:after {
                        content: '|';
                        position: absolute;
                        bottom: 0px;
                        right: -10px;
                        color: #FFFFFF;
                        font-size: var(--normal-font-size);
                    }
                }
            }
        }
    }
}

/*=============== RESPONSIVE ===============*/
@media (max-width: 1200px) {

    /*=============== HOME ===============*/
    .section {
        padding-block: 4rem 2.5rem;
    }

    .nav_list {
        gap: 5px;
    }

    .featured-box {
        padding: 11rem 0 0rem 0;

        .featured-box_container {


            .pra {
                top: 55%;
            }

            .experince {
                top: 55%;
            }
        }
    }

    /*=============== SERVICES ===============*/
    .services {
        border-radius: 40px;

        .services_container {
            gap: 4.5rem;

            .section_header {

                h2 {
                    font-size: 2.2rem;
                }

                p {
                    max-width: 520px;
                    font-size: 1.05rem;
                }
            }

            .swiper {
                padding-bottom: 3.5rem;

                .swiper-wrapper {
                    gap: 20px;
                }

                .swiper-slide {
                    width: 380px !important;
                    height: 420px !important;

                    .service_card {
                        gap: 1.8rem;
                        clip-path: path('M 30 0 L 350 0 Q 380 0 380 30 L 380 285 Q 380 315 350 315 L 310 315 Q 280 315 280 345 L 280 385 Q 280 420 245 420 L 30 420 Q 0 420 0 385 L 0 30 Q 0 0 30 0 Z');

                        .header_card {
                            padding: 1.8rem 1.3rem 0.9rem 1.3rem;

                            h3 {
                                font-size: 1.4rem;
                            }
                        }

                        .img {
                            height: 280px;

                            &::before {
                                width: 345px;
                            }

                            &::after {
                                width: 305px;
                            }
                        }
                    }

                    .arrow {
                        width: 90px;
                        height: 90px;

                        i {
                            font-size: 28px;
                        }
                    }
                }

                .swiper-pagination-bullet {
                    width: 14px;
                    height: 14px;
                }

                .swiper-pagination-bullet-active {
                    width: 55px;
                }
            }

            &::after {
                bottom: 70%;
                right: 48%;
                width: 170px;
                height: 170px;
            }
        }

        &::before {
            top: 12%;
            width: 400px;
            height: 410px;
        }

        &::after {
            width: 480px;
            height: 530px;
        }
    }

    /*=============== EXPERINCE ===============*/
    .experience {
        padding-inline: 3rem;

        .experience_container {
            .experience_content {
                margin-top: 3.5rem;

                .timeline {
                    gap: 2.5rem;

                    .timeline_item {
                        gap: 18rem;

                        .timeline_left,
                        .timeline_right {
                            p {
                                width: 380px;
                            }
                        }
                    }

                    .timeline_dote {
                        height: 88%;

                        span {
                            width: 34px;
                            height: 34px;

                            &::after {
                                height: 110px;
                            }

                            &.active {
                                &::after {
                                    width: 44px;
                                    height: 44px;
                                    inset: -7px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /*=============== HIRE ME ===============*/
    .hire_me {
        border-radius: 40px;
        padding-inline: 3rem;

        .hire_me_container {


            .hire_me_text {
                gap: 1.8rem;

                h2 {
                    font-size: 2.8rem;
                }

                p {
                    max-width: 520px;
                }

                .achivement {
                    gap: 3.5rem;

                    .achivement_item {
                        h3 {
                            font-size: 32px;
                        }

                        span {
                            font-size: 0.98rem;
                        }
                    }
                }
            }
        }
    }

    /*=============== PORTFOLIO ===============*/
    .portfolio {
        padding-inline: 3rem;

        .portfolio_container {
            gap: 40px;

            .portfolio_header {
                h2 {
                    width: 580px;
                    font-size: 2.8rem;
                }

                a {
                    width: 130px;
                    height: 58px;
                    font-size: 0.98rem;
                }
            }

            .swiper {
                padding-bottom: 3.5rem;



                .swiper-slide {
                    width: 580px !important;
                    height: 340px !important;

                    .portfolio_card {
                        border-radius: 18px;

                        .header_card {
                            h3 {
                                font-size: 64px;
                            }
                        }

                        &::after {
                            border-radius: 22px;
                        }
                    }

                    .arrow {
                        width: 60px;
                        height: 60px;

                        i {
                            font-size: 28px;
                        }
                    }
                }

                .swiper-pagination-bullet {
                    width: 14px;
                    height: 14px;
                }

                .swiper-pagination-bullet-active {
                    width: 55px;
                }
            }

            .buttons {
                gap: 12px;

                button {
                    padding: 14px 28px;
                    font-size: 0.98rem;
                }
            }

            .link {
                width: 720px;
                gap: 22px;

                h4 {
                    font-size: 1.9rem;
                    gap: 16px;

                    a {
                        width: 54px;
                        height: 54px;

                        i {
                            font-size: 32px;
                        }
                    }
                }

                p {
                    font-size: 1rem;
                }
            }
        }
    }

    /*=============== TESTIMONIALS ===============*/
    .testimonalis {
        padding-top: 6rem;
        padding-bottom: 10rem;
        border-radius: 40px;

        .testimonalis_container {
            gap: 80px;

            .section_header {
                h2 {
                    width: 500px;
                    font-size: 2.2rem;
                }

                p {
                    max-width: 680px;
                }
            }


        }
    }

    /*=============== DISCUSS ===============*/
    .discuss {
        padding-block: 7rem;

        .discuss_container {
            gap: 2.8rem;

            h2 {
                width: 720px;
                font-size: 2.8rem;
            }

            form {
                max-width: 780px;

                .input {
                    height: 80px;
                    padding: 8px;

                    .mail {
                        width: 68px;
                        height: 54px;

                        i {
                            font-size: 30px;
                        }
                    }

                    input {
                        padding: 18px;
                        font-size: 1.05rem;
                    }

                    button {
                        width: 118px;
                        height: 58px;
                        font-size: 1rem;
                    }
                }

                .ratting {
                    padding-inline: 2rem;

                    span {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    /*=============== BANNAR ===============*/
    .bannar {
        height: 140px;
        border-radius: 20px 0 20px 0;

        .bannar_container {
            .marquee {
                height: 58px;

                .marquee_track {
                    gap: 45px;
                    animation: scroll 14s linear infinite;

                    span {
                        font-size: 1.9rem;

                        i {
                            right: -28px;
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }

    /*=============== BLOG ===============*/
    .blog {
        padding-bottom: 5rem;
        padding-inline: 3rem;

        .blog_container {
            gap: 40px;

            .section_header {
                h2 {
                    width: 420px;
                    font-size: 2.2rem;
                }

                a {
                    width: 135px;
                    height: 62px;
                    font-size: 1rem;
                }
            }

            .blog_content {
                gap: 25px;

                .blog_card {
                    width: 380px;
                    gap: 30px;

                    .img {
                        width: 380px;
                        height: 395px;
                        border-radius: 28px;
                        clip-path: path('M 32 0 L 348 0 Q 380 0 380 30 L 380 265 Q 380 295 348 295 L 308 295 Q 275 295 275 325 L 275 365 Q 275 395 242 395 L 32 395 Q 0 395 0 365 L 0 30 Q 0 0 32 0 Z');
                    }

                    .arrow {
                        width: 90px;
                        height: 90px;
                        bottom: 38%;

                        i {
                            font-size: 28px;
                        }
                    }

                    .blog_text {
                        gap: 30px;

                        .serv {
                            width: 180px;
                            height: 50px;
                            font-size: 0.98rem;
                        }

                        .date {
                            gap: 30px;

                            span {
                                font-size: 0.98rem;
                            }
                        }

                        h3 {
                            font-size: 1.3rem;
                        }
                    }
                }
            }
        }
    }

    /*=============== FOOTER ===============*/
    footer {
        padding: 3.5rem 3rem 1rem 3rem;
        border-radius: 20px 20px 0 0;

        .footer_container {
            gap: 1.8rem;

            .footer_header {
                h2 {
                    font-size: 2.8rem;
                }

                .btn-footer {
                    width: 190px;
                    height: 58px;
                    font-size: 24px;

                    i {
                        font-size: 19px;
                    }
                }
            }

            .footer_menu {
                padding: 3.5rem 0;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 3rem;

                .footer_social {
                    max-width: 45%;

                    .img img {
                        width: 130px;
                        height: 43px;
                    }

                    p {
                        max-width: 100%;
                    }

                    .social {
                        gap: 0.9rem;

                        a {
                            font-size: 22px;
                        }
                    }
                }

                .footer_links {
                    .input {
                        width: 290px;
                        height: 48px;
                    }

                    input {
                        width: 240px;
                    }
                }
            }

            .footer_copy {
                .page_links {
                    gap: 0.9rem;

                    a {
                        font-size: 0.98rem;
                    }
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .nav {
        width: 85%;
    }

    .header.scroll-header .nav {
        justify-content: space-between;
    }

    .nav_toggle {
        display: flex;
        font-size: 28px;
        cursor: pointer;
    }

    .nav_menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 60%;
        height: 100vh;
        background: #fff;
        padding: 3rem 2rem;
        transition: .4s;
        z-index: 9999;
    }

    .show-menu {
        right: -55px;
        top: -40px;
    }

    .nav_list {
        flex-direction: column;
        gap: 1rem;
    }

    .nav_list li:first-child .nav_link {
        display: none;
    }

    .nav_close {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        cursor: pointer;
        color: var(--primary-1);
    }

    .nav_item_logo {
        display: none;
    }

    .nav_logo_mobile,
    .nav_link_mobile {
        display: flex;
    }

    .nav_link_mobile {
        color: white;
        background-color: var(--primary-1);
        font-weight: var(--font-bold);
        border-radius: 60px;
    }

    /*=============== HOME ===============*/
    .featured-box {
        padding: 11rem 0 0rem 0;

        .featured-box_container {
            .featured-box_text {
                gap: 0.9rem;

                .span {
                    width: 90px;
                    height: 40px;
                }

                h1 {
                    font-size: 2.8rem;
                }
            }

            .featured-box_img {
                margin-top: -3rem;

                .img {
                    max-width: 440px;
                    height: 580px;
                    margin-bottom: -5rem;
                }

                .wind {
                    width: 150px;
                    height: 105px;
                    top: 35%;
                    left: -22%;
                }

                .plan {
                    width: 220px;
                    height: 196px;
                    top: 33%;
                    right: -36%;
                    z-index: 0;
                }

                &::after {
                    width: 650px;
                    height: 650px;
                    bottom: -72%;
                }
            }

            .pra {
                width: 270px;
                top: 53%;
                left: 18%;

                i {
                    font-size: 30px;
                }
            }

            .experince {
                top: 60%;
                right: -5%;

                .stars i {
                    font-size: 22px;
                }

                h2 {
                    font-size: 1.7rem;
                }
            }

            .btns {
                bottom: 35px;

                .btn {
                    width: 175px;
                    height: 54px;
                    font-size: 22px;
                }

                .btn-secondary {
                    width: 110px;
                    height: 46px;
                    font-size: 22px;
                }
            }
        }
    }

    /*=============== SERVICES ===============*/
    .services {
        border-radius: 35px;

        .services_container {
            gap: 4rem;

            .section_header {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 1.5rem;

                h2 {
                    font-size: 2rem;
                }

                p {
                    max-width: 100%;
                    font-size: 1rem;
                }
            }

            .swiper {
                padding-bottom: 3rem;

                .swiper-wrapper {
                    gap: 18px;
                }

                .swiper-slide {
                    width: 360px !important;
                    height: 400px !important;

                    .service_card {
                        gap: 1.6rem;
                        clip-path: path('M 28 0 L 332 0 Q 360 0 360 28 L 360 270 Q 360 298 332 298 L 295 298 Q 265 298 265 328 L 265 365 Q 265 400 230 400 L 28 400 Q 0 400 0 365 L 0 28 Q 0 0 28 0 Z');

                        .header_card {
                            padding: 1.6rem 1.2rem 0.8rem 1.2rem;

                            h3 {
                                font-size: 1.35rem;
                            }
                        }

                        .img {
                            height: 265px;

                            &::before {
                                width: 320px;
                            }

                            &::after {
                                width: 285px;
                            }
                        }
                    }

                    .arrow {
                        width: 85px;
                        height: 85px;

                        i {
                            font-size: 26px;
                        }
                    }
                }

                .swiper-pagination-bullet {
                    width: 13px;
                    height: 13px;
                }

                .swiper-pagination-bullet-active {
                    width: 50px;
                }
            }

            &::after {
                bottom: 68%;
                right: 45%;
                width: 160px;
                height: 160px;
            }
        }

        &::before {
            top: 10%;
            width: 360px;
            height: 370px;
        }

        &::after {
            width: 440px;
            height: 490px;
        }
    }

    /*=============== EXPERINCE ===============*/
    .experience {
        .experience_container {
            .experience_content {
                margin-top: 3rem;

                .timeline {
                    gap: 2rem;

                    .timeline_item {
                        gap: 12rem;

                        .timeline_left,
                        .timeline_right {
                            h4 {
                                font-size: 1.3rem;
                            }

                            span,
                            p {
                                font-size: 0.98rem;
                            }

                            p {
                                width: 320px;
                            }
                        }
                    }

                    .timeline_dote {
                        height: 85%;

                        span {
                            width: 32px;
                            height: 32px;

                            &::after {
                                height: 95px;
                            }

                            &.active {
                                &::after {
                                    width: 42px;
                                    height: 42px;
                                    inset: -6px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /*=============== HIRE ME ===============*/
    .hire_me {
        border-radius: 35px;

        .hire_me_container {
            flex-direction: column-reverse;
            gap: 4rem;
            padding: 4rem 2rem;

            .hire_me_img {
                width: 380px;
                height: 580px;
                order: 2;

                &::after {
                    width: 420px;
                    height: 435px;
                    top: 63%;
                    left: 52%;
                }
            }

            .hire_me_text {
                order: 1;
                align-items: center;
                text-align: center;
                gap: 2rem;

                h2 {
                    font-size: 2.4rem;
                }

                p {
                    max-width: 100%;
                    text-align: center;
                }

                .achivement {
                    gap: 3rem;
                    flex-wrap: wrap;
                    justify-content: center;

                    .achivement_item {
                        h3 {
                            font-size: 30px;
                        }
                    }
                }

                .btn_hire_me {
                    width: 200px;
                    height: 70px;
                    font-size: 1.05rem;
                }
            }
        }
    }

    /*=============== PORTFOLIO ===============*/
    .portfolio {
        .portfolio_container {
            gap: 35px;

            .portfolio_header {
                align-items: flex-start;
                gap: 1.5rem;

                h2 {
                    width: 55%;
                    font-size: 2.4rem;
                }

                a {
                    width: 140px;
                    height: 55px;
                }
            }

            .swiper {
                padding-bottom: 3rem;

                .swiper-slide {
                    width: 100% !important;
                    max-width: 520px !important;
                    height: 320px !important;
                    margin: 0 auto;

                    .portfolio_card {
                        .header_card {
                            h3 {
                                font-size: 58px;
                            }
                        }
                    }

                    .arrow {
                        width: 58px;
                        height: 58px;

                        i {
                            font-size: 26px;
                        }
                    }
                }
            }

            .buttons {
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;

                button {
                    padding: 12px 24px;
                    font-size: 0.95rem;
                }
            }

            .link {
                width: 100%;
                max-width: 650px;
                gap: 20px;

                h4 {
                    font-size: 1.7rem;
                }

                p {
                    font-size: 0.98rem;
                }
            }
        }
    }

    /*=============== TESTIMONIALS ===============*/
    .testimonalis {
        padding-top: 5rem;
        padding-bottom: 8rem;
        border-radius: 35px;

        .testimonalis_container {
            gap: 70px;

            .section_header {
                h2 {
                    width: 100%;
                    max-width: 480px;
                    font-size: 2rem;

                    &::after {
                        right: -20px;
                    }
                }

                p {
                    max-width: 85%;
                }

                &::before {
                    left: 50px;
                    width: 35px;
                    height: 30px;
                }

                &::after {
                    right: 75px;
                    bottom: 90px;
                    width: 50px;
                    height: 44px;
                }
            }

            .swiper {
                .swiper-wrapper {
                    gap: 80px;
                }

                .swiper-slide {
                    width: 100% !important;
                    margin: 0 auto;

                    .testimonalis_card {
                        padding: 20px;
                        border-radius: 20px;

                        .qute_info {
                            gap: 1.5rem;

                            .quote_icon {
                                align-self: flex-end;
                                font-size: 100px;
                            }
                        }

                        .pra p {
                            font-size: 1rem;
                        }
                    }
                }
            }
        }
    }

    /*=============== DISCUSS ===============*/
    .discuss {
        padding-block: 6rem;

        .discuss_container {
            gap: 2.5rem;

            h2 {
                width: 100%;
                max-width: 680px;
                font-size: 2.4rem;
            }

            form {
                max-width: 720px;

                .input {
                    height: 76px;
                    padding: 8px;
                    flex-direction: row;
                    flex-wrap: nowrap;

                    .mail {
                        width: 65px;
                        height: 52px;

                        i {
                            font-size: 28px;
                        }
                    }

                    input {
                        padding: 16px;
                        font-size: 1rem;
                    }

                    button {
                        width: 110px;
                        height: 56px;
                        font-size: 0.98rem;
                    }
                }

                .ratting {
                    padding-inline: 1.8rem;
                    justify-content: center;
                    flex-wrap: wrap;
                    gap: 1.5rem;

                    span {
                        font-size: 0.95rem;
                    }
                }
            }
        }
    }

    /*=============== BANNAR ===============*/
    .bannar {
        height: 130px;
        border-radius: 18px 0 18px 0;

        .bannar_container {
            .marquee {
                height: 54px;
                transform: rotate(-3deg);

                .marquee_track {
                    gap: 40px;
                    animation: scroll 13s linear infinite;

                    span {
                        font-size: 1.7rem;

                        i {
                            right: -25px;
                            font-size: 17px;
                        }
                    }
                }
            }
        }
    }

    /*=============== BLOG ===============*/
    .blog {
        padding-bottom: 4.5rem;

        .blog_container {
            gap: 35px;

            .section_header {
                gap: 1.5rem;

                h2 {
                    width: 100%;
                    font-size: 2rem;
                }

                a {
                    width: 140px;
                    height: 58px;
                }
            }

            .blog_content {
                justify-content: center;
                gap: 30px;

                .blog_card {
                    width: 48%;
                    max-width: 420px;

                    .img {
                        width: 100%;
                        height: auto;
                        aspect-ratio: 416 / 432;
                        clip-path: path('M 30 0 L 386 0 Q 416 0 416 28 L 416 295 Q 416 323 386 323 L 340 323 Q 305 323 305 353 L 305 390 Q 305 423 270 423 L 30 423 Q 0 423 0 390 L 0 28 Q 0 0 30 0 Z');
                    }

                    .arrow {
                        width: 85px;
                        height: 85px;
                        bottom: 33%;
                        right: 1px;
                    }

                    .blog_text {
                        .serv {
                            width: 170px;
                            height: 48px;
                        }

                        .date {
                            gap: 25px;
                        }

                        h3 {
                            font-size: 1.25rem;
                        }
                    }
                }
            }
        }
    }

    /*=============== FOOTER ===============*/
    footer {
        padding: 3rem 0 1rem;

        .footer_container {
            .footer_header {
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;

                h2 {
                    font-size: 2.4rem;
                }

                .btn-footer {
                    width: 180px;
                    height: 55px;
                    font-size: 22px;
                }
            }

            .footer_menu {
                flex-direction: column;
                gap: 4rem;
                padding: 3rem 0;
                border-top: 1.5px solid #97CFFF;
                border-bottom: 1.5px solid #97CFFF;

                .footer_social {
                    max-width: 100%;
                    align-items: center;
                    text-align: center;

                    p {
                        text-align: center;
                    }

                    .social {
                        justify-content: center;
                    }
                }

                .footer_links {
                    align-items: center;
                    text-align: center;

                    h3,
                    h4 {
                        text-align: center;
                    }

                    ul {
                        align-items: center;
                    }

                    form {
                        .input {
                            width: 320px;
                            height: 50px;
                        }
                    }
                }

                .contact {
                    h3 {
                        margin-top: 15px;
                        order: 3;
                    }

                    form {
                        order: 4;
                    }

                    h4 {
                        order: 1;
                    }

                    ul {
                        order: 2;
                    }
                }
            }

            .footer_copy {
                flex-direction: column;
                gap: 1.2rem;
                text-align: center;

                .page_links {
                    flex-wrap: wrap;
                    justify-content: center;
                }
            }
        }
    }
}

@media (max-width: 768px) {

    /*=============== HOME ===============*/
    .section {
        padding-block: 3rem 2rem;
    }

    .featured-box {
        padding: 11rem 0 0rem 0;

        .featured-box_container {
            flex-direction: column;

            .featured-box_text {
                text-align: center;
                gap: 1rem;

                .span {
                    width: 88px;
                    height: 38px;
                    font-size: 0.9rem;
                }

                h1 {
                    font-size: 2.4rem;

                    &::before {
                        bottom: -35px;
                        left: -45px;
                        width: 44.890112px;
                        height: 47.504301px;
                    }
                }
            }

            .featured-box_img {
                margin-top: -2rem;

                .img {
                    max-width: 320px;
                    height: auto;
                    margin-bottom: -5px;
                }

                .wind {
                    width: 120px;
                    height: 85px;
                    top: 30%;
                    left: -25%;
                }

                .plan {
                    width: 180px;
                    height: 160px;
                    top: 30%;
                    right: -40%;
                    z-index: 0;
                }

                &::after {
                    width: 385px;
                    height: 460px;
                    bottom: -35%;
                }
            }

            .pra {
                width: 100%;
                max-width: 160px;
                gap: 12px;

                i {
                    font-size: 30px;
                }

                p {
                    font-size: .8rem;
                }
            }

            .experince {

                .stars i {
                    font-size: 18px;
                }

                h2 {
                    font-size: 1.3rem;
                }

                span {
                    font-size: 1rem;
                }
            }

            .btns {
                margin: 3rem auto 0;
                width: fit-content;
                padding: 12px 20px;
                gap: 12px;

                .btn {
                    width: 180px;
                    height: 52px;
                    font-size: 20px;
                }

                .btn-secondary {
                    width: 110px;
                    height: 44px;
                    font-size: 20px;
                }
            }
        }
    }

    /*=============== SERVICES ===============*/
    .services {
        border-radius: 30px;
        background-position: center 30%;
        padding-inline: 0;

        .services_container {
            gap: 3.5rem;
            padding: 3rem 1.5rem;

            .section_header {
                text-align: center;

                h2 {
                    font-size: 1.9rem;
                    text-align: center;
                }

                p {
                    text-align: center;
                }
            }

            .swiper {
                padding-bottom: 4rem;

                .swiper-wrapper {
                    gap: 20px;


                    .swiper-slide {
                        width: 100% !important;
                        height: 420px !important;
                        max-width: 380px;
                        margin: 0 auto;

                        .service_card {
                            clip-path: path('M 25 0 L 355 0 Q 380 0 380 25 L 380 290 Q 380 315 355 315 L 320 315 Q 290 315 290 345 L 290 385 Q 290 420 255 420 L 25 420 Q 0 420 0 385 L 0 25 Q 0 0 25 0 Z');

                            .header_card {
                                padding: 1.5rem 1.2rem 0.8rem;

                                h3 {
                                    font-size: 1.3rem;
                                }
                            }

                            .img {
                                height: 280px;

                                &::before {
                                    width: 340px;
                                    top: -15px;
                                }

                                &::after {
                                    width: 300px;
                                    top: -30px;
                                }
                            }
                        }

                        .arrow {
                            width: 80px;
                            height: 80px;
                            bottom: 20px;
                            right: 5px;

                            i {
                                font-size: 25px;
                            }
                        }
                    }

                    .swiper-pagination-bullet {
                        width: 12px;
                        height: 12px;
                    }

                    .swiper-pagination-bullet-active {
                        width: 48px;
                    }
                }
            }

            &::after {
                display: none;
                /* الـ wind 2 مش هيبان حلو على الموبايل */
            }
        }

        &::before {
            width: 280px;
            height: 300px;
            top: 0%;
        }

        &::after {
            width: 100%;
            height: 400px;
            right: 0;
            bottom: -10%;
            opacity: 0.7;
        }
    }

    /*=============== EXPERINCE ===============*/
    .experience {
        padding-bottom: 8rem;
        height: 110vh;

        .experience_container {
            height: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 65px;

            .section_header {
                h2 {
                    font-size: 1.9rem;
                    text-align: center;
                }
            }

            .experience_content {
                width: 100%;
                height: 100%;
                margin-top: 2.5rem;

                .timeline {
                    position: relative;
                    flex-direction: column;
                    gap: 3rem;
                    padding: 0 1rem;
                    height: 100%;

                    .timeline_item {
                        position: relative;
                        width: 185px;

                        .timeline_left {
                            position: absolute;
                            align-items: start;
                            text-align: start;
                            gap: 8px;
                            width: fit-content;

                            h4 {
                                font-size: 1.25rem;
                            }

                            span,
                            p {
                                font-size: 0.95rem;
                            }

                            p {
                                width: 100%;
                                max-width: 420px;
                            }

                        }

                        &:nth-child(1) {
                            top: -12%;
                            right: 22%;

                            .timeline_right {
                                display: none;
                            }
                        }


                        &:nth-child(2) {
                            top: -23%;
                            right: -22%;

                            .timeline_right {
                                display: none;
                            }
                        }

                        &:nth-child(3) {
                            top: -39%;
                            right: 22%;

                            .timeline_right {
                                position: absolute;
                                bottom: -220px;
                                left: 71%;
                            }
                        }


                    }

                    .timeline_dote {
                        height: fit-content;
                        gap: 6rem;
                        bottom: -8px;

                        span {
                            position: relative;
                            width: 40px;
                            height: 40px;

                            &::after {
                                height: 85px;
                                top: 46px;
                                right: 19px;
                            }


                            &.active {
                                background-color: var(--primary-1);

                                &::after {
                                    width: 45px;
                                    height: 45px;
                                    inset: -4px;
                                }
                            }
                        }

                        .dote_mobile {
                            display: flex;
                        }
                    }
                }
            }
        }
    }

    /*=============== HIRE ME ===============*/
    .hire_me {
        border-radius: 30px;

        .hire_me_container {
            padding: 3rem 1.5rem;
            gap: 3.5rem;

            .hire_me_img {
                width: 100%;
                max-width: 360px;
                height: 520px;

                &::after {
                    width: 425px;
                    height: 450px;
                    top: 57%;
                    border-radius: 80px;
                }
            }

            .hire_me_text {
                gap: 1.8rem;

                h2 {
                    font-size: 2.1rem;
                }

                p {
                    font-size: 1rem;
                }

                .achivement {
                    gap: 2.5rem;
                    align-items: center;

                    .achivement_item {
                        align-items: center;
                        text-align: center;

                        h3 {
                            font-size: 2.2rem;
                        }

                        span {
                            font-size: 0.95rem;
                        }
                    }
                }

                .btn_hire_me {
                    width: 100%;
                    max-width: 280px;
                    height: 65px;
                    font-size: 1.1rem;
                }
            }
        }
    }

    /*=============== PORTFOLIO ===============*/
    .portfolio {
        padding-inline: 1rem;

        .portfolio_container {
            gap: 30px;
            padding: 0 1rem;

            .portfolio_header {
                h2 {
                    font-size: 2.1rem;
                }

                a {
                    width: 130px;
                    height: 52px;
                    font-size: 0.95rem;
                }
            }

            .swiper {
                padding-bottom: 3.5rem;

                .swiper-slide {
                    height: 300px !important;
                    max-width: 100% !important;

                    .portfolio_card {
                        border-radius: 16px;

                        .header_card {
                            left: 8px;
                            bottom: 8px;

                            h3 {
                                font-size: 48px;
                            }
                        }

                        &::after {
                            border-radius: 18px;
                        }
                    }

                    .arrow {
                        width: 52px;
                        height: 52px;
                        top: 8px;
                        right: 8px;

                        i {
                            font-size: 24px;
                        }
                    }
                }

                .swiper-pagination-bullet {
                    width: 12px;
                    height: 12px;
                }

                .swiper-pagination-bullet-active {
                    width: 48px;
                }
            }

            .buttons {
                gap: 12px;

                button {
                    padding: 14px 20px;
                    font-size: 1rem;
                }
            }

            .link {
                gap: 18px;

                h4 {
                    font-size: 1.6rem;
                    gap: 12px;

                    a {
                        width: 50px;
                        height: 50px;

                        i {
                            font-size: 30px;
                        }
                    }
                }

                p {
                    font-size: 0.95rem;
                }
            }
        }
    }

    /*=============== TESTIMONIALS ===============*/
    .testimonalis {
        padding-top: 4rem;
        padding-bottom: 6rem;
        border-radius: 30px;

        .testimonalis_container {
            gap: 60px;

            .section_header {
                gap: 0.8rem;

                h2 {
                    font-size: 1.9rem;
                }

                p {
                    font-size: 0.98rem;
                }

                &::before {
                    left: 30px;
                    width: 28px;
                    height: 24px;
                }

                &::after {
                    right: 60px;
                    bottom: 80px;
                    width: 40px;
                    height: 36px;
                }
            }

            .swiper {
                .swiper-wrapper {
                    gap: 30px;


                    .swiper-slide {
                        width: 85% !important;

                        .testimonalis_card {
                            padding: 18px 15px;
                            border-radius: 18px;

                            .qute_info {
                                .client_info {
                                    .clint_img {
                                        img {
                                            width: 48px;
                                            height: 48px;
                                        }

                                        .client_text {
                                            h3 {
                                                font-size: 20px;
                                            }

                                            span {
                                                font-size: 16px;
                                            }
                                        }
                                    }

                                    .stars {
                                        .star i {
                                            font-size: 26px;
                                        }

                                        span {
                                            font-size: 22px;
                                        }
                                    }
                                }

                                .quote_icon {
                                    font-size: 90px;
                                }
                            }

                            .pra {
                                margin-top: 15px;

                                p {
                                    font-size: 0.98rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /*=============== DISCUSS ===============*/
    .discuss {
        padding-block: 5rem 4rem;

        .discuss_container {
            gap: 2.2rem;
            padding: 0 1.5rem;

            h2 {
                font-size: 2.1rem;
            }

            form {
                max-width: 100%;

                .input {

                    .mail {

                        i {
                            font-size: 26px;
                        }
                    }

                    input {
                        width: 100%;
                        height: 58px;
                        padding: 0 20px;
                        font-size: 1rem;
                        border-radius: 50px;
                    }

                    button {
                        width: 30%;
                        height: 58px;
                        font-size: 1.05rem;
                    }
                }

                .ratting {
                    gap: 1rem;
                    padding-inline: 0;
                    text-align: center;

                    span {
                        font-size: 0.95rem;
                        justify-content: center;
                    }
                }
            }
        }
    }

    /*=============== BANNAR ===============*/
    .bannar {
        height: 110px;
        border-radius: 16px 0 16px 0;

        .bannar_container {
            .marquee {
                height: 48px;
                transform: rotate(-2.5deg);

                .marquee_track {
                    gap: 35px;
                    animation: scroll 12s linear infinite;

                    span {
                        font-size: 1.5rem;

                        i {
                            right: -22px;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }

    /*=============== BLOG ===============*/
    .blog {
        padding-inline: 1rem;
        padding-bottom: 4rem;

        .blog_container {
            gap: 30px;
            padding: 0 1.5rem;

            .section_header {
                h2 {
                    font-size: 1.9rem;
                }

                a {
                    width: 130px;
                    height: 55px;
                    font-size: 0.95rem;
                }
            }

            .blog_content {
                flex-direction: column;
                align-items: center;
                gap: 40px;

                .blog_card {
                    width: 100%;
                    max-width: 480px;

                    .img {
                        width: 100%;
                        height: auto;
                        aspect-ratio: 1 / 1.04;
                        clip-path: path('M 25 0 L 391 0 Q 416 0 416 25 L 416 300 Q 416 325 391 325 L 345 325 Q 310 325 310 355 L 310 390 Q 310 425 275 425 L 25 425 Q 0 425 0 390 L 0 25 Q 0 0 25 0 Z');
                    }

                    .arrow {
                        width: 80px;
                        height: 80px;
                        bottom: 38%;
                        right: 85px;
                    }

                    .blog_text {
                        gap: 25px;

                        .serv {
                            width: 160px;
                            height: 46px;
                            font-size: 0.95rem;
                        }

                        .date {
                            gap: 20px;
                            flex-wrap: wrap;

                            span {
                                font-size: 0.95rem;
                            }
                        }

                        h3 {
                            font-size: 1.2rem;
                        }
                    }
                }
            }
        }
    }

    /*=============== FOOTER ===============*/
    footer {
        padding: 2.5rem 0 1rem;

        .footer_container {
            .footer_header {
                h2 {
                    font-size: 2.1rem;
                    text-align: center;
                    width: 100%;
                }

                .btn-footer {
                    width: 100%;
                    max-width: 260px;
                    margin: 0 auto;
                    font-size: 20px;
                }
            }

            .footer_menu {
                padding: 2.5rem 0;
                gap: 3.5rem;

                .footer_social {
                    .img img {
                        width: 120px;
                        height: 40px;
                    }

                    p {
                        font-size: 0.98rem;
                    }

                    .social a {
                        font-size: 20px;
                    }
                }

                .footer_links {
                    h3 {
                        margin-bottom: 1.4rem;
                    }

                    h4 {
                        margin: 25px 0 18px 0;
                    }

                    ul {
                        gap: 18px;
                    }

                    form {
                        .input {
                            width: 100%;
                            max-width: 340px;
                            height: 48px;
                        }

                        input {
                            width: calc(100% - 50px);
                        }
                    }
                }
            }

            .footer_copy {
                padding: 8px 0;
                font-size: 0.95rem;

                a img {
                    width: 160px;
                    height: auto;
                }

                .page_links a {
                    font-size: 0.95rem;
                }
            }
        }
    }
}

@media (max-width: 576px) {
    .nav {
        height: 63px;
    }

    .nav_toggle {
        width: 27px;

        span {
            height: 3px;
            width: 70%;
        }
    }

    .nav_menu{
        right: -130%;
    }

    .show-menu {
        right: -20px;
    }

    .nav_link_mobile {
        width: 106px;
        height: 42px;
        font-size: var(--normal-font-size);
    }

    .nav_logo img {
        width: 113px;
        height: 32.89873504638672px;
    }

    .nav_menu {
        width: 100vw;
    }

    /*=============== HOME ===============*/
    .section {
        padding-block: 2.5rem 1.5rem;
    }

    .featured-box {
        padding: 11rem 0 0 0;

        .featured-box_container {
            .featured-box_text {
                gap: 10px;

                .span {
                    width: 103px;
                    height: 45px;
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-medium);
                }

                h1 {
                    font-size: 35px;

                    &::before {
                        bottom: -25px;
                        left: -29px;
                        width: 30.890112px;
                        height: 30.504301px;
                    }
                }
            }

            .featured-box_img {
                .img {
                    max-width: 320px;
                }

                &::after {
                    width: 344px;
                    height: 476px;
                    bottom: -42%;
                }

                .wind {
                    width: 56.365553844914935px;
                    height: 37.337584810213194px;
                    top: 33%;
                    left: 0%;
                }

                .plan {
                    width: 78.99835666126035px;
                    height: 55.733171240522964px;
                    top: 27%;
                    right: 8%;
                    transform: rotate(-10deg);
                }
            }

            .pra {
                gap: 11px;
                max-width: 160px;
                z-index: 1;
                top: 55%;
                left: 24%;

                i {
                    font-size: 15px;
                }

                p {
                    font-size: 10px;
                }
            }

            .experince {
                z-index: 1;
                top: 55%;
                right: -4%;

                h2 {
                    font-size: 17.3px;
                }

                span {
                    font-size: 7.36px;
                }

                .stars i {
                    font-size: 11px;
                }
            }

            .btns {
                padding: 10px;
                gap: 10px;

                .btn {
                    width: 142px;
                    height: 50px;
                    font-size: 18px;
                }

                .btn-secondary {
                    width: 145px;
                    height: 50px;
                    font-size: 18px;
                }
            }
        }
    }

    /*=============== SERVICES ===============*/
    .services {
        border-radius: 20px 20px 0 0;

        &::before {
            width: 432.334px;
            height: 441.9066px;
        }

        &::after {
            display: none;
        }

        .services_container {
            padding: 2.5rem 10px;
            gap: 65px;

            .section_header {
                gap: 12px;

                h2 {
                    font-size: 36px;
                }

                p {
                    font-size: 14px;
                }
            }

            .swiper {
                padding-bottom: 3.5rem;

                .swiper-wrapper {
                    gap: 0;

                    .swiper-slide {
                        max-width: 100% !important;
                        height: 400px !important;

                        .service_card {
                            clip-path: path('M 20 0 L 320 0 Q 340 0 340 20 L 340 260 Q 340 280 320 280 L 290 280 Q 260 280 260 310 L 260 350 Q 260 380 225 380 L 20 380 Q 0 380 0 350 L 0 20 Q 0 0 20 0 Z');

                            .header_card {
                                padding: 1.4rem 1rem 0.7rem;

                                h3 {
                                    font-size: 1.25rem;
                                }
                            }

                            .img {
                                height: 260px;

                                &::before {
                                    width: 300px;
                                    top: -12px;
                                }

                                &::after {
                                    width: 265px;
                                    top: -25px;
                                }
                            }
                        }

                        .arrow {
                            width: 70px;
                            height: 70px;
                            bottom: 40px;
                            right: 20px;

                            i {
                                font-size: 22px;
                            }
                        }
                    }

                    .swiper-pagination-bullet {
                        width: 11px;
                        height: 11px;
                    }

                    .swiper-pagination-bullet-active {
                        width: 44px;
                    }
                }
            }
        }

        &::after {
            height: 350px;
            bottom: -8%;
        }
    }

    /*=============== EXPERINCE ===============*/
    .experience {
        padding-inline: 1rem;
        padding-bottom: 8rem;
        height: 110vh;

        .experience_container {

            .section_header {
                h2 {
                    font-size: 2rem;
                    width: 100%;
                }
            }

            .experience_content {

                .timeline {

                    .timeline_item {
                        width: 175px;

                        .timeline_left {
                            gap: 8px;

                            h4 {
                                font-size: var(--normal-font-size);
                            }

                            span,
                            p {
                                font-size: 12px;
                            }

                            p {
                                width: 100%;
                                max-width: 190px;
                            }

                        }

                        &:nth-child(1) {
                            top: -17%;
                            right: 19%;
                        }


                        &:nth-child(2) {
                            top: -40%;
                            right: -31%;
                        }

                        &:nth-child(3) {
                            top: -47%;
                            right: 28%;

                            .timeline_right {
                                bottom: -300px;
                                left: 52%;
                            }
                        }


                    }

                    .timeline_dote {
                        height: fit-content;
                        gap: 9rem;
                        bottom: -8px;

                        span {
                            position: relative;
                            width: 40px;
                            height: 40px;

                            &::after {
                                height: 130px;
                                top: 46px;
                                right: 19px;
                            }


                            &.active {
                                background-color: var(--primary-1);

                                &::after {
                                    width: 45px;
                                    height: 45px;
                                    inset: -4px;
                                }
                            }
                        }

                        .dote_mobile {
                            display: flex;
                        }
                    }
                }
            }
        }
    }

    /*=============== HIRE ME ===============*/
    .hire_me {
        padding-inline: 1rem;
        border-radius: 20px 20px 0 0;

        .hire_me_container {
            padding: 2.5rem 1rem;
            gap: 3rem;

            .hire_me_img {
                max-width: 320px;
                height: 460px;

                &::after {
                    width: 335px;
                    height: 375px;
                    top: 60%;
                    border-radius: 89.64px;
                }
            }

            .hire_me_text {
                gap: 1rem;
                margin-bottom: 30px;

                h2 {
                    font-size: 2rem;
                }

                p {
                    font-size: 18px;
                }

                .achivement {
                    flex-wrap: nowrap;

                    .achivement_item {
                        h3 {
                            font-size: 2rem;
                        }

                        span {
                            font-size: var(--normal-font-size);
                        }
                    }
                }

                .btn_hire_me {
                    margin-top: 30px;
                    height: 60px;
                    font-size: 2rem;
                }
            }
        }
    }

    /*=============== PORTFOLIO ===============*/
    .portfolio {
        padding-block: 5rem;
        padding-inline: 16px;

        .portfolio_container {
            padding: 0;
            gap: 25px;

            .portfolio_header {
                margin-bottom: 3rem;
                flex-direction: column;
                align-items: center;
                text-align: center;

                h2 {
                    font-size: 26px;
                    width: 100%;
                }

                a {
                    width: 100%;
                    height: 45px;
                    font-size: 18px;
                }
            }

            .swiper {
                padding-bottom: 3rem;

                .swiper-wrapper {
                    gap: 0;

                    .swiper-slide {
                        height: 340px !important;

                        .portfolio_card {
                            .header_card {
                                h3 {
                                    font-size: 50px;
                                }
                            }
                        }

                        .arrow {
                            width: 48px;
                            height: 48px;

                            i {
                                font-size: 22px;
                            }
                        }
                    }

                    .swiper-pagination-bullet {
                        width: 11px;
                        height: 11px;
                    }

                    .swiper-pagination-bullet-active {
                        width: 44px;
                    }
                }
            }

            .buttons {
                button {
                    padding: 12px 18px;
                    font-size: 0.95rem;
                }
            }

            .link {
                gap: 16px;
                margin-top: 2rem;

                h4 {
                    font-size: 22px;

                    a {
                        width: 38px;
                        height: 38px;

                        i {
                            font-size: 20px;
                        }
                    }
                }

                p {
                    font-size: 14px;
                }
            }
        }
    }

    /*=============== TESTIMONIALS ===============*/
    .testimonalis {
        padding-top: 6rem;
        padding-bottom: 7rem;
        border-radius: 25px;
        overflow: hidden;

        .testimonalis_container {
            gap: 70px;

            .section_header {
                width: 350px;

                h2 {
                    font-size: 2rem;

                    &::after {
                        right: 10px;
                    }
                }

                p {
                    font-size: 12px;
                }

                &::before {
                    bottom: -40px;
                    left: 50%;
                }

                &::after {
                    width: 39.25496227765044px;
                    height: 38.959746675800346px;
                    right: 90%;
                    bottom: 160px;
                }
            }

            .swiper {
                .swiper-wrapper {
                    .swiper-slide {
                        .testimonalis_card {
                            padding: 16px 12px;
                            border-radius: 16px;

                            .qute_info {
                                .client_info {
                                    gap: 12px;

                                    .clint_img {
                                        gap: 5px;

                                        img {
                                            width: 32px;
                                            height: 32px;
                                        }

                                        .client_text {
                                            h3 {
                                                font-size: 14px;
                                            }

                                            span {
                                                font-size: 10px;
                                            }
                                        }
                                    }

                                    .stars {
                                        .star i {
                                            font-size: 15px;
                                        }

                                        span {
                                            font-size: 12px;
                                        }
                                    }
                                }

                                .quote_icon {
                                    font-size: 50px;
                                }
                            }

                            .pra {
                                margin-top: 18px;

                                p {
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /*=============== DISCUSS ===============*/
    .discuss {
        padding-block: 4rem 3.5rem;

        .discuss_container {
            gap: 2rem;
            padding: 0 1rem;

            h2 {
                font-size: 26px;
            }

            form {
                .input {
                    padding: 10px 10px;
                    width: 100%;
                    gap: 10px;

                    .mail {
                        width: 50px;
                        height: 50px;

                        i {
                            font-size: 30px;
                        }
                    }

                    input {
                        height: 50px;
                        font-size: 13;
                        padding: 0 16px;
                    }

                    button {
                        width: 106px;
                        height: 50px;
                        font-size: var(--normal-font-size);
                    }
                }

                .ratting {
                    span {
                        font-size: 12px;
                    }
                }
            }
        }
    }

    /*=============== BANNAR ===============*/
    .bannar {
        height: 72px;
        border-radius: 10px 0 10px 0;

        .bannar_container {
            .marquee {
                height: 25px;
                transform: rotate(-2deg);

                .marquee_track {
                    gap: 30px;
                    animation: scroll 11s linear infinite;

                    span {
                        font-size: 1.3rem;

                        i {
                            right: -20px;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }

    /*=============== BLOG ===============*/
    .blog {
        padding-bottom: 3.5rem;

        .blog_container {
            gap: 48px;
            padding: 0 1rem;

            .section_header {
                flex-direction: column;
                align-items: center;
                text-align: center;

                h2 {
                    font-size: 26px;
                }

                a {
                    width: 100%;
                    height: 45px;
                    font-size: var(--normal-font-size);
                }
            }

            .blog_content {
                gap: 35px;

                .blog_card {
                    gap: 35px;

                    .img {
                        border-radius: 24px;
                        clip-path: path('M 15 0 L 293 0 Q 308 0 308 15 L 308 185 Q 308 220 280 220 L 225 220 Q 185 220 185 255 L 185 295 Q 185 320 160 320 L 15 320 Q 0 320 0 295 L 0 15 Q 0 0 15 0 Z ');
                    }

                    .arrow {
                        width: 101.4754180908204px;
                        height: 101.4754180908204px;
                        bottom: 41%;
                        right: 12px;

                        i {
                            font-size: 36px;
                        }
                    }

                    .blog_text {
                        gap: 30px;

                        .serv {
                            width: 191px;
                            height: 53px;
                            font-size: var(--normal-font-size);
                        }

                        .date {
                            gap: 25px;

                            span {
                                font-size: var(--normal-font-size);

                                i {
                                    font-size: 13px;
                                }
                            }
                        }

                        h3 {
                            font-size: 28px;
                        }
                    }
                }
            }
        }
    }

    /*=============== FOOTER ===============*/
    footer {
        padding: 2rem 0 0.8rem;

        .footer_container {
            .footer_header {
                h2 {
                    font-size: 1.8rem;
                }

                .btn-footer {
                    height: 52px;
                    font-size: 18px;
                }
            }

            .footer_menu {
                padding: 2rem 0;
                gap: 3rem;

                .footer_social {
                    .img img {
                        width: 110px;
                        height: 36px;
                    }

                    p {
                        font-size: 0.95rem;
                    }

                    .social {
                        gap: 0.8rem;

                        a {
                            font-size: 18px;
                        }
                    }
                }

                .footer_links {
                    h3 {
                        font-size: 1rem;
                        margin-bottom: 1.2rem;
                    }

                    h4 {
                        font-size: 1rem;
                        margin: 20px 0 15px 0;
                    }

                    ul {
                        gap: 16px;

                        a {
                            font-size: 0.95rem;
                        }
                    }

                    form {
                        .input {
                            height: 46px;
                        }

                        input {
                            font-size: 0.95rem;
                            padding: 8px;
                        }

                        button {
                            width: 46px;
                        }
                    }
                }
            }

            .footer_copy {

                span,
                .page_links a {
                    font-size: 0.9rem;
                }

                a img {
                    width: 140px;
                }
            }
        }
    }
}