/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
.section-intro{
    width: 100%;
    height: 100vh;
    background: #191919;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.intro-chair{
    height:980px;
    background: url("../img/intro/chirs.png") no-repeat;
    background-size: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.intro-logo{
    background: url("../img/intro/logo.png") no-repeat;
    height: 530px;
    width: 480px;
    position: relative;
    top: -90px;
    left: -5px;
    background-size: contain;
    overflow: hidden;
}
.intro-scroll{
    position: absolute;
    z-index: 999;
    top: 67%;
}
.wrapper-about {
    position: relative;
    overflow: hidden;
    box-shadow: 0 100px 100px -20px rgba(107, 141, 81, 0.25);
    border-bottom-right-radius:70px;
    border-bottom-left-radius:70px;
    margin-top: -250px;
}

.section-about{
    width: 100%;
    background: #324135 url('../img/intro/user.png') no-repeat center top / cover;
    height: 950px;
    -webkit-mask-image: linear-gradient(
        to top,
        rgba(0,0,0,1) 83%,
        rgba(0,0,0,0) 100%
    );
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: linear-gradient(
        to top,
        rgba(0,0,0,1) 67%,
        rgba(0,0,0,0) 86%
    );
    mask-repeat: no-repeat;
    mask-size: cover;
    border-bottom-right-radius:70px;
    border-bottom-left-radius:70px;
}
.about-content {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    color: #fff;
    top: 43%;
    right: 11%;
    width: 80%;
    min-height: 476px;
}

.about-content .box {
    flex: 1;
    max-width: 50%;
    overflow: hidden;
}
.about-content .box h1,.box h2,.box h3,.box h4{
    font-weight: bold;
    font-family: 'KalamehWebFaNum';
    font-size: 40px;
}
.about-content .box p{
    font-weight: 400;
    font-family: 'KalamehWebFaNum';
    font-size: 32px;
    text-align: justify;
    line-height: 100%;
}

/*--------------------------------------------------------------
# Project Section
--------------------------------------------------------------*/
.section-projects{
    padding: 40px 0 0 20px;
    background: linear-gradient(
        180deg,
        rgba(41, 41, 41, 0) 0%,
        #29302F 100%
    );
}

.btn-see-all-project{
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)
    ),
        linear-gradient(93.74deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.01) 85.62%,
        rgba(0, 0, 0, 0) 100%
    );
    box-shadow:
        25px 25px 200px 5px #00000059,
        inset 11px 11px 6px -10px #FFFFFF33;
    font-weight: normal;
    font-size: 28px;
    line-height: 40px;
    text-align: justify;
    vertical-align: middle;
    opacity: 1;
    border-radius: 45px;
    transition:
        background 0.4s ease,
        box-shadow 0.4s ease,
        transform 0.3s ease;
}
.btn-see-all-project:hover{
    background: #ffffff4d;
    box-shadow:
        25px 25px 200px 5px #00000059,
        0 0 100px 0 #ffffff26,
        inset 11px 11px 6px -10px #ffffff33;
    transform: translateY(-3px);
}
.btn-see-all-project:hover .circle-symbol{
    transform: scale(1.2);
}
.wrapper-see-all-project{
    margin-top: 5.5rem;
    clear: both;
}
.pos-see-all-project{
    margin-right: 10%;
}
.circle-symbol {
    height: 25px;
    width: 25px;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    margin: -3px 3px;
    transition: transform 0.3s ease;
}

.circle-symbol:hover {
    transform: scale(1.2);
}

/*--------------------------------------------------------------
# client Section
--------------------------------------------------------------*/

.section-client{
    width: 100%;
    background: linear-gradient(180deg, rgba(41, 41, 41, 0) 0%, #29302F 0%);
    padding: 40px 0;
}
.section-client .swiper{
    clear: both;
    margin-top: 30px;
    direction: rtl;
}
.swiper-wrapper{

}
.section-client .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


/*--------------------------------------------------------------
# work-us Section
--------------------------------------------------------------*/

.section-work-us{
    background: linear-gradient(
        to bottom,
        #292F2F 10%,
        #29302F 30%,
        #253231 50%,
        #233333 70%
    );
    height: 100vh;
}

.background-work-us{
    background-image: url("../img/portfolio/team-back.png");
    background-size: 100% 100%;
    height: 100vh;
}
.box-work-us{
    background: linear-gradient(
        305.85deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 255, 255, 0.0105) 5%,
        rgba(255, 255, 255, 0.21) 100%
    );
    box-shadow:
        30px 30px 200px 5px #00000059,
        inset 11px 11px 6px -10px #FFFFFF33;
    border-radius: 2.813rem;
}
.box-caption-work-us div{
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 3.5rem;
}

/*--------------------------------------------------------------
# team Section
--------------------------------------------------------------*/

.team .team-member .member-info {
    position: relative;
    border-radius:25px;
    text-align: right;
}

.team .team-member .member-img-one {
    border-radius: 8px;
    overflow: hidden;
    left: 20px;
    z-index: 25;
    position: relative;
}

.team .team-member .member-img-two {
    border-radius: 8px;
    overflow: hidden;
    left: 20px;
    z-index: 25;
    position: relative;
}
.h-200{
    height: 460px;
}
.h-500{
    height: 500px;
}
.m-25{
    margin-top: -25px !important;
}
.team .team-member .member-img-four {
    border-radius: 8px;
    overflow: hidden;
    left: 20px;
    z-index: 25;
    position: relative;
}
.team .team-member .member-img-five {
     border-radius: 8px;
     overflow: hidden;
     left: 20px;
     z-index: 25;
     position: relative;
 }
.team .team-member .social {
    position: absolute;
    left: 0;
    top: -18px;
    right: 0;
    opacity: 0;
    transition: ease-in-out 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.team .team-member .social a {
    color: var(--contrast-color);
    background: var(--accent-color);;
    margin: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: 0.3s;
}
.member-info{
    height: auto;
}
.section-swiper-slide{
    box-shadow: 11px 11px 6.4px -10px #FFFFFF33 inset !important;
}
#preloader{
    bottom: 0;
    position: absolute;
}
.trans-box{
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    background: #6f6e6e5e;
    height: auto;
}
.team .team-member .social a i {
    line-height: 0;
    font-size: 16px;
}
.team .team-member .social a:hover {
    background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}
.background-team{
    background-image: url("../img/portfolio/team-back.png");
    background-size: 100% 100%;
}
.team .team-member .social i {
    font-size: 18px;
    margin: 0 2px;
}
.f-26{
    font-size: 26px;
}
.team-member-tow{
    border-radius: 8px;

    left: 20px;
    z-index: 25;
    position: relative;
    width: 95%;
    margin-top: 100px;
}
.team .team-member .member-info h4 {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 20px;
}
.team .team-member .member-info p {
    font-style: italic;
    font-size: 14px;
    line-height: 26px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}
.team .team-member:hover .social {
    opacity: 1;
}
/*--------------------------------------------------------------
# coming soon Section
--------------------------------------------------------------*/
.fade-between {
    height: 80px;
    background: linear-gradient(
        to bottom,
        #29302F 4%,
        #29302F 0%
    );
}
.coming-soon{
    width: 100%;
    background: linear-gradient(
        180deg,
        #29302F 7%,
        rgba(16, 59, 58, 0.5) 53.38%,
        rgba(0, 73, 71, 0.025) 9.75%)
        #29302F 14%;
    padding: 40px 0;
}
.btn-coming-soon{
    background: #475150;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 1;
    padding: 40px 20px;
    gap: 10px;
    border-radius: 45px;
    background: linear-gradient(
        138.4deg,
        rgba(255, 255, 255, 0.2) 24.25%,
        rgba(0, 0, 0, 0) 51.75%);
    box-shadow: 25px 25px 200px 5px #00000059;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
}
.coming-soon .swiper-slide{
    border-radius: 25px !important;
}
.card-back {
    height: 500px;
    background-size: 100% 100%;
    border: snow;
    border-radius: 25px !important;
}
.body-back {
    position: relative;
    overflow: hidden;
    padding: 20px;
    color: #fff;
    border-bottom-left-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
}
.body-back::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), rgba(0,0,0,0.5) 70%);
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.body-back > * {
    z-index: 1;
}
.card-text-opacity {
    opacity: 0.9;
}
.coming-soon-content{
    text-align: center;
    height: 380px;
}
.coming-soon-title{
    font-weight: 700 !important;
    font-size: 24px !important;
    position: relative;
    text-align: right !important;
}
.coming-soon-content .card-text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.coming-soon-content:hover .card-text {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
}


.coming-soon-content .card-text p , .card-text{
    font-size: 18px !important;
    font-weight: 200 !important;
    text-align: right;
}
.goy{
    width: 25px;
    height: 25px;
    border: 1px solid;
    border-radius: 100%;
    background: #ffffff;
    bottom: 15px;
    position: absolute;
    left: 18px;
}

/*--------------------------------------------------------------
# coming soon Section
--------------------------------------------------------------*/
.section-info{
    background-image: url("../img/intro/bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
    padding-top: 20px;
    padding-bottom: 40px;
}
.section-info-text h1,
.section-info-text h2,
.section-info-text h3,
.section-info-text h4
{
    font-weight: 700;
    font-size: 40px;
}
.section-info-text{
    font-weight: 300;
    font-size: 24px;
    text-align: justify;
    direction: rtl;
    line-height: 140%;
}
.link-a{
    color: #ffffff !important;
    display: flex;
}
.btn-inf-section{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px 5px;
    direction: rtl;
    align-self: flex-start
}
.footer-wrapper{
    box-shadow: -3px -50px 100px 0 #1E3532;
    background:
        linear-gradient(
            to bottom,
            #1E3530 0%,
            #1C302D 10%,
            rgba(26, 43, 40) 25%,
            #192c29 30%
        );
}
.footer-wrapper footer{
    position: relative;
    bottom: -50px;
}