:root {
    --primary: #1c1c1e;
    --secondary: #FFE55C;
}

.loadingScreen {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--primary);
    color: var(--secondary);
    padding: 4rem;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
}

.loadingScreen h1 {
    font-weight: 100;
    font-size: 5rem;
    letter-spacing: 0.2rem;
}

.loadingScreen p {
    font-weight: 100;
    letter-spacing: 0.2rem;
}

.mainbody {
    height: 100vh;
    width: 100%;
    background-image: url("../gallery/pexels-mario-cuadros-3694057.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color: #1c1c1e8c;
    background-blend-mode: multiply;
    background-attachment: fixed;
}

.overlaything {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent 20%, #1c1c1e);
    height: 100vh;
    width: 100%;
}

.greviewtab {
    background-color: var(--primary);
    height: auto;
    width: auto;
}

.textdiv {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
}

.reviews h1{
    color: var(--secondary);
    font-weight: 100;
    font-size: 3rem;
    text-align: center;
    padding: 1rem;
}

.reviews p {
    color: white;
    text-align: center;
    font-weight: 100;
}

.reviews p span {
    border-bottom: 1px solid var(--secondary);
}

.topnav {
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 3vh 0;
}

/* Style the links inside the navigation bar */
.topnav a:first-child {
    display: block;
    text-align: center;
    padding: 2vh 4vh;
    margin: 0 2px;
    text-decoration: none;
    font-size: 17px;
    transition: 0.2s ease-in-out;
}

/* Change the color of links on hover */
.topnav a:not(:last-child):hover {
    background: white;
    color: black;
}

.topnav .connect {
    text-align: center;
    padding: 2vh 4vh;
    margin: 0 2px;
    text-decoration: none;
    font-size: 17px;
    transition: 0.2s ease-in-out;
    position: absolute;
    right: 10vh;
    color: var(--primary);
    background-color: var(--secondary);
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    color: var(--secondary);
    display: none;
}

.logoimg {
    height: 15vh;
    width: auto;
}

.topnav a:first-child:hover {
    background: none;
}

.intro {
    height: 80vh;
    width: 100%;
    font-weight: 100;
    position: relative;
}

.artcle {
    position: absolute;
    padding: 0 5vh;
    bottom: 15vh;
}

.intro h1 {
    font-weight: 100;
    font-size: 5rem;
    color: var(--secondary);
}

.intro p {
    font-size: 1.5rem;
    color: whitesmoke;
    padding: 1vh;
}

.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 2s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

/* title styles */
.home-title {
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 1.2;
}

.home-title::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--secondary);
    animation: a-ltr-after 2s cubic-bezier(.77, 0, .18, 1) forwards;
    transform: translateX(-101%);
}

.home-title::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    animation: a-ltr-before 2s cubic-bezier(.77, 0, .18, 1) forwards;
    transform: translateX(0);
}

.home-title:nth-of-type(1)::before,
.home-title:nth-of-type(1)::after {
    animation-delay: 1s;
}

.home-title:nth-of-type(2)::before,
.home-title:nth-of-type(2)::after {
    animation-delay: 1.5s;
}

@keyframes a-ltr-after {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(101%)
    }
}

@keyframes a-ltr-before {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(200%)
    }
}

.artcle .btn a {
    background: var(--secondary);
    width: fit-content;
    margin: 0 auto;
    color: var(--primary);
    font-weight: 100;
    padding: 2vh;
}

.artcle .btn:hover {
    background-color: var(--secondary);
    color: var(--primary);
}

.artcle a {
    text-decoration: none;
    color: var(--primary);
}

.aboutbody {
    height: 75vh;
    width: 100%;
    position: relative;
    background-image: url("../gallery/pexels-navneet-shanu-672630.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #1c1c1ef1;
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-position: center;
}

.aboutbody .secondary {
    position: absolute;
    height: 75vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animatedsvg {
    width: 100%;
    height: 75vh;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
}

.displaycontainer {
    color: var(--secondary);
    display: flex;
}

.text {
    font-size: 5rem;
    color: var(--secondary);
    font-weight: 100;
}

.typed-cursor {
    font-size: 5rem;
    color: var(--white);
    font-weight: 100;
}

.details {
    background-color: var(--primary);
    padding-bottom: 7rem;
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: var(--secondary);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

/* Container around content */
.timelinecontainer {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* The circles on the timeline */
.timelinecontainer::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: var(--secondary);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.left {
    left: 0;
}

/* Place the container to the right */
.right {
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid var(--secondary);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--secondary);
}

.left::after {
    right: -12px;
}

/* Add arrows to the right container (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid var(--secondary);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--secondary) transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
    left: -13px;
}

.details h1 {
    color: var(--secondary);
    text-align: center;
    padding: 2rem;
    font-weight: 600;
    font-size: 3rem;
}

/* The actual content */
.content {
    padding: 20px 30px;
    background: transparent;
    border: 3px solid var(--secondary);
    position: relative;
    border-radius: 6px;
}

.content h2 {
    font-weight: 100;
    color: white;
}

.content h2 span {
    font-size: 3rem;
    font-weight: 600;
    color: var(--secondary);
}

.projects {
    background-color: var(--primary);
    padding: 3rem;
    position: relative;
}

.pheader {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    text-align: center;
}

.projects h1 {
    color: var(--secondary);
    text-align: center;
    font-size: 3rem;
    font-weight: 500;
}

.pheader p {
    color: gray;
}

.gallery {
    line-height: 0;
    -webkit-column-count: 3;
    /* split it into 5 columns */
    -webkit-column-gap: 5px;
    /* give it a 5px gap between columns */
    -moz-column-count: 3;
    -moz-column-gap: 5px;
    column-count: 3;
    column-gap: 5px;
}

.gallery img {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
    /* to match column gap */
    background-color: var(--secondary);
    border: 2px solid var(--secondary);
    border-radius: 10px;
    padding: 2px;
}

.ourcompany h1 {
    color: var(--secondary);
    font-size: 4rem;
    padding: 3rem;
    font-weight: 600;
    text-align: center;
}

.bgimg {
    background-image: url("../gallery/img10.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--primary);
    background-blend-mode: multiply;
    height: auto;
    background-attachment: fixed;
}

.bgimg p {
    color: white;
    font-weight: 100;
    font-size: 1.1rem;
    padding: 0 2rem;
}

.ourcompany .bgimg .btn {
    background-color: var(--secondary);
    padding: 1rem;
    margin: 0 2rem;
    border-radius: 0;
}

.ourcompany .bgimg .btn a {
    color: var(--primary);
    text-decoration: none;
}

/* Slideshow container */
.slideshow-container {
    max-width: 500px;
    position: relative;
    margin: auto;
}

/* Make the images invisible by default */
.Containers {
    display: none;
}

.Containers img {
    height: auto;
    width: 500px;
}

/* Caption Info */
.Info {
    color: var(--secondary);
    background-color: #1c1c1ed0;
    border-radius: 4rem;
    font-size: 16px;
    font-weight: 100;
    padding: 10px 14px;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    text-align: center;
}

/* Worknumbering (1/3 etc) */
.MessageInfo {
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 14px;
    position: absolute;
    top: 0;
}

/* Faint animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade {
    0% {
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
    }
}

.ourcompanymobile {
    height: auto;
}

.ourcompanymobile h1 {
    color: var(--secondary);
    font-size: 4rem;
    text-align: center;
    padding: 2rem 0;
}

.ourcompanymobile .btn {
    background-color: var(--secondary);
    position: relative;
    left: 2rem;
    bottom: 20px;
    padding: 0.7rem;
    border-radius: 0;
}

.ourcompanymobile .btn a {
    color: var(--primary);
    text-decoration: none;
}

.testimonials {
    padding: 1rem;
    background-color: var(--primary);
}

.testimonials h1 {
    color: var(--secondary);
    font-weight: 600;
    padding: 4rem 0;
    font-size: 2.8rem;
    text-align: center;
}

.container3neo {
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
}

.slidingprojects {
    display: flex;
    height: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.slidingprojects::-webkit-scrollbar {
    display: none;
}

.slidingprojects .projects .card {
    font-weight: 100;
    background: #1d1f20;
    border: 2px solid var(--secondary);
    color: whitesmoke;
    height: 40vh;
    min-height: 40vh;
    width: auto;
    max-width: 30rem;
}

.slidingprojects .projects {
    flex: 0 0 auto;
}

.slidingprojects .card-title {
    color: var(--secondary);
}

.slidingprojects .card-body a {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.ratings span {
    font-size: 5rem;
    padding: 0 1rem;
    color: white;
}

.ratings {
    display: flex;
    justify-content: center;
    align-items: center;
    color: gray;
}

.arrows {
    background: none;
    border: none;
    padding: 2rem 0;
    color: rgba(255, 255, 255, 0.5);
    transition: 0.2s linear;
    position: relative;
    float: right;
}

.arrows:hover {
    color: var(--secondary);
}

footer {
    background: var(--primary);
    color: whitesmoke;
    font-weight: 100;
}

footer h6 {
    color: var(--secondary);
}

.mainbody2 {
    min-height: 100vh;
    width: 100%;
    background-color: var(--primary);
}

.theform {
    background-color: rgba(128, 128, 128, 0.336);
    padding: 4rem;
    display: flex;
    justify-content: center;
    border-radius: 20px;
}

@media screen and (max-width: 280px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
        font-size: 4vh;
        padding: 3vh 2vh;
    }

    .topnav {
        display: block;
    }

    .logoimg {
        height: 10vh;
    }

    .artcle {
        position: relative;
        left: 0;
        bottom: 0;
        padding: 0 1vh;
    }

    .intro {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .intro h1 {
        font-size: 2rem;
    }

    .intro p {
        font-size: 1rem;
        padding: 0;
    }

    .text {
        font-size: 2rem;
    }

    .typed-cursor {
        font-size: 2rem;
    }

    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .timelinecontainer {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .timelinecontainer::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .left::after,
    .right::after {
        left: 18px;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }

    .content h2 span {
        font-size: 1.4rem;
    }

    .content h2 {
        font-size: 1.2rem;
    }

    .projects {
        padding: 1rem;
    }

    .gallery {
        line-height: 0;
        -webkit-column-count: 2;
        /* split it into 5 columns */
        -webkit-column-gap: 5px;
        /* give it a 5px gap between columns */
        -moz-column-count: 2;
        -moz-column-gap: 5px;
        column-count: 2;
        column-gap: 5px;
    }
}

@media screen and (max-width: 500px) and (min-width: 300px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
        font-size: 4vh;
        padding: 3vh 2vh;
    }

    .topnav {
        display: block;
    }

    .logoimg {
        height: 10vh;
    }

    .artcle {
        position: relative;
        left: 0;
        bottom: 0;
        padding: 0 1vh;
    }

    .intro {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .intro h1 {
        font-size: 2.5rem;
    }

    .intro p {
        font-size: 1.3rem;
        padding: 0;
    }

    .artcle .btn {
        margin-top: 5vh;
        font-size: 2vh;
    }

    .text {
        font-size: 3rem;
    }

    .typed-cursor {
        font-size: 3rem;
    }

    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .timelinecontainer {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .timelinecontainer::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .left::after,
    .right::after {
        left: 18px;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }

    .content h2 span {
        font-size: 2.3rem;
    }

    .content h2 {
        font-size: 2.2rem;
    }

    .projects {
        padding: 1rem;
    }

    .gallery {
        line-height: 0;
        -webkit-column-count: 1;
        /* split it into 5 columns */
        -webkit-column-gap: 5px;
        /* give it a 5px gap between columns */
        -moz-column-count: 1;
        -moz-column-gap: 5px;
        column-count: 1;
        column-gap: 5px;
    }

}

@media screen and (max-width: 1000px) and (min-width: 500px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
        font-size: 4vh;
        padding: 3vh 2vh;
    }

    .topnav {
        display: block;
    }

    .logoimg {
        height: 10vh;
    }

    .artcle {
        position: relative;
        left: 0;
        bottom: 0;
        padding: 0 1vh;
    }

    .intro {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .intro h1 {
        font-size: 4rem;
    }

    .intro p {
        font-size: 2rem;
        padding: 0;
    }

    .artcle .btn {
        margin-top: 5vh;
        font-size: 2rem;
    }

    .topnav.responsive a {
        font-size: 2rem;
    }

    .gallery {
        line-height: 0;
        -webkit-column-count: 2;
        /* split it into 5 columns */
        -webkit-column-gap: 5px;
        /* give it a 5px gap between columns */
        -moz-column-count: 2;
        -moz-column-gap: 5px;
        column-count: 2;
        column-gap: 5px;
    }

    .bgimg {
        position: relative;
    }

    .bgimg p {
        font-size: 1.5rem;
    }

    .slideshow-container {
        position: absolute;
        bottom: 1rem;
        left: 0;
        right: 0;
        margin: auto;
    }

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 820px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 3vh;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #0b0b0c;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--secondary);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ffe45cbe;
}