:root {
    --color-portfolio-01: #EC6523;
    --color-portfolio-02: #033380;
    --color-portfolio-03: #F6AE2D;

}

.sec-03-main {
    padding: 0 2vw;
    display: flex;
    gap: 30px;
}

.sec-03-main .column1 {
    background-color: var(--color-portfolio-01);
    width: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;

}

.sec-03-main .column2 {
    background-color: var(--color-portfolio-01);
    width: 45%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    position: relative;
    aspect-ratio: 1;
}

.sec-03-main .column1 img {
    aspect-ratio: 1;
    object-fit: contain;
}

.sec-03-main .column2 .box {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-portfolio-03);
}

.sec-03-main .column2 .box3 {
    z-index: 1;
}

.sec-03-main .column2 .box3 img {
    position: absolute;
    bottom: 2%;
    left: 10px;
     width:60%;
}

.sec-03-main .column2 .box2 {
    height: 80%;
    background-color: var(--color-portfolio-01);
    z-index: 2;
}

.sec-03-main .column2 .box2 img {
    position: absolute;
    bottom: 16%;
    left: 10px;
    width:60%;
}

.sec-03-main .column2 .box1 {
    height: 42%;
    background-color: var(--color-portfolio-02);
    z-index: 3;
}

.sec-03-main .column2 .box1 img {
    position: absolute;
    top: 12%;
    left: 10px;
     width:60%;
}

.sec-03-main .column2 .box1 span,
.sec-03-main .column2 .box2 span,
.sec-03-main .column2 .box3 span{
   position:absolute;
   bottom:1%;
   right:4%;
   font-size: clamp(1rem,2vw,1.3rem);
   color:white;
}

 .sec-05 {
    
      background: var(--color-portfolio-03);
      padding:2vw 0 0;
    }

   .sec-05  .scroll-border {
      width: 100%;
      /* height: 100vh; */
       /* Adjust to your image height */
       aspect-ratio: 16 / 9;
      background: url("mermaid-marquee.webp") repeat-x;
      background-size: cover; /* or cover depending on effect */
      animation: scroll 40s linear infinite;
    }

    @keyframes scroll {
      from {
        background-position: 0 0;
      }
      to {
        background-position: 100% 0;
      }
    }

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

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

.sec-06-main .column img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}
.sec-06-main .column:nth-of-type(1) img{ object-position: left;  }
.sec-06-main .column:nth-of-type(2) img{ object-position: right; }

 .sec-07-main {
      position: relative;
      aspect-ratio:  16 / 9;
      overflow: hidden;
      
    }

    .sec-07-main .box {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
       width: 1200px;
       max-width: 60%;
      aspect-ratio: 16/9;
      cursor: pointer;
      transition: all 0.6s ease, opacity 0.6s ease;
      opacity: 0;
    }

.sec-07-main .box img {
    object-fit: cover;
    width:100%;
    height: 100%;
}


    /* Arrow buttons */
.sec-07-main .carousel-btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: transparent;
      color: black ;
      border: none;
      padding: 12px 16px;
      cursor: pointer;
      z-index: 10;
      font-size: clamp(28px, 3vw, 40px);
    }

 .sec-07-main .btn-up {
      top: 0%;
    }

   .sec-07-main .btn-down {
      bottom: 0%;
    }

.sec-08 .carousel {
    background-color: var(--color-portfolio-01);
    padding: 6vw 0;
    position: relative;
}

.sec-08 .carousel > img{
    position:absolute;
    width:8vw;
    /* border:1px solid black; */
    aspect-ratio: 1;
    object-fit: contain;
}
.sec-08 .carousel > img:nth-of-type(1){
    right:12%;
    top: 6%;
}
.sec-08 .carousel > img:nth-of-type(2){
    bottom:8%;
    left: 12%;
}

.sec-08 .carousel-inner {
    width: 80%;
    margin-inline: auto;
}

.sec-08 .carousel-item { align-content: center;}

.sec-08 .carousel-item img {
    margin-inline: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.sec-08 .carousel-indicators {
    bottom: 25%;
    z-index: 99;
}

.sec-08 .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
}

.sec-08 .carousel-indicators .active {
    background-color: lightskyblue;
}


@media (max-width:1366px) {
    .sec-08 .carousel-indicators {
        bottom: 23.5%;
    }
}

@media (max-width:992px) {

    .sec-07-main .btn-up {top: -4%;}

   .sec-07-main .btn-down { bottom: -4%;}

    .sec-03-main {
        gap: 24px
    }
    .sec-08 .carousel-indicators {
        bottom: 22%;
    }
}

@media (max-width:768px) {
     .sec-07-main {aspect-ratio: 16 / 11;}
    .sec-07-main .box { max-width: 70%;}

    .sec-08 .carousel-indicators {
        bottom: 3%;
    }

    .sec-08 .carousel-indicators [data-bs-target] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    .carousel-control-next, .carousel-control-prev {
        width:10%;
    }


}

@media (max-width:767px) {
    .sec-03-main {
        flex-direction: column;
    }

    .sec-03-main .column1 {
        width: 100%;
    }

    .sec-03-main .column2 {
        width: 100%
    }

    .sec-03-main {
        gap: 24px;
        padding: 0 24px;
    }

}

@media(max-width:576px) {
    .sec-05 .carousel-inner {
        width: 100%;
        height: 40vh;
    }

    .sec-05 .carousel-item {
        height: 100%;
    }
}

@media (max-width:480px) {

    .sec-05 .carousel-item img {
        min-height: 100%;
    }
    .sec-07-main {aspect-ratio: 1;}
    .sec-07-main .box { max-width: 90%;}
    .sec-07-main .btn-up {top: -7%;}

    .sec-07-main .btn-down { bottom: -7%;}


    .sec-08 .carousel-indicators {
        bottom: -3%;
    }

}