/* ================================
   Instrument Serif
================================ */
@font-face {
    font-family: "InstrumentSerif-regular";
    src: url("Fonts/InstrumentSerif-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "InstrumentSerif-italic";
    src: url("Fonts/InstrumentSerif-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

/* ================================
   Neue Montreal
================================ */
@font-face {
    font-family: "NeueMontreal-light";
    src: url("Fonts/NEUEMONTREAL-LIGHT.OTF") format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "NeueMontreal-regular";
    src: url("Fonts/NEUEMONTREAL-REGULAR.OTF") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "NeueMontreal-medium";
    src: url("Fonts/NeueMontreal-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "NeueMontreal-bold";
    src: url("Fonts/NEUEMONTREAL-BOLD.OTF") format("opentype");
    font-weight: 700;
    font-style: normal;
}

/* ================================
   Poppins
================================ */
@font-face {
    font-family: "Poppins-light";
    src: url("Fonts/Poppins-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Poppins-regular";
    src: url("Fonts/NEUEMONTREAL-REGULAR.OTF") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Poppins-medium";
    src: url("Fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Poppins-bold";
    src: url("Fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

:root {
    --color-portfolio-01: #406790;
    --color-portfolio-02: #EA6BAE;
    --color-portfolio-03: #00A5B3;
    --color-portfolio-04: #07383F;
    --color-portfolio-05: #76360B;
    --color-portfolio-06: #AE714D;
    --color-portfolio-07: #F2DAB2;

    --poppins-b: "Poppins-bold";
    --poppins-m: "Poppins-medium";
    --poppins-r: "Poppins-regular";
    --poppins-l: "Poppins-light";

    --neueMontreal-b: "NeueMontreal-bold";
    --neueMontreal-m: "NeueMontreal-medium";
    --neueMontreal-r: "NeueMontreal-regular";
    --neueMontreal-l: "NeueMontreal-light";

    --instrumentSerif-i: "InstrumentSerif-italic";
    --instrumentSerif-r: "InstrumentSerif-regular";

}

.sec-03,
.sec-04 {
    padding: 0 2vw;
}

.sec-03-main {
    display: flex;
}
.new_portfolio .sec-03-main .column2 article{padding-block:0px;}
.sec-03-main .column {
    border: 1px solid black;
    width: 50%;
    padding: 24px;
}

.sec-03-main .column2 {
    border-left: none;
}

.sec-03-main .column1 h4,
.sec-03-main .column2 h4 {
    font-family: var(--poppins-l);
    font-size: clamp(1rem, 2vw, 24px);
    margin-bottom: 1.5rem;
}

.sec-03-main .column1 h2,
.sec-03-main .column2 h2 {
    font-size: clamp(1.8rem, 2.5vw, 43px);
    margin-bottom: 1.5rem;
}

.sec-03-main .column1 h2:nth-of-type(1) {
    font-family: var(--neueMontreal-l);
}

.sec-03-main .column1 h2:nth-of-type(2) {
    font-family: var(--neueMontreal-r);
}

.sec-03-main .column1 h2:nth-of-type(3) {
    font-family: var(--neueMontreal-m);
}

.sec-03-main .column1 h2:nth-of-type(4) {
    font-family: var(--neueMontreal-b);
}

.sec-03-main .column2 article .font-s3 {
    font-family: var(--instrumentSerif-i);
}

.sec-03-main .column2 article {
    display: flex;
    align-items: baseline;
    gap: 30px;
    margin-bottom: 2rem;
}

.sec-03-main .column2 article span {
    font-family: var(--neueMontreal-r);
}

.sec-03-main .column2 article .font-s1,
.sec-03-main .column2 article .font-s3 {
    font-size: clamp(1.8rem, 4vw, 4rem);
}

.sec-03-main .column2 article .font-s2,
.sec-03-main .column2 article .font-s4 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
}

.sec-03-main .column2 h2:nth-of-type(1) {
    font-size: clamp(2rem, 4vw, 56px);
    margin-bottom: 1.5rem;
    font-family: var(--instrumentSerif-r);

}

.sec-03-main .column2 h2:nth-of-type(2) {
    font-size: clamp(2rem, 3vw, 44px);
    margin-bottom: 1.5rem;
    font-family: var(--instrumentSerif-i);
}

.sec-04-main {
    display: flex;
}

.sec-04-main .column .subcol:nth-of-type(1) {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.sec-04-main .column .subcol:nth-of-type(1) {
    border-right: 1px solid black;
}

.sec-04-main .column2 .subcol:nth-of-type(2) {

    border-right: 1px solid black;
}

.sec-04-main .column {
    width: 50%;
    color: white;
    font-size: clamp(0.8rem, 2vw, 1.3rem);
}

.sec-04-main .column .subcol img {
    width: 70%;
    object-fit: cover;
    margin-inline: auto;
    display: block;
}

.sec-04-main .column .subcol:nth-of-type(1),
.sec-04-main .column .subcol:nth-of-type(2) {
    height: 8vw;
    align-content: center;
}

.sec-04-main .column1 .subcol:nth-of-type(3) {
    background-color: var(--color-portfolio-01);
    padding: 10px;
    height: 15vw;
}

.sec-04-main .column1 .subcol:nth-of-type(4) {
    background-color: var(--color-portfolio-02);
    padding: 10px;
    height: 15vw;
}

.sec-04-main .column2 .subcol:nth-of-type(3) .box:nth-of-type(1) {
    background-color: var(--color-portfolio-03);
    padding: 10px;
    height: 15vw;
}

.sec-04-main .column2 .subcol:nth-of-type(3) .box:nth-of-type(2) {
    background-color: var(--color-portfolio-04);
    padding: 10px;
    height: 15vw;
}

.sec-04-main .column2 .subcol:nth-of-type(4) .box:nth-of-type(1) {
    background-color: var(--color-portfolio-05);
    padding: 10px;
    height: 15vw;
}

.sec-04-main .column2 .subcol:nth-of-type(4) .box:nth-of-type(2) {
    background-color: var(--color-portfolio-06);
    padding: 10px;
    height: 15vw;
}

.sec-04-main .column2 .subcol:nth-of-type(4) .box:nth-of-type(3) {
    background-color: var(--color-portfolio-07);
    padding: 10px;
    height: 15vw;
    color: var(--color-portfolio-06);
}

.sec-05 {
    padding: 2rem 2vw;
}

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

.sec-05-main .box {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 800px;
    max-width: 45%;
    aspect-ratio: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
    overflow: hidden;
}

.sec-05-main .box img {
    object-fit: contain;
    aspect-ratio: 1;
}

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

.sec-05-main .btn-left {
    left: 5%;
}

.sec-05-main .btn-right {
    right: 5%;
}

.sec-07-main,
.sec-09-main {
    display: flex;
    padding: 0 2vw;
    gap: 24px;
}

.sec-07-main .column {
    aspect-ratio: 16 / 9;
}

.sec-08 {
    padding: 24px 0;
}

.sec-08-main {
    display: flex;
    gap: 24px;
    padding: 24px 0 0
}

.sec-08-main .column {
    width: 50%;
}

.sec-08-main .column img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.sec-09-main .column:nth-of-type(1) {
    width: 30%;
}

.sec-09-main .column:nth-of-type(2) {
    width: 70%;
}

.sec-09-main .column:nth-of-type(2) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.sec-10-main .box {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translateX(-50%) scale(0.9);
/*  width: 80%;*/
	width: 65%;
  aspect-ratio: 16/9;
  cursor: pointer;
  transition: all 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

.sec-10-main .box img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* border-radius: 12px; */
}

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

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

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

.sec-11 {
    padding: 24px 0;
    overflow: hidden;
}

.sec-11 .column1,
.sec-11 .column2,
.sec-11 .column3,
.sec-11 .column4 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sec-11 .column1 img,
.sec-11 .column2 img,
.sec-11 .column3 img,
.sec-11 .column4 img { object-fit: cover;}

.sec-11 .column3 img {
    flex: 1 1 auto;
}

.sec-11 .column1 img {
    flex: 1 1 auto;
}

.sec-11 .column4 img {
    flex: 1 1 auto;
}


@media(max-width:1366px) {
	    .sec-10-main { aspect-ratio: 16 / 11;}
}

@media(max-width:992px) {
    .sec-03-main .column2 article {
        flex-direction: column;
        gap: 16px;
    }

    .sec-03-main .column2 article {
        margin-bottom: 1.5rem;
    }
}

@media(max-width:991px) {
    .sec-04-main .column .subcol img {
        width: 45%;
    }

    .sec-04-main .column1 .subcol:nth-of-type(1),
    .sec-04-main .column2 .subcol:nth-of-type(1) {
        order: 1;
    }

    .sec-04-main .column1 .subcol:nth-of-type(2),
    .sec-04-main .column2 .subcol:nth-of-type(2) {
        order: 3;
    }

    .sec-04-main .column1 .subcol:nth-of-type(3),
    .sec-04-main .column2 .subcol:nth-of-type(3) {
        order: 2;
    }

    .sec-04-main .column1 .subcol:nth-of-type(4),
    .sec-04-main .column2 .subcol:nth-of-type(4) {
        order: 4;
    }

    .sec-04-main .column .subcol:nth-of-type(2) {
        border-left: 1px solid black;
        border-right: 1px solid black;
    }
}

@media(max-width:768px) {

    .sec-07-main,
    .sec-09-main {
        padding: 0 24px;
    }

    .sec-10-main { aspect-ratio: 16 / 14;}

    .sec-10-main .box { width: 90%;}
}

@media(max-width:767px) {

    .sec-03-main,
    .sec-07-main,
    .sec-08-main,
    .sec-09-main {
        flex-direction: column;
    }

    .sec-03-main .column2 {
        border-left: 1px solid black;
    }

    .sec-03-main .column,
    .sec-04-main .column,
    .sec-08-main .column {
        width: 100%;
    }

    .sec-09-main .column:nth-of-type(1) {
        width: 100%;
    }

    .sec-09-main .column:nth-of-type(2) {
        width: 100%;
    }

    .sec-03,
    .sec-04 {
        padding: 0 24px;
    }

    .sec-04-main .column .subcol img {
        width: 30%;
    }

    .sec-04-main {
        flex-direction: column;
    }

    .sec-05 {
        padding: 0 24px;
    }

    .sec-05-main {
        aspect-ratio: 16 / 12;
    }

    .sec-11 .column3,.sec-11 .column4{ padding-top: 24px;}

}

@media(max-width:576px) {
    .sec-04-main .column .subcol img {
        width: 50%;
    }

    .sec-04-main .column .subcol:nth-of-type(1),
    .sec-04-main .column .subcol:nth-of-type(2) {
        height: 14vw;
    }

    .sec-04-main .column1 .subcol:nth-of-type(3),
    .sec-04-main .column1 .subcol:nth-of-type(4),
    .sec-04-main .column2 .subcol:nth-of-type(3) .box:nth-of-type(1),
    .sec-04-main .column2 .subcol:nth-of-type(3) .box:nth-of-type(2),
    .sec-04-main .column2 .subcol:nth-of-type(4) .box:nth-of-type(1),
    .sec-04-main .column2 .subcol:nth-of-type(4) .box:nth-of-type(2),
    .sec-04-main .column2 .subcol:nth-of-type(4) .box:nth-of-type(3) {
        height: 35vw;
    }

    .sec-05-main .btn-left {
        left: 0;
    }

    .sec-05-main .btn-right {
        right: 0;
    }

    .sec-05-main .box {
        max-width: 60%
    }

    /* .sec-10-main .carousel-btn{
        display: none;
    } */

}

@media(max-width:480px) {
    .sec-05-main .btn-left {
        left: -20px;
    }

    .sec-05-main .btn-right {
        right: -20px;
    }

    
    .sec-10-main { aspect-ratio: 1 / 1.3;}

    .sec-10-main .box { width: 96%;}
}