@import '../../root.css';

.s1 {
    padding: calc(var(--nav-h) - 30px) clamp(2.5rem, 0.875rem + 8.125vw, 10.625rem);
}

section {
    padding: 0 clamp(2.5rem, 0.875rem + 8.125vw, 10.625rem);
    overflow: hidden;
}

.s1>div {
    display: flex;
    gap: clamp(0.625rem, 0.125rem + 2.5vw, 3.125rem);
}

.s1-a1 {
    /* min-width:clamp(8.125rem, -0.875rem + 45vw, 53.125rem); */
    height: clamp(6.563rem, 3.438rem + 15.625vw, 22.188rem);
    overflow: hidden;
    border-radius: 20px;
}

.s1-a1 img {
    width: 100%;
    height: 100%;
    object-fit: 100% 100%;
}

.s1-a2 {
    width: clamp(8.125rem, -0.875rem + 45vw, 53.125rem);
    display: flex;
    align-items: center;
    /* width: clamp(9.375rem, 3.063rem + 31.563vw, 40.938rem); */
}

.s1-a2 p {
    font-size: clamp(0.25rem, 0.087rem + 0.813vw, 1.063rem);
}

.s1__container2 {
    display: flex;
    margin-top: 2rem;
    background-color: var(--primary-blue);
    justify-content: space-evenly;
    padding: 1% 5%;
}

.s1__container2>div {
    text-align: center;
    font-size: clamp(0.938rem, 0.525rem + 2.063vw, 3rem);
    font-weight: 700;
    color: var(--common-white);
    align-self: center;
}

.s1__container2>div p {
    font-size: clamp(0.375rem, 0.2rem + 0.875vw, 1.25rem);
    font-weight: var(--sm-font-w);
}

.s2>h1 {
    color: var(--primary-blue);
    font-size: clamp(1rem, 0.75rem + 1.25vw, 2.25rem);
    /* 36px clamp*/
    margin-bottom: 2%;
    font-weight: var(--lg-font-w);
    text-align: center;
}

.s2>p {
    font-size: clamp(0.25rem, 0.087rem + 0.813vw, 1.063rem);
    /* 20px clamp*/
    margin-bottom: 2%;
}

.s2__container1 {
    display: flex;
    gap: 20px;
}

.s2-a2,
.s2-a1 {
    width: 50%;
    align-self: end;
}

.s2-a1>div h1,
.s3>h1,
.s4>aside>h1 {
    font-size: clamp(1rem, 0.75rem + 1.25vw, 2.25rem);
    position: relative;
    margin-bottom: 2rem;
    font-weight: 500;
    /* margin-bottom: 10%; */
}

.s2-a1>div h1::before,
.s3>h1::before,
.s4>aside>h1::before {
    position: absolute;
    left: 0;
    top: 100%;
    content: ' ';
    height: clamp(0.375rem, 0.313rem + 0.313vw, 0.688rem);
    width: clamp(3.75rem, 3.05rem + 3.5vw, 7.25rem);
    border-radius: 10px;
    background-color: var(--primary-yellow);
    /* margin-bottom: 2%; */
}

.s2-a1>div h2,
.s2-a1>div p,
.s2-a1>div ul {
    font-size: clamp(0.25rem, 0.087rem + 0.813vw, 1.063rem);
}

.s2-a1>div h2 {
    font-weight: 700;
    padding: clamp(0.375rem, 0.263rem + 0.563vw, 0.938rem) clamp(1rem, 0.613rem + 1.938vw, 2.938rem);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 1rem;
}

.s2-a1>div p {
    font-weight: 400;
    margin-bottom: 1rem;
}

.s2-a1>div ul li {
    font-weight: 500;
    list-style: disc;
    margin-left: 3%;
}

.s2-a2>div {
    transform: scale(0.8);
    justify-self: end;
    position: relative;
    width: clamp(7.5rem, 2.375rem + 25.625vw, 33.125rem);
    height: clamp(7.813rem, 4.188rem + 18.125vw, 25.938rem);
    border: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem) solid var(--primary-blue);
}

.s2-a2>div img {
    width: 110%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: -20%
}

.s2-a2-left>div {
    justify-self: start;
    left: 15%
}

.s3>div {
    display: flex;
}

.s3>div .s3-a1 {
    width: 60%;
}

.s3>div .s3-a2 {
    width: 40%;
    position: relative;
}

.s3-a1>div {
    display: flex;
    padding: clamp(0.375rem, 0.263rem + 0.563vw, 0.938rem) 3%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 1rem;
}

.s3-inner-head {
    text-align: center;
    font-size: clamp(0.25rem, 0.087rem + 0.813vw, 1.063rem);
}

.s3-a1>div p {
    font-size: clamp(0.25rem, 0.087rem + 0.813vw, 1.063rem);
    font-weight: 400;
}

.s3-a1>div img {
    width: clamp(1.875rem, 0.375rem + 7.5vw, 9.375rem);
    height: clamp(1.688rem, 0.788rem + 4.5vw, 6.188rem);
}

.s3-a2>div {
    height: clamp(7.125rem, 2.175rem + 24.75vw, 31.875rem);
    align-self: flex-start;
    justify-self: end;
    text-align: right;
    position: relative;
}

.s3-a2>div img {
    height: 85%;
    width: 95%;
}

.s3-a2 i {
    background-image: url('./imageAndSvg/about/s3/CurvedArrow.png');
    position: absolute;
    background-size: cover;
    left: 0;
    top: 5%;
    z-index: 2;
    height: clamp(1.813rem, 0.875rem + 4.688vw, 6.5rem);
    width: clamp(2.375rem, 0.9rem + 7.375vw, 9.75rem);
    display: inline-block;
}

.s3-a2 span {
    position: absolute;
    border-radius: clamp(0.188rem, 0.1rem + 0.438vw, 0.625rem);
    height: 25%;
    width: 100%;
    display: inline-block;
    z-index: -1;
    background-color: var(--primary-blue);
    left: 0;
    top: 60%;
}

.s3-a2 span:nth-child(4) {
    background-color: transparent;
    border: clamp(0.188rem, 0.1rem + 0.438vw, 0.625rem) solid var(--primary-yellow);
    z-index: -2;
    top: 52%;
    left: -8%;
}

.s4 {
    text-align: center;
}

.s4>h1 {
    font-size: clamp(0.938rem, 0.525rem + 2.063vw, 3rem);
    font-weight: 800;
    padding: 0 12%;
}

.s4>button {
    font-size: clamp(0.625rem, 0.45rem + 0.875vw, 1.5rem);
    font-weight: 700;
    padding: 0 10%;
    color: var(--common-white);
    background-color: var(--primary-blue);
    border-radius: clamp(0.313rem, 0.25rem + 0.313vw, 0.625rem);
}

.s4>aside {
    border: clamp(0.188rem, 0.1rem + 0.438vw, 0.625rem) solid var(--primary-yellow);
    border-radius: clamp(0.188rem, 0.1rem + 0.438vw, 0.625rem);
    padding: clamp(0.563rem, 0.3rem + 1.313vw, 1.875rem);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.s4>aside>h1 {
    text-align: left;
}

.s4>aside>div img {
    width: clamp(3.688rem, 1.938rem + 8.75vw, 12.438rem);
    height: clamp(0.625rem, 0.313rem + 1.563vw, 2.188rem);
}

.s4>aside>div {
    display: flex;
    justify-content: space-around;

}