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

body,
html {
    height: 100%;
    width: 100%;
    /* background-color: #f0492380; */
    /* overflow: hidden; */
    background-color: #EFEAE3;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}

/* Page - 1 ------------------------------------------------------------------------------------------------------------- */
#page-1 {
    min-height: 100vh;
    /* background-color: aqua; */
    background-color: #EFEAE3;
    width: 100%;
    /* Using padding instead of margin */
    padding: 0 2vw 0 2vw;
}

/* Navbar -------------------------------------------------- */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 3vw 4vw;
    gap: 4vw;
}

/* Nav - 1 */
.navbar .nav-1 {
    display: flex;
    flex-direction: column;
}

.navbar .nav-1 h1 {
    font-size: 40px;
    color: #000000;
    /* text-transform: uppercase; */
    font-weight: 400;
    letter-spacing: 2px;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    position: relative;
    z-index: +1;
}

.navbar .nav-1 h2 {
    font-size: 35px;
    letter-spacing: 2px;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    z-index: +1;
    text-transform: uppercase;
    position: relative;
}

.navbar .nav-1 h1::after {
    content: "";
    height: 70px;
    width: 70px;
    border-radius: 50%;
    right: -12px;
    top: 30px;
    position: absolute;
    z-index: -1;
    background-color: #fc340cd2;
    filter: blur(5px);
}


/* Nav Phone ------------------------------------------------------------- */
.navbar #nav-p {
    display: none;
}

/* Phone nav pop up */
#nav-pop {
    height: 100%;
    width: 100%;
    background-color: #0000008e;
    position: fixed;
    z-index: 20;
    top: -100%;
    transition: all ease 0.8s;
}

#nav-pop #nav-p-cont {
    padding: 5vw;
    height: 50vh;
    width: 100%;
    background-color: #EFEAE3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 1vw;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    position: relative;
}

#nav-pop #nav-p-cont h1 {
    font-size: 12vw;
    font-weight: 500;
    z-index: 10;
}

#nav-pop #nav-p-cont button {
    margin: 0vw 2vw 3vw 0;
    border: 1px solid rgb(161, 156, 156);
    padding: 10px 10px 10px 10px;
    border-radius: 20px;
    background-color: #EFEAE3;
    font-size: 17px;
    font-weight: 500;
    z-index: 10;
    opacity: 80%;
}

/* Nav - 2 */
.navbar .nav-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
}

.navbar .nav-2 button {
    border: 1px solid rgb(161, 156, 156);
    padding: 10px 10px 10px 10px;
    border-radius: 20px;
    background-color: #EFEAE3;
    font-size: 17px;
    font-weight: 530;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    position: relative;
    overflow: hidden;
}

/* mouse hover effect - using sudo ele */
.navbar .nav-2 button::after {
    content: "";
    /* making div */
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    bottom: -100%;
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    transition: all ease 0.4s;
}

.navbar .nav-2 button:hover::after {
    bottom: 0;
    border-radius: 0;
}

.navbar .nav-2 button a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    z-index: +1;
    position: relative;
}

.navbar .nav-2 button:hover a {
    color: white;
}

/* Making nav resposnsive for mobile */
@media (max-width:600px) {

    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 3vw 4vw;
        gap: 4vw;
    }

    .navbar .nav-2 {
        display: none;
    }

    .navbar #nav-p {
        display: block;
    }

    .navbar #nav-p h2 {
        border: 1px solid rgb(161, 156, 156);
        padding: 10px 10px 10px 13px;
        border-radius: 20px;
        background-color: #EFEAE3;
        font-size: 17px;
        font-weight: 570;
    }

}

/* Prop for 440px */
@media (max-width:440px) {
    #nav-pop #nav-p-cont {
        height: 40vh;
    }
}

/* Centre ------------------------------------------------------- - */

#centre {
    height: 70vh;
    width: 100%;
    /* background-color: #f0492380; */
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid #0000003c;
    padding-bottom: 5vw;
}

#centre #right h2 {
    font-size: 9vw;
    text-align: right;
    line-height: 9vw;
}

#centre #left h3 {
    width: 25vw;
    font-size: 1.8vw;
}

/* Organge Oval Shape Element -------------------------------------- */
#shape-container {
    position: absolute;
    width: 46vw;
    height: 36vw;
    right: 0;
    top: 83vh;
}

#shape-container #shape-1 {
    height: 100%;
    width: 100%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: #FE320A;
    filter: blur(20px);
    position: absolute;
}

#shape-container #shape-2 {
    height: 30vw;
    width: 30vw;
    border-radius: 50%;
    background: linear-gradient(#FE320A, #fe570a);
    filter: blur(20px);
    position: absolute;
    animation-name: animation-2;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

/* Moving effect using keyframe */
@keyframes animation-2 {
    from {
        transform: translate(50%, -10%);
    }

    to {
        transform: translate(0%, 10%);
    }
}

#shape-container #shape-3 {
    height: 30vw;
    width: 30vw;
    border-radius: 50%;
    background: linear-gradient(#FE320A, #fe570a);
    filter: blur(20px);
    position: absolute;
    animation-name: animation-3;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

/* Moving effect using keyframe */
@keyframes animation-3 {
    from {
        transform: translate(-20%, 10%);
    }

    to {
        transform: translate(-20%, 30%);
    }
}

/* (Video) ------------------------------------------ */
#page-1 video {
    width: 100%;
    border-radius: 30px;
    margin-top: 7vh;
    position: relative;
}

/* Making centre resposnsive for mobile */
@media (max-width:600px) {

    #centre {
        height: 70vh;
        width: 100%;
        /* background-color: #f0492380; */
        display: flex;
        flex-direction: column;
        /* align-items: flex-start; */
        justify-content: space-between;
        border-bottom: 1px solid #0000003c;
        padding: 17vw 7vw 7vw 7vw;
    }

    #centre #left {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }

    #centre #left h3 {
        width: 80%;
        font-size: 4vw;
        /* padding: 4vw; */
    }

    #centre #right h2 {
        font-size: 15vw;
        line-height: 15vw;
    }

    #shape-container {
        top: 75vh;
    }

    #page-1 video {
        margin-top: 2vh;
        height: 50vh;
        object-position: center;
        object-fit: cover;
    }

}

/* Prop for 440px */
@media (max-width:440px) {
    #centre #left h3 {
        font-size: 6vw;
    }
}


/* Page - 2 ---------------------------------------------------------------------------------------------------------------- */
#page-2 {
    min-height: 100vh;
    width: 100%;
    /* Using padding instead of margin */
    padding: 8vw 0 0 0;
    background-color: #EFEAE3;
    /* position: relative; */
}

/* Moving Text Section -------------------------------- */
#moving-text {
    white-space: nowrap;
    overflow-x: auto;
}

#moving-text::-webkit-scrollbar {
    display: none;
}

#moving-text #mt-cont {
    display: inline-block;
    white-space: nowrap;
    animation-name: movingText;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#moving-text #mt-cont h1 {
    font-size: 8vw;
    display: inline-block;
    /* background-color: aqua; */
}

#moving-text #mt-cont #o-dot {
    height: 4vw;
    width: 4vw;
    background-color: #FE320A;
    border-radius: 50%;
    display: inline-block;
    margin: 1vw 2vw;
}

@keyframes movingText {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Bottom side text ------------------------------------- */
#bottom-text {
    height: 90vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 15vw 4vw 0vw 4vw;
    align-items: center;
    position: relative;
    /* flex-direction: wrap; */
}

#bottom-text #left-bottom {
    width: 63%;
    height: 100%;
}

#bottom-text #left-bottom h1 {
    font-size: 4vw;
    line-height: 4.3vw;
    position: relative;
    z-index: 1;
}

#bottom-text #right-bottom {
    width: 25%;
    height: 100%;
}

#bottom-text #right-bottom img {
    height: auto;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

#bottom-text #right-bottom p {
    font-weight: 450;
    margin-top: 2vw;
    /* word-wrap: none; */
    /* letter-spacing: 0px; */
    line-height: 20px;
}

/* bg-circle ------------------------------------------- */
#bg-circle {
    position: absolute;
    height: 30vw;
    width: 30vw;
    background: linear-gradient(to top, #FE320A, #fe570a);
    border-radius: 50%;
    top: 30%;
    left: 20%;
    filter: blur(20px);
}

#bg-circle-1 {
    position: absolute;
    height: 30vw;
    width: 30vw;
    background: linear-gradient(to top, #FE320A, #fe570a);
    border-radius: 50%;
    animation-name: bg-circle;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes bg-circle {
    from {
        transform: translate(10%, -10%) skew(0);
    }

    to {
        transform: translate(-10%, 10%) skew(10deg);
    }
}

/* Making of bottom text for mobile */
@media (max-width:600px) {


    #bottom-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20vw 4vw 0vw 8vw;
        width: 100%;
        height: 100vh;
        position: relative;
    }

    #bottom-text #left-bottom {
        height: 20vh;
        width: 90%;
    }

    #bottom-text #left-bottom h1 {
        font-size: 5vw;
        line-height: 7vw;
    }

    #bottom-text #right-bottom {
        position: relative;
        width: 90%;
        height: 50vh;
        position: absolute;
        top: 43%;
    }

    #bottom-text #right-bottom img {
        width: 55%;
    }

    #bottom-text #right-bottom p {
        padding-top: 3vw;
        width: 80%;
    }

    #bg-circle {
        height: 55vw;
        width: 55vw;
        top: 20%;
        left: 30%;
    }

}

/* Prop for 440px */
@media (max-width:440px) {

    #page-2 {
        min-height: 90vh;
        width: 100%;
    }

    #bottom-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20vw 4vw 0vw 8vw;
        width: 100%;
        height: 100%;
        position: relative;
    }

    #bottom-text #left-bottom {
        height: 20vh;
        width: 90%;
    }

    #bottom-text #left-bottom h1 {
        font-size: 5vw;
        line-height: 7vw;
    }

    #bottom-text #right-bottom {
        position: relative;
        width: 90%;
        position: absolute;
        top: 100%;
    }

    #bottom-text #right-bottom img {
        width: 55%;
    }

    #bottom-text #right-bottom p {
        padding-top: 3vw;
        width: 80%;
    }

    #bg-circle {
        height: 55vw;
        width: 55vw;
        top: 35%;
        left: 30%;
    }
}


/* Page - 3 ------------------------------------------------------------------------------------------------------------ */
#page-3 {
    min-height: 100vh;
    width: 100%;
    /* Using padding instead of margin */
    padding: 5vw 0 0 0;
    background-color: #EFEAE3;
}

/* Featured Projects -------------------------------------- */
#fp-text {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 2vw;
    margin-bottom: 5vw;
}

#fp-text h3 {
    font-weight: 450;
    font-size: 15px;
    /* position: relative;
    z-index: 1; */
}

#fp-text #fp-dot {
    height: 8px;
    width: 8px;
    background-color: #FE320A;
    border-radius: 50%;
}

#f-ps {
    height: 8.5vw;
    width: 100%;
    /* background-color: orange; */
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    padding: 0 2vw;
    overflow: hidden;
    border-bottom: 1px solid #0000003c;
}

#f-ps h2 {
    font-size: 3.5vw;
    position: relative;
    z-index: 1;
}

#f-ps::after {
    content: "";
    height: 100%;
    width: 100%;
    background: linear-gradient(to top, orange, #fe330adf);
    position: absolute;
    top: -100%;
    left: 0;
    transition: all ease 0.3s;
}

#f-ps:hover::after {
    top: 0;
}

#f-ps-left {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

#f-ps-left h3 {
    font-weight: 400;
    font-size: 17px;
}

#f-ps-left h4 {
    color: #00000067;
    font-size: 15.5px;
    font-weight: 450;
}

/* Featured Projects Image Container */
#fps-img {
    position: fixed;
    height: 40vw;
    width: 34vw;
    background-color: transparent;
    z-index: 20;
    top: 20%;
    left: 45%;
    border-radius: 15px;
    display: none;
    background-size: cover;
    background-position: center;
}

#pro-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 2vw;
    margin-top: 5vw;
}

#pro-btn button {
    padding: 15px;
    background-color: #EFEAE3;
    border-radius: 25px;
    border: 1px solid #0000009d;
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 1;
}

#pro-btn button::after {
    content: "";
    position: absolute;
    /* background-color: #FE320A; */
    height: 100%;
    width: 100%;
    border-radius: 50%;
    bottom: -100%;
    left: 0px;
    transition: all ease 0.4s;
}

#pro-btn button:hover::after {
    bottom: 0;
    border-radius: 0;
    background-color: #000000;
}

#pro-btn button a {
    text-decoration: none;
    color: #000000;
    font-size: 17px;
    font-weight: 530;
    position: relative;
    z-index: 1;
}

#pro-btn button:hover a {
    color: white;
}

/* Making of bottom text for mobile */
@media (max-width:600px) {
    #page-3 {
        min-height: 100vh;
    }

    #fp-text {
        margin-bottom: 10vw;
    }

    #f-ps {
        height: 12vw;
    }

    #f-ps h2 {
        font-size: 4vw;
    }

    #f-ps-left h3 {
        font-weight: 400;
        font-size: 15px;
    }

    #f-ps-left h4 {
        color: #00000067;
        font-size: 13px;
        font-weight: 450;
    }

    #fps-img {
        height: 60vw;
        width: 54vw;
        top: 40%;
        left: 27%;
    }

}

@media (max-width:440px) {
    #page-3 {
        min-height: 70vh;
    }

}


/* Page - 4 ------------------------------------------------------------------------------------------------------------- */
#page-4 {
    min-height: 100vh;
    width: 100%;
    /* Using padding instead of margin */
    padding: 8vw 0 0 0;
    background-color: #EFEAE3;
}

#p4-cont {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
}

/* Strictly for mobile */
#m-p4-cont {
    display: none;
}

/* Black box conatiner ------------------------------------------- */
#b-cont {
    width: 97%;
    height: 95vh;
    background-color: #000000;
    position: relative;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Black box left */
#b-cont1 {
    width: 40%;
    height: 100%;
    padding: 0 10vw;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    flex-direction: column;
    /* background-color: #FE320A; */
}

#b-cont1 #design {
    font-size: 20vw;
    font-weight: 600;
    color: white;
}

#b-cont1 #project {
    font-size: 5vw;
    font-weight: 600;
    color: #504A46;
}

#b-cont1 #execution {
    font-size: 5vw;
    font-weight: 600;
    color: #504A46;
}

#b-cont1 p {
    padding-top: 4vw;
    color: white;
    line-height: 17px;
}

/* Black box right */
#b-cont2 {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #0a2ffe; */
}

#b-cont2 img {
    height: auto;
    width: 54vw;
    background-position: center;
    background-size: cover;
}


/* Making of black box cont for mobile */
@media (max-width:600px) {

    #page-4 {
        min-height: 100vh;
    }

    /* Strictly for desktop */
    #p4-cont {
        display: none;
    }

    #m-p4-cont {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
    }

    #m-b-cont {
        width: 96%;
        height: 85vh;
        background-color: #000000;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        padding: 10vw;
        color: white;
    }

    #m-b-cont1 {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        justify-content: flex-start;
    }

    #m-b-cont1 #b-Pro {
        font-size: 6vw;
        font-weight: calc(540);
        color: #504A46;
    }

    #m-b-cont1 #b-Exc {
        font-size: 6vw;
        font-weight: calc(540);
        color: #504A46;
    }

    #bib {
        height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
    }

    #m-b-cont2 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;

    }

    #m-b-cont2 #b-Des {
        font-size: 15.7vw;
    }

    #m-b-cont3 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        z-index: 5;
    }

    #m-b-cont3 #b-centre-img {
        height: 70vw;
        width: auto;
    }

    #m-b-cont4 {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        padding: 0 0 7vw 0;
    }
}

/* For width of 440px */
@media (max-width:440px) {

    #page-4 {
        min-height: 80vh;
    }

    #m-b-cont {
        height: 90vh;
    }

    #m-b-cont3 #b-centre-img {
        height: 120vw;
        width: auto;
    }

    #m-b-cont4 {
        padding: 0 0 7vw 0;
    }

}



/* Page - 5 ------------------------------------------------------------------------------------------------------------- */
#page-5 {
    min-height: 100vh;
    width: 100%;
    /* Using padding instead of margin */
    padding: 8vw 0 0 0;
    background-color: #EFEAE3;
}

/* Featured Projects -------------------------------------- */
#Wc-text {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 5vw;
}

#Wc-text h3 {
    font-weight: 450;
    font-size: 15px;
}

#Wc-text #Wc-dot {
    height: 8px;
    width: 8px;
    background-color: #FE320A;
    border-radius: 50%;
}

/* Work Comp -------------------------------------- */
#Wc-cont {
    height: 50vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    overflow-x: scroll;
    margin-top: 7vw;
    /* white-space: nowrap; */
}

#Wc-cont::-webkit-scrollbar {
    display: none;
}

#Wc-cont #comp {
    height: 80%;
    width: 48%;
    display: inline-block;
    border-left: 1px solid #0000003c;
    margin: 0vw 4vw;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 3vw;
    gap: 3vw;
}

#Wc-cont #comp img {
    width: 20vw;
}

#Wc-cont #comp p {
    font-size: 15px;
}


/* Responsive slide cards for mobile */
@media (max-width:600px) {
    #page-5 {
        min-height: 80vh;
    }

    #Wc-cont {
        height: 50vh;
        width: 100%;
    }

    #Wc-cont #comp {
        height: 75%;
        width: 48%;
        margin: 10vw 4vw 0 4vw;
    }

    #Wc-cont #comp img {
        width: 45vw;
    }

    #Wc-cont #comp p {
        padding-top: 5vw;
        font-size: 15px;
    }
}

/* for 440px of width */
@media (max-width:440px) {
    #page-5 {
        min-height: 70vh;
    }
}

/* Page - 6 ------------------------------------------------------------------------------------------------------------- */
#page-6 {
    height: 100vh;
    width: 100%;
}

/* Setting of main cont -------------------------------------------- */
#main {
    z-index: 10;
    position: relative;
}

/* footer for the web ---------------------------------------------- */
#footer {
    position: fixed;
    z-index: 5;
    height: 100vh;
    background-color: #000000;
    color: white;
    width: 100%;
    bottom: 0;
}

#footer-cont {
    padding: 10vw 5vw 5vw 5vw;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 15;
    gap: 5vw;
}

#footer-bg {
    position: absolute;
    height: 25vh;
    width: 100%;
    background: linear-gradient(to top, #FE320A, #fe570a);
    top: 0;
    left: 0;
    filter: blur(20px);
}

#footer-cont::after {
    content: "";
    height: 30vh;
    width: 100%;
    background: linear-gradient(to top, #FE320A, #fe570a);
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(20px);
    border-bottom-right-radius: 40%;
    border-bottom-left-radius: 40%;
    z-index: 10;
    animation-name: footer-move;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes footer-move {
    from {
        transform: translate(-10%, 10%) skewX(0);
    }

    to {
        transform: translate(10%, -10%) skewX(45deg);
    }
}

#upper-footer {
    position: relative;
    z-index: 15;
    display: flex;
    justify-content: space-between;
    gap: 40%;
    padding: 0 5vw 0 5vw;
}

#upper-footer #luf {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#upper-footer #luf h2 {
    font-weight: 600;
    font-size: 3vw;
}

#upper-footer #ruf {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

#upper-footer #ruf h3 {
    font-weight: 400;
    font-size: 17px;
}

#upper-footer #ruf h4 {
    font-weight: 400;
    font-size: 16px;
    color: #DABBAD;
    padding: 20px 0 10px 0px;
    border-bottom: 1px solid #DABBAD;
}

#lower-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#lower-footer #comp-text {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #504A46;
    padding-bottom: 1vw;
}

#lower-footer #comp-text h1 {
    font-size: 22vw;
    text-align: center;
}

#lower-footer #cre-text {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    padding-top: 3vw;
}

#lower-footer #cre-text h5 {
    font-size: 14px;
    font-weight: 500;
}

#lower-footer #cre-text a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 500;

}

/* Responsive footer for mobile */
@media (max-width:600px) {
    #page-6 {
        height: 100vh;
        width: 100%;
    }

    #footer {
        top: 0;
    }

    #footer-cont {
        padding: 15vw 5vw 5vw 5vw;
    }

    #lower-footer {
        padding-top: 10vw;
    }

    #upper-footer {
        flex-direction: column;
        justify-content: center;
        gap: 10vw;
        padding: 0 5vw 0 5vw;
    }

    #upper-footer #luf {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #upper-footer #luf h2 {
        font-size: 7vw;
    }

    #upper-footer #ruf {
        width: 90%;
    }

    #upper-footer #ruf h3 {
        font-weight: 400;
        font-size: 18px;
    }

    #upper-footer #ruf h4 {
        font-weight: 500;
        font-size: 17px;
        color: #504A46;
        padding: 25px 0 10px 0px;
        border-bottom: 1px solid #504A46;
    }
}

/* For width 440px */
@media (max-width:440px) {
    #page-6 {
        height: 100vh;
        width: 100%;
    }

    #footer {
        top: 0;
    }

    #footer-cont {
        padding: 15vw 5vw 5vw 5vw;
        gap: 10vw;
    }

    #lower-footer {
        padding-top: 10vw;
    }

    #upper-footer {
        flex-direction: column;
        justify-content: center;
        gap: 10vw;
        padding: 0 5vw 0 5vw;
    }

    #upper-footer #luf {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #upper-footer #luf h2 {
        font-size: 9vw;
    }

    #upper-footer #ruf {
        width: 90%;
    }

    #upper-footer #ruf h3 {
        font-weight: 400;
        font-size: 18px;
    }

    #upper-footer #ruf h4 {
        font-weight: 500;
        font-size: 17px;
        color: #504A46;
        padding: 25px 0 10px 0px;
        border-bottom: 1px solid #504A46;
    }

    #lower-footer #cre-text h5 {
        font-size: 12px;
        font-weight: 500;
    }

    #lower-footer #cre-text a {
        font-size: 12px;
        font-weight: 500;
    }
}

/* Loader for the website -------------------------------------------------------------------------------------------------- */
#loader {
    height: 100%;
    width: 100%;
    background-color: #000000;
    position: fixed;
    z-index: 100;
    top: 0;
    transition: all ease 1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

#loader h1 {
    color: transparent;
    font-size: 7vw;
    background: linear-gradient(to right, #fe330ae4, #fe9c0a);
    background-clip: text;
    position: absolute;
    opacity: 0;
    animation-name: loader;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-timing-function: linear;
}

#loader h1:nth-child(2) {
    animation-delay: 2s;
}

#loader h1:nth-child(3) {
    animation-delay: 3s;
}


@keyframes loader {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* END OF CSS (by @curioushiva) -------------------------------------------------------------------------------------------- */