:root{
     --bck: #386C0B;
    --light-bck: #f16823;
    /* --Sup-light-bck: #55ff00; */
    /* --light-background: red; */
    --greys: #e3e3e3;
    --grays: #fefeff;
    --dark-bakground: #013f09;
    --reds: red;
    --shadow-large: 0px 4px 40px #33333359;
    --shadow-small: 0px 4px 6px #33333359;
}

.abt-h1{
    background: var(--light-background);
    padding: 12px;
    color: #fefeff;
}

img{
    width: 100%;
    height: auto;
}

.about-hero{
    width: 100%;
    height: 400px;
    background-image: url(Slide/open011.png);
    background-size: cover;
    background-position: top;
    position: relative;
}

.abt-content{
    position: absolute;
    width: 700px;
    background: rgba(255, 255, 255, 0.411);
    border-radius: 12px;
    padding: 1rem 2rem;
    bottom: 0px;
    left: 0px;
    /* box-shadow: 0px 4px 12px #33333359; */
}

.abt-content h1{
    font-size: 1.5rem;
}

/* our-story-short */
.our-story-short{
    width: 100%;
    position: relative;
    backdrop-filter: blur(24px);
    /* background: #021f04e8; */
}

/* .our-story-short::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 400px;
    height: inherit;
    background: var(--light-bck);
    z-index: -1;
} */

.our-story-short .img{
    width: 480px;
    height: 380px;
    flex-shrink: 0;
}

.our-story-short .img img{
    width: 100%;
    height: 100%;
    /* mask-image: url(masks/blob.png);
    mask-size: cover;
    mask-position: center; */
}

.st-h{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.bt-p{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ps{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    backdrop-filter: blur(24px);
}

/* wwa card */
.abt-mission{
    width: 100%;
    position: relative;
}

.abt-mission::before{
    content: "";
    inset: 0;
    /* background: var(--dark-bakground); */
    background: rgb(194, 192, 192);
    width: 100%;
    height: 200px;
    position: absolute;
    z-index: -1;
}
.wwa{
    width: 100%;
    display: flex;
    gap: 20px;
}

.wwa .wwa-img{
    width: 400px;
    height: 380px;
    box-shadow: var(--shadow-large);
    padding: 40px;
    gap: 20px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.wwa-img::before{
    content: "";
    inset: 0;
    background: white;
    width: 100%;
    height: 200px;
    position: absolute;
    z-index: -1;
}

.wwa-img h1{
    text-transform: capitalize;
}

.Ct-top{
    display: flex;
    flex-direction: column;
    color: var(--bck);
}

.Ct-top a{
    width: 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 24px;
    padding: 0.5rem 1rem;
    padding-bottom: 0.5rem;
    text-decoration: none;
    color: #181818;
    border: 2px solid #fff;
    margin-top: 30px;
}

/* card-foot */
.card-foot{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}

.Ct-foot{
    width: 100%;
    display: flex;
    gap: 40px;
}

.ctf-box{
    width: 200px;
    height: 200px;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    box-shadow: var(--shadow-small);
    overflow: hidden;
}

.ctf-box::before{
    content: "";
    position: absolute;
    background: #f16823;
    height: 100px;
    bottom: 0;
    left: 0px;
    top: 180px;
    right: -180px;
    transform: rotate(-45deg);
}


/* tmm-top */
.team-members-top{
    margin-bottom: 40px;
}

.tmm-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    box-shadow: var(--shadow-small);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.tmm-card::before{
    content: "";
    position: absolute;
    background: var(--light-bck);
    inset: 0;
    top: 180px;
    z-index: -1;
}

.team-cards{
    width: 100%;
    display: flex;
    gap: 20px;
}

.tmm-top{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
    /* padding-bottom: 2rem; */
}

.tmm-top .img{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    overflow: hidden;
}

.team-members a{
    margin-top: 2rem;
}

.tmm-card p{
   margin-bottom: 10px;
}
.tmm-card a{
    color: #fff;
    text-decoration: none;
}

/* partners */
.partners{
    width: 100%;
    height: 100vh;
}
.partners-top{
    margin-bottom: 50px;
}

.partner-slider{
    width: 100%;
    height: 400px;
    position: relative;
    overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-slider:hover .partner{
    animation-play-state: paused;
}

.partner{
    width: 400px;
    height: 200px;
    display: flex;
    gap: 20px;
    position: absolute;
    left: 100%;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.5s;
    animation: slide 30s linear infinite;
    box-shadow: var(--shadow-small);
}


@keyframes slide {
    to{
        left: -600px;
    }
}

.one{
    animation-delay: calc(30s / 4 * (4 - 1) * -1);
}
.two{
    animation-delay: calc(30s / 4 * (4 - 2) * -1);
}
.three{
    animation-delay: calc(30s / 4 * (4 - 3) * -1);
}
.four{
    animation-delay: calc(30s / 4 * (4 - 4) * -1);
}

.partner .img{
    width: 100%;
}

.partner .name{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.partner .name p{
    font-size: 0.85em;
    font-weight: 400;
    padding: 0.2rem;
    text-transform: capitalize;
}

.partner .name .name-foot{
    width: 100%;
    display: flex;
    justify-content: right;
}

.name-foot .fa-angle-right{
    background: orange;
    padding: 12px 24px;
    color: #fff;
    border-top-left-radius: 6px;
}

.partner-cta{
    width: 100%;
    height: 200px;
    margin-top: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-large);
    padding: 2rem 20vh;
    gap: 10px;
    position: relative;
}

.partner-cta::before{
    content: "";
    width: 330px;
    height: inherit;
    background: var(--light-bck);
    position: absolute;
    inset: 0;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.PCta-cont{
    width: 600px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: left;
    position: relative;
    backdrop-filter: blur(40px);
    background: #e3e3e32c;
    padding: 0.5rem;
}

.PCta-cont h1 span{
    color: #fff;
}

.PCta-cont h1{
    text-transform: capitalize;
    text-align: left;
}

.PCta-img{
    width: 300px;
    height: 260px;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: -15px;
    right: 20px;
    box-shadow: var(--shadow-small);
}

/* ways of working */
.ways-of-working{
    height: 100vh;
    gap: 50px;
}
.ww-top{
    width: 100%;
    gap: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ww-top img{
    width: 30%;
    height: 100%;
    object-fit: cover;
}

.fa-chess{
    font-size: 2rem;
    background: var(--greys);
    color: var(--reds);
    font-size: 2.5rem;
    padding: 2rem;
    border-radius: 100px;
}

.step-1{
    width: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.step-1 .number{
    padding: 6px 16px;
    color: #fff;
    background: var(--reds);
    border-radius: 100px;
    font-size: 1.7rem;
    font-weight: 500;
}

.ww-foot{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ww-foot-left{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}
.step-2{
    display: flex;
    align-items: center;
    gap: 10px;
}

.number-2{
    padding: 10px 22px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 100%;
    background: var(--reds);
    color: #fff;
}

.ans{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* abt-cta  */
.abt-cta-box {
    width: 100%;
    height: 180px;
    background: var(--light-bck);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow-large);
    color: #fff;
}

.abt-cta-box .btn{
    border: 2px solid #fff;
    background: #fff;
    color: var(--light-bck);
    transition: all 0.5s ease;
    box-shadow: var(--shadow-small);
}

.abt-cta-box .btn:hover{
    background: #33333359;
    color: #fff;
    box-shadow: var(--shadow-small);
    border: 2px solid #fefeff;
}