:root {
    --purple: #632863;
}

/* hero section */
.img-wrapper { height: 60vw; }

.sec-02-img-content {
    color: var(--purple);
    position: relative;
    padding: 0 7vw;
}

.sec-02-img-content article {
    position: absolute;
    background-color: #F0E9ED;
    top: 50%;
    right: 15vw;
    transform: translateY(-50%);
    max-width: 500px;

}

.sec-02-img-content article .line {
    width: 240px;
    height: 2px;
    background-color: #EBBF77;
}

.sec-02-img-content article div {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.sec-02-img-content article div::after {
    content: "";
    width: 40px;
    aspect-ratio: 1;
    background-image: url("sec-02-star.png");
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 18px;
}

.sec-02-img-content p { font-size: var(--para-02);}

.sec-03-main {
    position: relative;
    color: white;
    padding: 0 4vw;
}

.sec-03-main>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 15px 5vw;
    border-radius: 15px;
    position:relative;
    z-index: 1;
}

img[alt="angel-health-logo"] { width: 40vw;}

.sec-03-main>div p { align-self: flex-end; }

.sec-03-main>div:nth-child(1) { background-color: #EBBF77;}

.sec-03-main>div:nth-child(2) {
    background-color: var(--purple);
    top:-20px;
    z-index:2;
}

.sec-03-main>div:nth-child(3) {
    color: var(--purple);
    border: 1px solid black;
    top:-40px;
    padding-top: 26px; 
}

.sec-03-main>div article {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
}

.sec-03-main > div:nth-child(2) article {
    justify-content: center;
    text-align: left;
    gap:8vw;
    width:80%;
}


.sec-03-main > div:nth-child(2) article h2 {
      font-size: clamp(3rem, 6vw, 8rem);
}

.sec-03-main > div:nth-child(3) article {
    justify-content: space-evenly;
}


.sec-03-main > div:nth-child(3) article p {
    margin-top: 1rem;
}

.sec-04-main{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:24px;

}
.sec-04-main .img-container{
   width:100%;
   gap:24px;
}
.sec-04-main .column{
    height: 50vw;
    position:relative;

}

.sec-04-main .column img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}
.sec-05-main{
    display: flex;
    flex-direction: column;
}


.sec-05-main video,.sec-08 video{
    width:100%;
    aspect-ratio: 16 / 9;
}
.sec-06-main{
    min-height:50vw;
    display: flex;
}
.sec-06-main .sec-06-col{
    width:50%;
    display: flex;  
}

.sec-06-main .sec-06-col:nth-of-type(1){
     flex-direction: column;
}

.sec-06-main .sec-06-col:nth-of-type(1)  img{
    width:100%;
     height: 50%;
     margin-bottom:0;
     aspect-ratio: 16 / 9;
     object-fit: cover;
}

.sec-07 .img-container img{
   aspect-ratio: 16 / 9;
}

@media(max-width:1366px) {
    .sec-02-img-content article { right: 10vw; max-width: 500px;}
}

@media(max-width:1280px) {
 .sec-03-main > div:nth-child(3) article img { width: 10vw; }
}

@media(max-width:992px) {
    .sec-02-img-content article { right: 8vw; max-width: 400px;}

    .sec-03-main>div { padding-bottom:7vw; }
}

@media(max-width:768px) {
    .sec-02-img-content article .line { width: 180px;}

    .sec-02-img-content article { max-width: 310px;}

}

@media(max-width:767px) {

    .sec-02-img-content { background-color: #F0E9ED; padding: 0;}

    .sec-02-img-content article {
        position: static;
        transform: unset;
        padding: 20px 7vw;
        max-width: 550px;
    }

    .sec-04-main .img-container .column:nth-child(2){
          height: 100vw;
      }

.sec-06-main{ flex-direction: column; }
.sec-06-main .sec-06-col{ width:100%;}

}

@media(max-width:576px) {

    .sec-03-main>div { padding-bottom:14vw; }
    .sec-03-main > div:nth-child(3){
       padding-bottom:5vw;
    }

       .sec-03-main > div:nth-child(3) article {
        flex-direction: column;
        gap:20px;
    }
    .sec-03-main > div:nth-child(3) article img { width: 200px; }

     .sec-03-main > div:nth-child(2) article div{ width:180px;}
}

@media(max-width:480px) {
     .sec-03-main > div:nth-child(3) article img { width: 150px; }
}