/* Code written by Shiva aka @curioshiva */
/* Universal values */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Removes side scrollbar */
body::-webkit-scrollbar {
    display: none;
}

/* Importing fonts */
@font-face {
    font-family: 'plainLight';
    src: url('../fonts/plainLight.otf');
}

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

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

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

/* Loader page*/
.loader {
    width: 100%;
    height: 100vh;
    background-color: #0B0B0B;
    position: fixed;
    z-index: 150;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.loader .text-cont {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-left: 5vw;
    visibility: hidden;
}


.text-cont h1:nth-child(1) {
    padding-left: 5vw;
    text-transform: uppercase;
    font-family: 'plainLight';
    font-size: 6.5vw;
    font-weight: 600;
}

.text-cont h1:nth-child(1) sup {
    vertical-align: 50%;
    padding-right: 2vw;
    text-transform: uppercase;
    font-family: 'silkLight';
    font-size: 3.5vw;
    font-weight: 600;
    opacity: 0;
    transition: all 0.5s ease;
}

.text-cont h1:nth-child(1) sup span {
    display: inline-block;
    min-width: 5vw;
}

.text-cont h1:nth-child(2) {
    text-transform: uppercase;
    font-family: 'plainLight';
    font-size: 6.5vw;
    font-weight: 600;
}

.text-cont h1:nth-child(3) {
    text-transform: uppercase;
    font-family: 'plainLight';
    font-size: 6.5vw;
    font-weight: 600;
}

.text-cont h1:nth-child(3) span {
    display: inline-block;
    min-width: 20vw;
    line-height: 1;
    animation-name: nowAnime;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes nowAnime {
    0% {
        font-family: "plainLight";
        -webkit-text-stroke: 1px white;
        color: white;
        font-weight: 500;
        opacity: 1;
    }

    45% {
        font-family: "plainLight";
        -webkit-text-stroke: 1px white;
        color: white;
        font-weight: 500;
        opacity: 0;
    }

    50% {
        font-family: "silkLight";
        -webkit-text-stroke: 1px white;
        color: transparent;
        font-weight: 500;
        opacity: 1;
    }

    100% {
        font-family: "silkLight";
        -webkit-text-stroke: 1px white;
        color: transparent;
        font-weight: 500;
    }
}

.text-cont h3 {
    padding-top: 5vw;
    padding-left: 20vw;
    text-transform: uppercase;
    font-family: 'plainLight';
    font-size: 0.9vmax;
    font-weight: 500;
    opacity: 0;
    transition: all 0.2s ease;
}

/* Custom Curser */
.mycursor {
    height: 3.5vw;
    width: 3.5vw;
    border-radius: 50%;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #4e4e4e;
    position: fixed;
    top: -50%;
    left: -50%;
    z-index: 100;
    pointer-events: none;
    opacity: 1;
}



/* Main wrapper */
.main {
    position: relative;
    background-color: #151515;
}

/* Page 1 */
.page1 {
    min-height: 100vh;
    width: 100%;
    color: white;
    background-color: #151515;
    position: relative;
}

/* Navbar down */
.navbar-dn {
    padding: 3vw 4vw;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-family: "plainLight";
}

/* nav dn left */
.navdn-left {
    display: flex;
    align-items: flex-start;
}

.navdn-left .nav-l-l {
    display: flex;
    align-items: center;
    gap: 3vw;
    position: absolute;
}

.nav-l-l a {
    color: white;
    display: flex;
    align-items: flex-start;
}

.nav-l-l .ri-box-1-fill {
    font-size: 2vmin;
}

.navdn-left .nav-l-t {
    display: flex;
    flex-direction: column;
    padding-left: 25vw;
}

.navdn-left .nav-l-t h4 {
    font-size: 1.7vmin;
    font-weight: 100;
}

/* nav dn right */
.navdn-right {
    display: flex;
    gap: 2vw;
}

.navdn-right a {
    text-decoration: none;
    color: white;
    font-size: 1.7vmin;
}


/* Navbar up */
.navbar-up {
    height: 100vh;
    width: 100%;
    position: relative;
    padding: 0vw 4vw 0vw 4vw;
    font-family: "plainLight";
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    background-color: #0B0B0B;
    position: fixed;
    z-index: 95;
    top: -100%;
}

/* nav up left */
.navup-left {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

/* navup left up */
.navup-l-up {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3vw;
    position: absolute;
    top: 3vw;
    left: 4vw;
}

.navup-l-up a {
    color: white;
    display: flex;
    align-items: flex-start;
}

.navup-l-up .ri-box-2-fill {
    font-size: 1.9vmin;
}


/* navup left down */
.navup-l-dn {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}

.navup-l-dn h1 {
    font-size: 7vw;
    text-transform: uppercase;
    font-family: "silkLight";
    font-weight: 500;
    line-height: 1;
    -webkit-text-stroke: 2px white;
    color: transparent;
    opacity: 0;
    visibility: hidden;
}

.navup-l-dn a {
    font-size: 7vw;
    text-decoration: none;
    font-family: "plainLight";
    font-weight: 600;
    color: white;
    -webkit-text-stroke: 0px white;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
}

/* for vw > 650 */
.ph-email {
    display: none;
}

/* nav up right */
.navup-right {
    padding: 0 15vw 0 0;
    display: flex;
    flex-direction: column;
    gap: 5vw;
    opacity: 0;
    visibility: hidden;
}

.navup-right .socials {
    display: flex;
    flex-direction: column;
}

.navup-right .socials h3 {
    padding-bottom: 1vw;
    font-size: 1.1vmax;
}

.navup-right .socials a {
    font-size: 1.8vw;
    text-decoration: none;
    color: white;
}

.navup-right .address {
    display: flex;
    flex-direction: column;
}

.navup-right .address h3 {
    padding-bottom: 1vw;
    font-size: 1.1vmax;
}

.navup-right .address h2 {
    font-size: 1.8vw;
    font-weight: 500;
    color: white;
}

.navup-right .email {
    display: flex;
    flex-direction: column;
}

.navup-right .email h3 {
    padding-bottom: 1vw;
    font-size: 1.1vmax;
}

.navup-right .email a {
    font-size: 1.8vw;
    text-decoration: none;
    color: white;
}

/* Home text */
.home-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5vw;
    margin-top: 8vh;
    padding-left: 21vw;
    position: relative;
    z-index: 85;
}

/* home text left */
.home-text .ht-l {
    align-self: flex-start;
    font-family: "silkLight";
}

.ht-l .htl {
    display: flex;
    padding-top: 0.6vw;
}

.ht-l .htl h2 {
    font-size: 3vw;
}

/* Home text right*/
.home-text .ht-r {
    align-self: flex-start;
    font-family: "plainLight";
}

.ht-r .htr {
    display: flex;
    overflow: hidden;
}

.ht-r .htr h1 {
    font-size: 6.5vw;
    text-transform: uppercase;
    display: inline-block;
}

.ht-r .htr:nth-child(3) h1 span:nth-child(1) {
    display: inline-block;
    line-height: 1;
    border-bottom: min(0.7vw, 0.7vh) solid white;
}

.ht-r .htr:nth-child(3) h1 span:nth-child(2) {
    display: inline-block;
    line-height: 1;
    border-bottom: min(0.7vw, 0.7vh) solid white;
}

.flag {
    width: 15vw;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    transform: translate(-50%, -55%);
    opacity: 0;
    pointer-events: none;
}

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

}

/* Home video */
.home-video {
    height: 70vh;
    width: 100vw;
    margin-top: 12vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.video-cont {
    width: 70%;
    height: 80%;
    position: relative;
}

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

.video-cont img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.video-cursor {
    height: 9vw;
    width: 9vw;
    background-color: #FFA63D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -1vw;
    left: 55vw;
    transform: translate(-50%, -50%);
    z-index: 85;
}

.video-cursor i {
    font-size: 2vw;
    font-weight: 1000;
    color: white;
}

.video-cursor i:nth-child(2) {
    display: none;
}


@media (max-width:900px) {
    .home-video {
        height: 55vh;
    }
}

@media (max-width:650px) {

    /* Page 1 */
    .navdn-left .nav-l-l {
        position: static;
        width: 90vw;
        display: flex;
        justify-content: space-between;
    }

    .nav-l-l a svg {
        width: 7.7vmax;
        height: 3.7vmax;
    }

    .nav-l-l .ri-box-1-fill {
        font-size: 3.7vw;
    }

    .navdn-left .nav-l-t {
        display: none;
    }

    .navdn-right {
        display: none;
    }

    .navbar-up {
        height: 100vh;
        top: -115%;
        padding: 0vw 5vw 0vw 5vw;
    }

    .navbar-up::-webkit-scrollbar {
        display: none;
    }

    .navup-left {
        height: 100%;
        display: grid;
        grid-template-rows: repeat(9, 1fr);
        align-items: flex-end;
        align-content: center;
    }

    .navup-l-up {
        width: 90vw;
        grid-row: 1/2;
        align-self: flex-start;
        padding-top: 5vw;
        position: static;
        display: flex;
        justify-content: space-between;
    }

    .navup-l-up a svg {
        width: 8vmax;
        height: 4vmax;
    }

    .navup-l-up .ri-box-2-fill {
        font-size: 4vw;
    }

    .navup-l-dn {
        grid-row: 3/7;
        align-self: start;
    }

    .navup-l-dn h1 {
        font-size: 10vw;
    }

    .navup-l-dn a {
        font-size: 10vw;
    }

    .ph-email {
        grid-row: 8/9;
        align-self: start;
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
    }

    .ph-email h3 {
        padding-bottom: 4vw;
        font-size: 2vmax;
    }

    .ph-email a {
        font-size: 3vmax;
        text-decoration: none;
        color: white;
        text-decoration: underline 1.5px;
    }

    .navup-right {
        display: none;
    }

    .home-text {
        justify-content: center;
        padding-left: 0vw;
    }

    .ht-l .htl h2 {
        font-size: 5vw;
    }

    .ht-r .htr h1 {
        font-size: 9vw;
    }

    .home-video {
        height: 50vh;
        width: 100vw;
    }

    .video-cont {
        width: 100%;
        height: 80%;
    }

    .video-cont video {
        height: 100%;
        width: 100%;
    }

    .video-cont img {
        height: 100%;
        width: 100%;
    }

    .video-cursor {
        height: 15vw;
        width: 15vw;
    }

    .video-cursor i {
        font-size: 4vw;
    }

}

@media (max-width:400px) {

    .ph-email {
        grid-row: 7/8;
    }

    .navbar-up {
        height: 100vh;
        top: -700vh;
        padding: 0vw 5vw 0vw 5vw;
    }

}

@media (max-height:400px) {

    .navbar-up {
        top: -135%;
    }

    .home-video {
        height: 100vh;
    }
}

/* Page 2 */
.page2 {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #151515;
}

/* heading */
.page2 .p2-head {
    display: flex;
    align-items: flex-start;
    gap: 5vw;
    padding-left: 21vw;
    color: white;
}

.p2-head h2 {
    font-size: 3vw;
    padding-top: 0.6vw;
    font-family: "silkLight";
}

.p2-head h1 {
    font-size: 6.5vw;
    font-family: "plainLight";
    text-transform: uppercase;
    padding-bottom: 2vw;
    position: relative;
}

.p2-head h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 65vw;
    height: 0.1vw;
    background-color: white;
}


/* content grid */
.p2-content {
    height: 220vw;
    width: 100%;
    display: grid;
    grid-template-rows: repeat(23, 1fr);
    grid-template-columns: 24vw 30vw 34vw;
    gap: 3vw;
    padding: 0 4vw 0 4vw;
    overflow: hidden;
    margin-top: 10vw;
}

/* content box - common for all */
.content {
    display: flex;
    flex-direction: column;
    color: white;
    font-family: "plainLight";
}

.content h2 {
    font-size: 2.5vw;
    font-family: 'plainLight';
    text-transform: uppercase;
    padding-bottom: 3vw;
}

.content .img-cont {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 75%;
}

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

.content .about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2vw;
    padding-bottom: 1.5vw;
    border-bottom: 1px solid white;
}

.content .about p {
    font-size: 1.1vw;
    font-weight: 500;
}

.content .about h3 {
    font-size: 1.1vw;
    font-weight: 500;
}

.content-circle {
    height: 26vw;
    width: 26vw;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.content-circle .circle-anim {
    height: 26vw;
    width: 26vw;
    border-radius: 50%;
    position: absolute;
    z-index: 85;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    scale: 0;
}

.content-circle .circle-anim p {
    font-size: 1vw;
    font-weight: 600;
    color: black;
}

.content-circle svg {
    width: 10vw;
    height: 10vw;
}

/* content box - individual */
.box1 {
    grid-row: 1/6;
    grid-column: 1/2;
}

.box1 .img-cont {
    height: 73%;
}

.box2 {
    grid-row: 1/7;
    grid-column: 2/3;
}

.box3 {
    grid-row: 1/7;
    grid-column: 3/4;
    align-self: flex-end;
    justify-self: center;
}

/* for mobile */
.box3-circle .circle-anim h6 {
    display: none;
}

.box4 {
    grid-row: 6/11;
    grid-column: 1/2;
    align-self: flex-end;
    justify-self: center
}

.box4 .box4-circle {
    height: 24vw;
    width: 24vw;
}

.box4 .box4-circle svg {
    width: 8vw;
    height: 8vw;
    rotate: -45deg;
}

.box5 {
    grid-row: 8/14;
    grid-column: 2/3;
}

.box6 {
    grid-row: 7/13;
    grid-column: 3/4;
}

.box7 {
    grid-row: 11/16;
    grid-column: 1/2;
}

.box7 .img-cont {
    height: 70%;
}

.box8 {
    grid-row: 14/20;
    grid-column: 2/3;
    align-self: flex-end;
    justify-self: center;
}

.box8 .box8-circle svg {
    rotate: -90deg;
}

.box9 .img-cont {
    height: 80%;
}

.box9 {
    grid-row: 13/20;
    grid-column: 3/4;
}

.box10 {
    grid-row: 20/25;
    grid-column: 2/3;
    align-self: center;
    justify-self: center;
}

.box10 .box10-circle {
    background-color: #FFA63D;
    border: none;
}

.box10 .box10-circle h4 {
    font-size: 1vw;
    display: inline-block;
    line-height: 1;
}

.box10 .box10-circle h4 span {
    font-family: "silkLight";
}

@media (max-width:650px) {

    .p2-head h2 {
        font-size: 5vw;
    }

    .p2-head h1 {
        font-size: 8vw;
    }

    .p2-content {
        height: 520vw;
        margin-top: 20vw;
        grid-template-rows: repeat(52, 1fr);
        grid-template-columns: 44vw 44vw;
        gap: 3vw;
    }

    .content h2 {
        font-size: 3vw;
    }

    .content .about {
        padding-top: 2vw;
        padding-bottom: 2vw;
        border-bottom: 0.5px solid white;
    }

    .content .about p {
        font-size: 2vw;
    }

    .content .about h3 {
        font-size: 2vw;
        font-weight: 500;
    }

    .content .circle-anim {
        padding: 4vw;
    }

    .content-circle .circle-anim p {
        font-size: 1.4vw;
        font-weight: 600;
        color: black;
    }

    .content-circle svg {
        width: 10vw;
        height: 10vw;
    }

    .box1 {
        grid-row: 1/12;
        grid-column: 1/3;
    }

    .box1 .img-cont {
        height: 70%;
    }

    .box2 {
        grid-row: 11/19;
        grid-column: 2/3;
    }

    .box3 {
        grid-row: 12/16;
        grid-column: 1/2;
        align-self: flex-start;
    }

    .box3 .box3-circle svg {
        rotate: -45deg;
    }

    .box3-circle .circle-anim p {
        display: none;
    }

    .box3-circle .circle-anim h6 {
        display: inline-block;
        font-size: 2vw;
        font-weight: 600;
        color: black;
    }

    .box4 {
        grid-row: 20/22;
        grid-column: 2/3;
    }

    .box4 .box4-circle svg {
        rotate: 0deg;
    }

    .box5 {
        grid-row: 15/23;
        grid-column: 1/2;
    }

    .box6 {
        grid-row: 23/35;
        grid-column: 1/3;
    }

    .box7 {
        grid-row: 34/41;
        grid-column: 1/2;
    }

    .box7 .about p span {
        display: none;
    }

    .box8 {
        grid-row: 34/44;
        grid-column: 1/2;
    }

    .box8 .box8-circle svg {
        rotate: 270deg;
    }


    .box9 {
        grid-row: 34/45;
        grid-column: 2/3;
    }

    .box9 .img-cont {
        height: 80%;
    }

    .box10 {
        grid-row: 44/52;
        grid-column: 1/3;
    }

    .box10 .box10-circle h4 {
        font-size: 2vw;
        display: inline-block;
        line-height: 1;
    }

    .box10 .box10-circle {
        height: 32vw;
        width: 32vw;
    }

}


/* Page 3 */
.page3 {
    min-height: 100vh;
    width: 100%;
    background-color: #151515;
}


/* heading */
.page3 .p3-head {
    display: flex;
    align-items: flex-start;
    gap: 5vw;
    color: white;
    padding-left: 21vw;
}

.p3-head h2 {
    font-size: 3vw;
    padding-top: 0.6vw;
    font-family: "silkLight";
}

.p3-head h1 {
    font-size: 6.5vw;
    font-family: "plainLight";
    text-transform: uppercase;
    padding-bottom: 2vw;
    position: relative;
}

.p3-head h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 65vw;
    height: 0.1vw;
    background-color: white;
}

/* about section */
.p3-about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4vw;
    color: white;
    font-family: 'plainLight';
    padding: 4vw 4vw 4vw 29vw;
}

.ab1 {
    padding-right: 28vw;
}

.ab1 h2 {
    font-size: 2.3vw;
    font-weight: 600;
}

.ab2 {
    display: flex;
    gap: 2vw;
}

.ab2 img {
    width: 35vw;
    height: 40vw;
    object-fit: cover;
    background-position: center;
}

.ab2 h3 {
    padding-right: 12vw;
    font-size: 1.1vw;
    font-weight: 400;
}

.ab3 {
    width: 45vw;
    height: 35vw;
    background-color: #3F7EF4;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0vw 3vw 2vw 3vw;
    position: relative;
    margin-top: -20%
}

.ab3-cont {
    width: 100%;
    color: white;
    border-bottom: 1px solid white;
    display: flex;
    align-items: center;
    padding-bottom: 2vw;
    padding-top: 2vw;
}

.ab3cont-l {
    width: 50%;
    align-self: flex-start;
}

.ab3cont-l h2 {
    font-size: 1.5vw;
    font-weight: 500;
}

.ab3cont-r {
    width: 50%;
    align-self: flex-start;
}

.ab3cont-r h3 {
    font-size: 1vw;
    font-weight: 500;
}

.ab4 {
    display: none;
}

/* work section */
.work-section {
    margin-top: 8vw;
    padding-bottom: 10vw;
}

.ws-head {
    margin-left: 29vw;
    margin-right: 4vw;
    border-top: 1px solid white;
}

.ws-head h4 {
    font-size: 1.1vw;
    padding-top: 1.4vw;
    font-family: "plainLight";
    font-weight: 500;
    color: white;
}

.work-cont {
    padding-top: 7vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.work-cont .wc-1 {
    width: 100%;
    height: 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.wc-1 .item1 {
    flex-shrink: 0;
}

.wc-1 .item1 h1 {
    font-size: 6.5vw;
    font-weight: 200;
    font-family: "plainLight";
    -webkit-text-stroke: 1px white;
    color: transparent;
}

.wc-1 .item1 h1 span {
    font-family: "silkLight";
}


.work-cont .wc-2 {
    width: 100%;
    height: 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.wc-2 .item2 {
    flex-shrink: 0;
}

.wc-2 .item2 h1 {
    font-size: 6.5vw;
    font-weight: 200;
    font-family: "plainLight";
    -webkit-text-stroke: 1px white;
    color: transparent;
}

.wc-2 .item2 h1 span {
    font-family: "silkLight";
}

@media (max-width:650px) {

    .p3-head h2 {
        font-size: 5vw;
    }

    .p3-head h1 {
        font-size: 8vw;
    }

    .p3-about {
        height: 200vw;
        display: grid;
        grid-template-rows: 30vw 10vw 80vw 75vw;
        grid-template-columns: 92%;
        justify-content: center;
        padding: 10vw 5vw 4vw 5vw;
    }

    .ab1 {
        grid-row: 1/2;
        grid-column: 1/2;
        padding-right: 0vw;
    }

    .ab1 h2 {
        font-size: 4vw;
        font-weight: 600;
    }

    .ab2 {
        grid-row: 2/3;
        grid-column: 1/2;
        display: inline-block;
    }

    .ab2 img {
        display: none;
    }

    .ab2 h3 {
        font-size: 2vw;
        font-weight: 400;
    }

    .ab2 h3 span {
        display: none;
    }

    .ab4 {
        grid-row: 3/4;
        grid-column: 1/2;
        display: flex;
        width: 100%;
        height: 100%;
    }

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

    .ab3 {
        grid-row: 4/5;
        grid-column: 1/2;
        width: 83vw;
        height: 70vw;
        padding: 0vw 3vw 2vw 3vw;
        position: static;
    }

    .ab3-cont {
        padding-bottom: 3vw;
        padding-top: 3vw;
    }

    .ab3cont-l h2 {
        font-size: 3.5vw;
        font-weight: 500;
    }

    .ab3cont-r h3 {
        font-size: 2.5vw;
    }

    .work-section {
        margin-top: 35vw;
        padding-bottom: 20vw;
    }

    .ws-head h4 {
        font-size: 2vw;
    }

    .work-cont .wc-1 {
        height: 12vw;
    }

    .wc-1 .item1 h1 {
        font-size: 9vw;
    }

    .work-cont .wc-2 {
        height: 12vw;
    }

    .wc-2 .item2 h1 {
        font-size: 9vw;
    }

}


/* Page 4 */
.page4 {
    height: 55vmax;
    width: 100%;
    background-color: #151515;
}


/* heading */
.page4 .p4-head {
    display: flex;
    align-items: flex-start;
    gap: 5vw;
    color: white;
    padding-left: 21vw;
    padding-top: 5vw;
}

.p4-head h2 {
    font-size: 3vw;
    padding-top: 0.6vw;
    font-family: "silkLight";
}

.p4-head h1 {
    font-size: 6.5vw;
    font-family: "plainLight";
    text-transform: uppercase;
    padding-bottom: 2vw;
    line-height: 1;
    position: relative;
}

.p4-head svg {
    margin-top: 1.7vw;
    width: 5vw;
}

.p4-head h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 65vw;
    height: 0.1vw;
    background-color: white;
}

/* footer */
.p4-footer {
    padding: 2vw 0 0 29.5vw;
    display: flex;
    flex-direction: column;
}

.p4-footer .comp-contacts {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-family: "plainLight";
    color: white;
    padding: 2vw 10vw 0 0;
}

.comp-contacts .c-socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-socials {
    display: flex;
    flex-direction: column;
}

.c-socials h3 {
    padding-bottom: 2vw;
    font-size: 1.3vw;
}

.c-socials a {
    font-size: 1.8vw;
    text-decoration: none;
    color: white;
}

.comp-contacts .c-address {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-address {
    display: flex;
    flex-direction: column;
}

.c-address h3 {
    padding-bottom: 2vw;
    font-size: 1.3vw;
}

.c-address h2 {
    font-size: 1.8vw;
    font-weight: 500;
    color: white;
}

.comp-contacts .c-email {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-email {
    display: flex;
    flex-direction: column;
}

.c-email h3 {
    padding-bottom: 2vw;
    font-size: 1.3vw;
}

.c-email a {
    font-size: 1.8vw;
    text-decoration: none;
    color: white;
}

.comp-name {
    margin: 13vw 5vw 0 1vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2vw 0vw 5vw 0vw;
    border-top: 1px solid white;
}

.comp-name a {
    font-family: "plainLight";
    font-size: 1.2vw;
    text-decoration: none;
    color: white;
}

@media (max-width : 650px) {

    .page4 {
        height: 55vmax;
        width: 100%;
        background-color: #151515;
    }

    .p4-head h2 {
        font-size: 5vw;
    }

    .p4-head h1 {
        font-size: 8vw;
    }

    .p4-head svg {
        width: 6vw;
    }

    .p4-footer .comp-contacts {
        padding: 2vw 5vw 0 0;
    }

    .c-socials h3 {
        font-size: 2vw;
    }

    .c-socials a {
        font-size: 2.2vw;
    }

    .c-address h3 {
        font-size: 2vw;
    }

    .c-address h2 {
        font-size: 2.2vw;
    }

    .c-email h3 {
        font-size: 1.8vw;
    }

    .c-email a {
        font-size: 2.2vw;
    }

    .comp-name a {
        font-size: 2vw;
    }
}

@media (max-width:400px) {
    .page4 {
        height: 40vmax;
    }
}

/* This is the clone of an original website - obys.agency */
/* Almost took 1-2 week to complete - choose life or some other stuff , i mean real programming */