:root {
     --color-portfolio-01: #FF0054;
     --color-portfolio-02: #FBA301;
     --color-portfolio-03: #3D4895;
     --color-portfolio-04: #00B2A2;
     --color-portfolio-05: #C8C8C8;
 }
 
.container-fluid{
	padding: unset;
}

.row {
	align-items: unset;
	align-content: unset;
}

 /* section 1 */
 .sec-01-col {
     min-height: 50vw;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;

 }

 /* section 2 */
 .sec-02-col {
     min-height: 50vw;
     background-repeat: no-repeat;
     background-size: calc(32%) calc(20%);
     background-position: center;

 }


 /* section 3 */
 #sec3 {
     background-color: var(--color-portfolio-01);
 }

 .sec-03-col {
     min-height: 30vw;
 }

 /* section 4 */
 .sec-04-col {
     min-height: 30vw;
 }

 .sec-04-subcol1:nth-child(1) .sec-04-box:nth-child(1) {
     background-color: var(--color-portfolio-03);
 }

 .sec-04-subcol1:nth-child(1) .sec-04-box:nth-child(2) {
     background-color: var(--color-portfolio-01);
 }

 .sec-04-subcol1:nth-child(2) .sec-04-box:nth-child(1) {
     background-color: var(--color-portfolio-04);
 }

 .sec-04-subcol1:nth-child(2) .sec-04-box:nth-child(2) {
     background-color: var(--color-portfolio-02);
 }

 .sec-04-subcol-row1 {
     min-height: 20vw;
 }

 .sec-04-col:nth-child(1) .card-body {
     /* background-image: url("../img/webp/mockup_Cap 01.webp"); */
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     background-color: var(--color-portfolio-05);
 }

 @media (max-width:767px) {
     .sec-04-subcol-row1 {
         min-height: 35vw;
     }

     .sec-04-subcol2 p {
         font-size: 14px;
     }
	 
	      .sec-05-col:nth-child(1) {
         aspect-ratio: 2/1;
     }

     .sec-05-col:nth-child(2) {
         aspect-ratio: 1/1;
     }
 }

 /* section 5 */
 .sec-05-col {
     min-height: 30vw;
 }

 .sec-05-col:nth-child(1) .card-body {
     background-color: var(--color-portfolio-02);
     /* background-image: url("../img/webp/sec-05-sheild-img.webp"); */
     background-repeat: no-repeat;
     background-size: calc(70%) calc(30%);
     background-position: center;
 }

 .sec-05-col:nth-child(2) .card-body {
     background-color: var(--color-portfolio-05);
     /* background-image: url("../img/webp/mockup_Cap 02.webp"); */
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
 }

    .new_portfolio #sec4 .main-row, 
    .new_portfolio #sec5 .main-row,
    .new_portfolio #sec6 .main-row{
      justify-content: center;
}


@media(max-width:576px) {

    .new_portfolio #sec4 .main-row, 
    .new_portfolio #sec5 .main-row,
    .new_portfolio #sec6 .main-row{
    padding-inline: 1rem;
}
}
 @media(max-width:575px) {
     .sec-05-col:nth-child(2) {
         display: none;
     }
 }

 /* section 6 */
 .sec-06-col {
     min-height: 40vw;
     aspect-ratio: 16/9;
     /* background-image: url("../img/webp/mockup_tablet 03.webp"); */
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center 90%;
 }

#sec7 .main-row{
	margin-left: unset;
}

 /* section 7 */
 .sec-07-col {
     min-height: 33vw;
 }

 .sec-07-col:nth-child(1) {
     /* background-image: url("../img/webp/mockup_GlassCup 02.webp"); */
     background-repeat: no-repeat;
     background-size: cover;

 }

 .sec-07-col:nth-child(2) {
     /* background-image: url("../img/webp/just-wink-text.webp"); */
     background-repeat: no-repeat;
     background-size: calc(70%) calc(25%);
     background-position: 25% center;

 }

 /* section 8 */
 .sec-08-col {
     min-height: 66vw;
 }


 .sec-08-col:nth-child(1) {
     /* background-image: url("../img/webp/mockup_iphone 01.webp"); */
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
 }

 .sec-08-subcol1,
 .sec-08-subcol2 {
     min-height: 33vw;

 }

 .sec-08-subcol1 {
     /* background-image: url("../img/webp/mockup_GlassCup 01.webp"); */
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
 }

 .sec-08-subcol2 {
     /* background-image: url("../img/webp/mockup_T-shirt 01.webp"); */
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
 }


 /* section 9 */
 .sec-09-col {
     min-height: 40vw;
     aspect-ratio: 16/9;
     /* background-image: url("../img/webp/mockup_Laptop+Mobile 01.webp"); */
     background-repeat: no-repeat;
     background-size: 100% 107%;
     background-position: 0% 42%;
 }

 /* section 10 */
 .sec-10-col {
     min-height: 40vw;
     /* background-image: url("../img/webp/mockup_airport screen banner.webp"); */
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
 }

 /* section 11 */

 .sec-11-col {

     min-height: 12vw;
     background-color: var(--color-portfolio-02);
 }

 .sec-11-subcol {

     --duration: 20s;
     --count: 12;
     height: 10vw;
     width: calc(100% / 12);
     /* background-image: url("../img/webp/wink-fav.webp"); */
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     position: absolute;
     left: 100%;
     animation-name: scroll-left;
     animation-duration: var(--duration);
     animation-iteration-count: infinite;
     animation-timing-function: linear;
 }

 @keyframes scroll-left {
     to {
         left: calc(-100% / 12);
     }
 }

 .sec-11-subcol:nth-child(1) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 1) * -1);
 }

 .sec-11-subcol:nth-child(2) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 2) * -1);
 }

 .sec-11-subcol:nth-child(3) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 3) * -1);
 }

 .sec-11-subcol:nth-child(4) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 4) * -1);
 }

 .sec-11-subcol:nth-child(5) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 5) * -1);
 }

 .sec-11-subcol:nth-child(6) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 6) * -1);
 }

 .sec-11-subcol:nth-child(7) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 7) * -1);
 }

 .sec-11-subcol:nth-child(8) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 8) * -1);
 }

 .sec-11-subcol:nth-child(9) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 9) * -1);
 }

 .sec-11-subcol:nth-child(10) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 10) * -1);
 }

 .sec-11-subcol:nth-child(11) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 11) * -1);
 }

 .sec-11-subcol:nth-child(12) {
     animation-delay: calc(var(--duration) / var(--count) * (var(--count) - 12) * -1);
 }