/* CSS starts here */
/* Universal Values */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    width: 100%;
}

/* Fonts Used */
@font-face {
    font-family: 'gilb';
    src: url('../font/gilb.otf');
}

@font-face {
    font-family: 'gill';
    src: url('../font/gill.otf');
}

@font-face {
    font-family: 'monb';
    src: url('../font/monb.otf');
}

@font-face {
    font-family: 'monl';
    src: url('../font/monl.otf');
}


/* Main Wrapper */
#main {
    position: relative;
    font-family: 'gill';
    background-color: #F8F8F8;
    padding-top: 1vw;
    padding-bottom: 3vw;
}


/* Navbar Section */
.navbar {
    height: 10vh;
    width: 100%;
    margin-top: 5vh;
    padding: 0 1.5vw;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.heading {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heading a {
    font-family: 'monb';
    color: black;
    text-decoration: none;
    font-size: 2.5vw;
    font-weight: 900;
    position: relative;
}

.heading a::before {
    content: "model management";
    font-family: 'gill';
    position: absolute;
    bottom: -5px;
    right: 10px;
    font-size: 0.7vw;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.734);
}

.heading a::after {
    content: "©";
    font-family: 'gill';
    position: absolute;
    top: 0px;
    right: -1.5vw;
    font-size: 1.5vw;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.734);
}

.menubar {
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}


.menu {
    height: 100%;
    width: 25%;
    border-right: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu:nth-child(2) {
    width: 35%;
}

.menu:nth-child(3) {
    width: 45%;
}

.menu:nth-child(4) {
    border-right: none;
}

.menu a {
    text-decoration: none;
    font-weight: 1000;
    color: black;
}

.menuicon {
    display: none;
}

@media (max-width:700px) {

    .navbar {
        height: 9vh;
        padding: 0 4vw;
    }

    .heading {
        width: 50%;
        justify-content: flex-start;
    }

    .heading a {
        font-size: 4.5vw;
    }

    .heading a::before {
        font-size: 1.5vw;
    }

    .heading a::after {
        right: -3vw;
        font-size: 3vw;
    }

    .menubar {
        display: none;
    }

    .menuicon {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .menuicon i {
        color: black;
        font-size: 5vw;
    }
}

@media (max-width:550px) {

    .navbar {
        height: 7vh;
        padding: 0 4vw;
    }
}

@media (max-height:650px) {
    .navbar {
        height: 15vh;
    }
}

/* Video Section */
.v-section {
    height: 80%;
    width: 100%;
    padding: 4vw;
}

.v-content {
    height: 100%;
    width: 100%;
    position: relative;
}

.v-content video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.overlay {
    width: 100%;
    padding: 5vw 5vw 3vw 5vw;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.overlay .o-up {
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid white;
    padding-bottom: 3vw;
}

.o-up h1 {
    font-family: 'gilb';
    display: inline-block;
    width: 40%;
    font-size: 4vw;
}

.o-up .circle {
    height: 5vw;
    width: 5vw;
    font-size: 15px;
    border: 1px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay .o-dn {
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2vw;
}

.o-dn p {
    font-family: 'gill';
    font-weight: 500;
}

.o-dn img {
    font-size: 3vw;
}


/* Marquee Like Images Section */
.img-section {
    width: 100%;
    height: 17vw;
    padding: 1vw 4vw;
    --quantity: 10;
}

.img-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}


.img-wrapper .item {
    width: 13vw;
    height: 13vw;
    flex-shrink: 0;
    position: absolute;
    left: 100%;
    animation: imgscroll 15s linear infinite;
    animation-delay: calc((15s / var(--quantity)) * (var(--position) - 1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1vw;
}


.img-wrapper .item .img-cont {
    width: 10vw;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-wrapper .item .img-cont img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: grayscale(0.8);
    transition: all ease 0.5s;
    clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%, 0% 10%);
}

.img-wrapper .item .img-cont img:hover {
    filter: grayscale(0);
    transform: scale(1.05);
}

.img-wrapper .item h5 {
    color: rgb(0, 0, 0);
    font-size: 1vw;
}

@keyframes imgscroll {
    0% {
        left: 100%
    }

    100% {
        left: -100%;
    }
}

@media (max-width:700px) {
    .img-wrapper .item h5 {
        font-size: 1.7vw;
    }
}

/* Alphabet section */
.alpha-section {
    height: 8vh;
    width: 100%;
    margin: 2vh 0 2vh 0;
    padding: 0vw 4vw;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alpha-section .all {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.alpha-section .all a {
    font-size: 1.4vw;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 5px;
    font-style: italic;
    border-bottom: 1px solid black;
}

.alpha-section .alphabets {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alpha-section .alphabets a {
    font-size: 0.9vw;
    color: rgba(0, 0, 0, 0.734);
    text-decoration: none;
    font-weight: 1000;
    font-style: italic;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alpha-section .alphabets a::after {
    content: "";
    position: absolute;
    height: 2.5vw;
    width: 2.5vw;
    border-radius: 50%;
    border: 0.5px solid transparent;
    transition: all ease 0.5s;
}

.alpha-section .alphabets a:hover::after {
    border: 0.5px solid black;
}

@media (max-width:700px) {
    .alpha-section {
        height: 5vh;
    }

    .alpha-section .all a {
        font-size: 2vw;
        font-weight: 400;
        letter-spacing: 1px;
        font-family: 'gilb';
    }

    .alpha-section .alphabets a {
        font-size: 1.5vw;
    }

    .alpha-section .alphabets a::after {
        height: 2.2vw;
        width: 2.2vw;
    }
}

/* Vogue Section */
.vogue-section {
    width: 100%;
    min-height: 100vh;
    padding: 4vw;
    display: flex;
    flex-direction: column;
    gap: 4vw;
}

/* upper */
.vup {
    width: 100%;
    height: 90vh;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.vup1 {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}


.vup1 .vup1-img {
    width: 100%;
    height: 90%;
}

.vup1 .vup1-img img {
    width: 90%;
    height: 100%;
    object-fit: cover;
}

.vup1 .vup1-t {
    width: 100%;
    height: 10%;
    padding-top: 2vw;
}

.vup1 .vup1-t h1 {
    font-family: 'monb';
    font-size: 3.5vw;
    letter-spacing: 2px;
}

.vup2 {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vup2 .vup2-img {
    width: 100%;
    height: 70%;
    object-fit: cover;
}

.vup2 .vup2-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

.vup2-t {
    width: 100%;
    height: 30%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.vup2-t h3 {
    width: 50%;
    padding: 2vw 2vw 0 0;
    font-size: 1.5vw;
    font-family: "gilb";
    font-weight: 100;
    line-height: 2vw;
}

.vup2-t p {
    width: 50%;
    padding-top: 2vw;
    font-size: 1.1vw;
    font-weight: 600;
}

/* middle */
.vmi {
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: space-between;
}

.vmi1 {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.vmi1 .vmi1-up {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmi1 .vmi1-up .circle {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circle img {
    width: 5vw;
    position: absolute;
}

.circle path {
    fill: transparent;
}

.circle text textPath {
    font-size: 1vw;
    font-weight: 800;
    letter-spacing: 5px;
}

.circle text {
    transform-origin: 50% 50%;
    animation: circlerotate 20s linear infinite;
}


@keyframes circlerotate {
    to {
        transform: rotateZ(0deg);
    }

    from {
        transform: rotateZ(360deg);
    }
}

.vmi1 .vmi1-dn {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4vw;
}

.vmi1 .vmi1-dn h3 {
    font-size: 2.3vw;
    font-family: "gilb";
    font-weight: 100;
}


.vmi2 {
    width: 55%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vmi2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
}

/* down */
.vdn {
    width: 100%;
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vdn img {
    width: 100%;
    height: 100%;
    padding: 4vw 0;
    object-fit: cover;
    background-position: center;
}

@media (max-width:950px) {
    .vup2-t h3 {
        font-family: "gilb";
        font-weight: 100;
        font-size: 2vw;
    }

    .vup2-t p {
        padding-top: 2vw;
    }

    .circle text textPath {
        font-size: 1.7vw;
        letter-spacing: 3px;
    }
}

@media (max-width:710px) {
    .vup {
        height: 100vh;
        margin-top: 5vw;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10vw;
    }

    .vup1 {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .vup1 .vup1-img {
        width: 75%;
        height: 100%;
    }

    .vup1 .vup1-img img {
        width: 100%;
    }

    .vup1 .vup1-t {
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
    }

    .vup1 .vup1-t h1 {
        transform: rotateZ(270deg);
        font-family: "gilb";
        font-size: 15vw;
        text-transform: uppercase;
        -webkit-text-stroke: 2px black;
        color: transparent;
        padding-top: 0;
        letter-spacing: 3px;
    }

    .vup1 .vup1-t h1 span {
        display: none;
    }

    .vup2 {
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }

    .vup2 .vup2-img {
        width: 50%;
        height: 100%;
        object-fit: cover;
    }

    .vup2 .vup2-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        background-size: cover;
        background-position: center;
    }

    .vup2-t {
        width: 50%;
        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }


    .vup2-t h3 {
        width: 80%;
        height: 60%;
        text-align: right;
        font-family: "gilb";
        font-weight: 100;
        padding: 2vw 0 0 0;
        font-size: 4vw;
        line-height: 4.5vw;
    }

    .vup2-t h3 span {
        font-size: 8vw;
    }

    .vup2-t p {
        width: 80%;
        height: 40%;
        padding-top: 0;
        font-size: 2.5vw;
    }

    .vmi {
        height: 50vh;
        margin-top: 8vw;
        flex-direction: row-reverse;
    }

    .vmi1 {
        width: 50%;
        height: 100%;
    }

    .vmi1 .vmi1-up {
        width: 100%;
        height: 50%;
        padding-right: 0vw;
    }

    .vmi1 .vmi1-up .circle {
        width: 100%;
        height: 100%;
    }

    .circle img {
        transform: rotateZ(180deg);
    }

    .circle text textPath {
        font-size: 2.5vw;
        letter-spacing: 2px;
        padding: 4vw;
    }

    .vmi1 .vmi1-dn h3 {
        font-size: 3vw;
    }

    .vmi2 {
        width: 50%;
        height: 100%;
    }

    .vdn {
        height: 50vh;
    }

}

@media (max-width:560px) {
    .circle text textPath {
        font-size: 3.2vw;
        letter-spacing: 2.5px;
    }

    .vmi1 .vmi1-dn h3 {
        font-size: 4vw;
    }
}

@media (max-height:650px) {
    .vup {
        height: 150vh;
    }

    .vmi {
        height: 100vh;
    }

    .circle text textPath {
        font-size: 2.2vw;
    }
}


/* Update Section */
.update-section {
    width: 100%;
    height: 100vh;
    padding: 1vw 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upd-up {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upd-up h1 {
    font-size: 4vw;
    letter-spacing: 3px;
    font-family: 'monb';
    text-transform: uppercase;
}

.upd-dn {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dnbox {
    width: 100%;
    height: 20%;
    padding: 0 2vw;
    border-top: 1.5px solid black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.dnbox h3 {
    width: 40%;
    font-weight: 800;
    justify-self: flex-start;
}

.dnbox .img-cont {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-self: flex-start;
}

.dnbox img {
    opacity: 0;
    position: absolute;
    height: 20vh;
    aspect-ratio: 1/1;
    clip-path: polygon(0% 10%, 10% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%);
    justify-self: flex-start;

}

.dnbox:hover.dnbox img {
    transition: opacity 1s ease;
    opacity: 1;
    animation: imganime 1.5s ease-in-out forwards;
}

@keyframes imganime {
    0% {
        left: 0%;
        transform: rotateZ(0deg);
        filter: blur(0px) grayscale(1);

    }

    100% {
        left: 30%;
        transform: rotateZ(10deg);
        filter: blur(0px) grayscale(0);
    }
}

.dnbox h2 {
    width: 40%;
    font-size: 3vw;
    font-weight: 800;
    line-height: 2vw;
    justify-self: flex-start;
}

.dnbox h2 span {
    font-size: 1.2vw;
    font-weight: 800;
    text-transform: uppercase;
}

.d-box4 {
    border-bottom: 1.5px solid black;
}

@media (max-width:760px) {

    .update-section {
        height: 80vh;
        margin-top: 10vh;
    }

    .upd-up {
        height: 10%;
    }

    .upd-up h1 {
        font-size: 6vw;
        -webkit-text-stroke: 1px black;
        color: transparent;
    }

    .upd-dn {
        height: 90%;
    }

    .dnbox {
        height: 18%;
    }

    .dnbox img {
        height: 15vh;
    }

    .dnbox h2 {
        font-size: 3.5vw;
        line-height: 4vw;
    }

    .dnbox h2 span {
        font-size: 1.5vw;
    }
}

@media (max-height:650px) {
    .update-section {
        height: 130vh;
    }

    .upd-up h1 {
        font-size: 4vw;
    }

    .dnbox h2 {
        font-size: 2.5vw;
        line-height: 2vw;
    }

    .dnbox img {
        height: 25vh;
    }
}

/* Movie Section */
.movie-section {
    min-height: 100vh;
    width: 100%;
    padding: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vw;
}

.mup {
    height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
}

.mup-l {
    width: 50%;
    height: 100%;
}

.mup-l img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
}

.mup-r {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mupr-t {
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: column;
    white-space: fill;
}

.muprt-1 {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1vw;
}

.muprt-1 h2 {
    font-size: max(2.6vw, 2.6vh);
    font-family: 'monb';
    letter-spacing: 2px;
    display: inline-block;
    text-transform: uppercase;
}

.muprt-2 {
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.muprt-2 h3 {
    font-size: max(2vw, 2vh);
    font-weight: 400;
    font-family: 'gilb';
}

.muprt-3 {
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.muprt-3 p {
    font-size: max(1vw, 1vh);
    font-weight: 1000;
}

.mupr-img {
    width: 100%;
    height: 60%;
    display: flex;
    align-items: flex-end;
}

.mupr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
}

.mmi {
    height: 70vh;
    width: 100%;
}

.mmi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
}

.mdn {
    height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
}

.mdn-l {
    width: 60%;
    height: 100%;
}

.mdn-l img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
}

.mdn-r {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.mdnr-up {
    width: 100%;
    height: 70%;
}

.mdnr-up img {
    width: 100%;
    height: 100%;
    filter: grayscale(1);
    object-fit: cover;
    background-position: center;
}

.mdnr-dn {
    width: 100%;
    height: 30%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3vw;
}

.mdnr-dn h3 {
    font-size: max(1.7vw, 1.7vh);
    font-weight: 100;
    font-family: 'gilb';
}

.mdnr-dn p {
    font-size: max(1.1vw, 1.1vh);
    font-weight: 800;
}

@media (max-width:750px) {

    .mup {
        height: 75vh;
        width: 100%;
    }

    .muprt-1 {
        margin-bottom: 0vw;
    }

    .muprt-1 h2 {
        -webkit-text-stroke: 1px black;
        color: transparent;
    }

    .muprt-2 h3 {
        font-size: max(1.3vw, 1.3vh);
        font-weight: 800;
    }

    .muprt-3 {
        align-items: flex-start;
    }

    .mmi {
        height: 50vh;
        width: 100%;
    }

    .mdn {
        height: 50vh;
    }

    .mdnr-dn {
        width: 100%;
        height: 30%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 3vw;
        padding: 2vw;
    }

    .mdnr-dn h3 {
        font-size: max(1.6vw, 1.6vh);
    }

    .mdnr-dn p {
        display: none;
    }
}

@media (max-height:650px) {

    .mmi {
        height: 70vh;
    }

    .mdn {
        height: 100vh;
        width: 100%;
    }
}

/* marquee like text section */
.text-section {
    width: 100%;
    height: 20vh;
    display: flex;
    align-items: center;
}

.text-wrapper {
    width: 100%;
    height: 10vh;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    --boxvalue: 4;
}

.text-cont {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.text-box {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: absolute;
    left: 100%;
    animation: textanime 15s linear infinite;
    animation-delay: calc((15s / var(--boxvalue)* (var(--boxposition) - 1)));
}

@keyframes textanime {
    0% {
        left: 100%;
    }

    100% {
        left: -100%
    }
}

.text-box h1 {
    font-family: 'monb';
    font-size: 3vw;
    letter-spacing: 2px;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.792);
    color: transparent;
}

@media (max-width:750px) {

    .text-wrapper {
        --boxvalue: 2;
    }

    .text-cont:nth-child(4) {
        display: none;
    }

    .text-cont:nth-child(3) {
        display: none;
    }

    .text-box {
        width: 100%;
    }

    .text-box h1 {
        font-size: 5.7vw;
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0.792);
    }
}

@media (max-height:650px) {
    .text-section {
        height: 30vh;
    }

    .text-wrapper {
        height: 15vh;
    }

    .text-wrapper {
        --boxvalue: 3;
    }

    .text-cont:nth-child(4) {
        display: none;
    }


    .text-box h1 {
        font-size: 3.7vw;
    }

}


/* Blog Section */
.blog-section {
    width: 100%;
    height: 70vh;
    padding: 4vw;
    display: flex;
    gap: 2vw;
}

.bri {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.bri h2 {
    font-family: 'monb';
    font-size: 3vw;
    letter-spacing: 2px;
}

.bmi {
    width: 35%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4vw;
}

.bmi .bmi-up {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: flex-start;
}

.bmi .bmi-up h3 {
    font-size: 1.5vw;
    font-weight: 900;
}

.bmi .bmi-up h3 span {
    color: black;
    font-size: 2vw;
}

.bmi .bmi-up .pht {
    display: none;
}

.bmi .bmi-dn {
    width: 100%;
    height: 65%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.bmi .bmi-dn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
}


.ble {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4vw;
}

.ble .ble-up {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: flex-start;
}

.ble .ble-up h3 {
    font-size: 1.5vw;
    font-weight: 900;
}

.ble .ble-up h3 span {
    color: black;
    font-size: 2vw;
}

.ble .ble-up .pht {
    display: none;
}

.ble .ble-dn {
    width: 100%;
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ble .ble-dn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
}

@media (max-width:750px) {

    .blog-section {
        height: 60vh;
        gap: 4vw;
    }

    .bri {
        align-items: center;
        justify-content: center;
    }

    .bri h2 {
        transform: rotate(270deg);
        font-size: 8vw;
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0.792);
        color: transparent;
    }

    .bmi {
        width: 40%;
        gap: 4vw;
    }

    .bmi .bmi-up {
        height: 17%;
    }

    .bmi .bmi-up h3 {
        display: none;
    }

    .bmi .bmi-up .pht {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .bmi .bmi-up .pht h4 {
        font-family: 'monb';
        font-size: 7vw;
        letter-spacing: 2px;
        color: rgba(0, 0, 0, 0.775);
    }

    .bmi .bmi-up .pht p {
        font-family: 'gill';
        font-size: 1.7vw;
        color: rgba(0, 0, 0, 0.734);
        font-weight: 800;
    }

    .bmi .bmi-dn {
        height: 60%;
        clip-path: polygon(0% 10%, 25% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    .ble {
        width: 40%;
        gap: 4vw;
    }

    .ble .ble-up {
        height: 17%;
    }

    .ble .ble-up h3 {
        display: none;
    }

    .ble .ble-up .pht {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .ble .ble-up .pht h4 {
        font-family: 'monb';
        font-size: 7vw;
        letter-spacing: 2px;
        color: rgba(0, 0, 0, 0.775);
    }

    .ble .ble-up .pht p {
        font-family: 'gill';
        font-size: 1.7vw;
        color: rgba(0, 0, 0, 0.734);
        font-weight: 800;
    }

    .ble .ble-dn {
        height: 60%;
        clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 100%, 0% 100%);
    }

}

@media (max-height:650px) {
    .blog-section {
        height: 130vh;
        gap: 4vw;
    }
}

/* Footer Section */
.footer-section {
    width: 100%;
    height: 30vh;
    margin-top: 10vh;
    margin-bottom: 4vh;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fle {
    width: 35%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-right: 2px solid black;
    padding: 2vw 3vw 0 4vw;
}

.fle a:nth-child(1) {
    font-size: 3vw;
    font-family: 'monb';
    letter-spacing: 2px;
    text-decoration: none;
    color: black;
    position: relative;
}

.fle a:nth-child(1)::before {
    content: "model management";
    font-family: 'gill';
    position: absolute;
    bottom: -2px;
    right: 10px;
    font-size: 0.7vw;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.734);
}

.fle a:nth-child(1)::after {
    content: "©";
    font-family: 'gill';
    position: absolute;
    top: 0px;
    right: -1.5vw;
    font-size: 1.5vw;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.734);
}

.fle a:nth-child(2) {
    font-size: 1.2vw;
    text-decoration: none;
    color: black;
    font-weight: 900;
}

.fmi {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-right: 2px solid black;
    padding-top: 2vw;
}

.fmi a {
    font-size: 1.2vw;
    text-decoration: none;
    color: black;
    font-weight: 900;
}

.fri {
    width: 40%;
    height: 100%;
}

.fri-up {
    width: 100%;
    height: 30%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 2px solid black;
    padding: 2vw 4vw 0 3vw;
}

.fri-up a {
    width: 80%;
    font-size: 1.2vw;
    text-decoration: none;
    color: black;
    font-weight: 900;
}

.fri-dn {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2vw;
    padding: 2vw 4vw 0 3vw;
}

.fri-dn .links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}

.links a {
    font-size: 1.4vw;
    text-decoration: none;
    color: black;
    font-weight: 100;
}

.fri-dn .about {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about p {
    font-size: 1vw;
    color: black;
    font-weight: 600;
}

@media (max-width:800px) {
    .footer-section {
        height: 35vh;
        margin-top: 2vh;
    }

    .fle {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 5vw;
        padding: 3vw 3vw 3vw 4vw;
    }

    .fle a:nth-child(1) {
        font-size: 4vw;
    }

    .fle a:nth-child(1)::before {
        bottom: -2px;
        right: 2px;
        font-size: 1vw;
    }

    .fle a:nth-child(1)::after {
        right: -2.2vw;
        font-size: 2vw;
    }

    .fle a:nth-child(2) {
        font-size: 2vw;
    }

    .fmi {
        padding-top: 4vw;
    }

    .fmi a {
        font-size: 2vw;
    }

    .fri-up {

        padding: 3vw 4vw 0 4vw;
    }

    .fri-up a {
        font-size: 2vw;
    }

    .fri-dn {
        gap: 3vw;
        padding: 4vw 4vw 0 4vw;
    }

    .links a {
        font-size: 3vw;
    }

    .about p {
        font-size: 1.7vw;
    }
}

@media (max-width:570px) {
    .footer-section {
        height: 20vh;
    }
}

@media (max-height:650px) {
    .footer-section {
        height: 70vh;
        margin-top: 2vh;
    }
}

/* End of Css , written by Shiva Patel aka @curioushiva ~ i am tired , really */