@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&family=Montserrat&family=Poppins:wght@300;400;500;900&family=Roboto:wght@300;500;700');

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

@media screen and (max-width: 768px) {

    html, body {
        scroll-behavior: smooth;
    }
    
    .navbar {
        height: 10vh;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: fixed;
        z-index: 5;
        width: 100%;
        box-shadow: 5px 0 5px black;
        background-color: white;
        overflow: hidden;
    }

    .navbar-icon {
        display: block;
        margin: -20px 30px 20px -30px;
        cursor: pointer;
    }

    .mobile-menu {
        height: fit-content;
        margin-top: 10vh;
        align-self: flex-end;
        background-color: #054e68;
        width: 40%;
        margin-left: 60%;
        position: fixed;
    }

    .mobile-menu-inactive {
        display: none;
    }

    .mobile-menu li {
        line-height: 2.5em;
        list-style: none;
        margin-left: 10%;
    }

    .mobile-menu li a {
        color: #fff;
        text-decoration: none;
    }

    .menus {
        display: none;
        list-style: none;
    }
    
    .logo-container {
        display: flex;
        align-items: center;
    }
    
    .logo {
        align-self: center;
        width: 50px;
        height: fit-content;
        margin-top: 10px;
    }
    
    .logo-text {
        margin-top: 20px;
        text-align: center;
    }
    
    .menus li {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 50px;
        margin-bottom: 10px;
    }
    
    .menus li a {
        color: #000;
        text-decoration: none;
        position: relative;
        padding: 0 5px;
    }
    
    .menus li:active a {
        color: #ff5722; /* Change to your desired active link color */
    }
    
    .menus li a::after {
        content: '';
        position: absolute;
        background-color: #F56D6D;
        height: 3px;
        width: 0%;
        left: 0;
        bottom: -9px;
        transition: .3s ease-in;
    }
    
    .menus li a:hover::after {
        width: 100%;
    }
    
    /* Homepage */
    .homepage {
        padding-top: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #eafefe;
        align-items: center;
        overflow: hidden;
    }
    
    .homepage h1 {
        text-align: center;
        font-size: 18px;
        color: #054e68;
        font-family: 'Lora', serif;
        font-weight: 700;
    }
      
    .homepage-container {
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 20px;
        align-items: center;
    }
    
    .homepage-left {
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f1efef;
        background-color: transparent;
        padding-left: 30px;
        text-align: center;
    }
    
    .para {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: #000;
    }
    
    .home-para-one {
        font-size: 16px;
    }
    
    .home-para-two {
        font-size: 24px;
    }
    
    .home-para-three {
        font-size: 68px;
        color: #FFD401;
        margin: -10px 0px;
    }
    
    .home-para-four {
        font-size: 14px;
    }
    
    .homepage-right {
        width: 80%;
    }
    
    .home-button-container {
        display: flex;
        flex-direction: row;
    }
    
    .contact-btn {
        background-color: #91fcfc;
        border: none;
        width: 152px;
        height: 44px;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        border-radius: 25px;
        margin-top: 20px;
        margin-right: 10px;
        cursor: pointer;
    }
    
    .contact-btn a {
        color: #054e68;
        text-decoration: none;
    }
    
    .homepage-image {
        width: 100%;
    }
    
    /* Home page end */
    
    /* service page */
    
    .services {
        padding: 10px 10px 10px 10px;
        scroll-behavior: smooth;
        background-image: url('./images/service_bg.webp');
        background-size: cover;
    }
    
    .services h2 {
        font-size: 18px;
        color: #054e68;
        font-family: 'Lora', serif;
        font-weight: 700;
    }
    
    .services-container {
        margin: 60px 10px 0 10px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url("./images/14381e96fa6c6375c69916eae785ae36.png");
        background-size: cover;
    }
    
    .service {
        width: 260px;
        height: 350px;
        padding: 10px 20px 20px 20px;
        margin-bottom: 60px;
        border: 1px solid rgb(87, 86, 86);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        background-color: #f8f8f8;
        overflow: hidden;
    }
    
    .service:hover {
        background-color: #002351;
        color: white;
    }
    
    .service:hover p {
        color: white;
    }
    
    .service:hover .service-head {
        color: white;
    }
    
    .service-head {
        font-size: 20px;
        margin: 10px 0;
        font-family: 'Lora', serif;
        color: #054e68;
    }

    .service-head-data {
        font-size: 18px;
    }
    
    .service-desc {
        color: #5d5c5c;
    }
    
    .service:hover .service-desc {
        position: relative;
        left: -110%;
    }
    
    .service-desc-after-branding {
        position: relative;
        left: -110%;
        top: -30%;
        line-height: 2em;
    }
    
    .service-desc-after-marketing {
        position: relative;
        left: -110%;
        top: -30%;
        line-height: 2em;
        font-size: 14px;
    }
    
    .service-desc-after-development {
        position: relative;
        left: -110%;
        top: -40%;
        line-height: 2em;
        font-size: 14px;
    }
    
    .service-desc-after-analysis {
        position: relative;
        left: -110%;
        top: -30%;
        line-height: 1.5em;
    }
    
    .service-desc-after-design {
        position: relative;
        left: -110%;
        top: -30%;
        line-height: 2em;
    }
    
    .service-desc-after-ui-ux {
        position: relative;
        left: -110%;
        top: -30%;
        line-height: 2em;
    }
    
    .service:hover .service-desc-after-branding {
        position: relative;
        left: 0;
        top: -40%;
    }
    
    .service:hover .service-desc-after-marketing {
        position: relative;
        left: 4%;
        top: -43%;
        padding-right: 0;
    }
    
    .service:hover .service-desc-after-development {
        position: relative;
        left: 4%;
        top: -40%;
    }
    
    .service:hover .service-desc-after-analysis {
        position: relative;
        left: 7%;
        top: -35%;
    }
    
    .service:hover .service-desc-after-design {
        position: relative;
        left: -3%;
        top: -43%;
    }
    
    .service:hover .service-desc-after-ui-ux {
        position: relative;
        left: 7%;
        top: -35%;
    }
    
    .service-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .service-flex2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .service-img {
        width: 100px;
        height: 100px;
    }
    
    .lottie-cylinder {
        margin: -220px -1150px 220px 1150px;
        mix-blend-mode: color-burn;
        display: none;
    }
    
    .whyus-sec {
        height: 500px;
    }
    
    .whyus-head {
        padding: 0 10px;
        margin-bottom: 20px;
        color: #054e68;
        font-family: 'Lora', serif;
        font-weight: 700;
    }
    
    .whyus-para {
        padding: 0 10px;
        margin: 0 0 50px 20px;
    }
    
    .whyus-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -420px;
    }
    
    .whyus-div {
        width: 80px;
        height: 80px;
        background-color: #127f92;  
        border-radius: 79% 21% 38% 62% / 54% 62% 38% 46%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .whyus-div1 {
        border-radius: 79% 21% 38% 62% / 54% 62% 38% 46%;
        margin: 20px 230px -20px 0;
    }
    
    .time {
        font-size: 12px; 
        margin: 20px 230px -20px 0;
    }
    
    .whyus-div2 {
        border-radius: 200px 200px 200px 200px;
        margin: 10px 0 5px 250px;
    }
    
    .team {
        font-size: 12px;
        margin-left: 250px;
    }
    
    .whyus-div3 {
        border-radius: 48% 52% 49% 51% / 30% 27% 73% 70%;
        margin-right: 250px;
        margin-bottom: 5px;
    
    }
    
    .quality {
        font-size: 12px;
        margin-right: 250px;
    }
    
    .whyus-div4 {
        border-radius: 48% 52% 67% 33% / 37% 55% 45% 63%;
        margin: -10px 0 10px 250px;
    }
    
    .support {
        font-size: 12px;
        margin-left: 250px;
    }
    
    .whyus {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .whyus-img {
        width: 80%;
    }
    
    .path-img {
        width: 100%;
        margin-top: 20px;
        display: none;
    }
    
    .ladder-img {
        height: 400px;
        margin-left: 30%;
    }
    
    .footer {
        background-color: #054e68;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 20px 10px 10px 10px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    .footer-bottom p {
        color: #d0cece;
    }
    
    .footer-top {
        text-align: center;
        font-family: Roboto;
    }
    
    .footer-bottom {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 20px;
    }
    
    .hr {
        width: 100%;
    }
    
    .social-icons img {
        width: 50px;
        height: 50px;
    }
    
    .footer-follow {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .footer-follow h2 {
        margin-bottom: 10px;
        font-size: 20px;
    }
    
    .footer-explore h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .footer-locate h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .footer-follow p {
        margin-bottom: 10px;
        font-size: 14px;
    }
    
    .footer-explore p {
        font-size: 14px;
        margin-bottom: 3px;
    }
    
    .footer-locate p {
        font-size: 14px;
        margin-bottom: 3px;
    }
    
    .projects {
        text-align: center;
        padding: 10px;
    }
    
    .projects-head {
        margin-bottom: 30px;
        text-align: left;
        color: #054e68;
        font-family: 'Lora', serif;
        font-weight: 700;
    }
    
    .project-category {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .projects-container {
        display: flex;
        flex-direction: column;
    }
    
    .projects-container-top {
        order: 1;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
    }
    
    .project {
        width: 100%;
        height: 400px;
        overflow: hidden;
        text-align: center;
    }
    
    .project-img {
        height: 180px;
        width: 95%;
        border: 8px solid white;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    
    .project-head {
        color: #000;
        margin-bottom: 20px;
        font-size: 20px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .project-description {
        color: #605F5F;
        font-size: 16px;
        margin-bottom: 20px;
        font-family: 'Montserrat', sans-serif;
        text-align: left;
    }
    
    .project-link {
        color: #000;
        font-size: 16px;
        text-decoration: none;
    }
    
    .project-controls-container {
        order: 0;
        width: 95%;
        display: flex;
        text-align: center;
        justify-content: center;
    }
    
    .project-control-button {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin-right: 20px;
        border: none;
        box-shadow: 5px 0 2px black;
    }
    
    .category-filter {
        color: #000;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        border: none;
        margin-right: 12px;
        cursor: pointer;
        transition: .5s ease-in;
        background-color: transparent;
        font-family: 'Averia Serif Libre', cursive;
    }
    
    .category-filter:hover {
        color: #054e68;
        border-bottom: 1px solid #000;
    }

    .about-us {
        padding: 20px 20px;
    }
    
    .about-us h2 {
        margin-bottom: 30px;
        text-align: left;
        color: #054e68;
        font-family: 'Lora', serif;
        font-weight: 700;
    }

    .review-control-btn {
        width: fit-content;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
    
    .testimonials {
        padding: 20px;
        margin-top: 80px;
    }
    
    .testimonials h2 {
        text-align: left;
        margin: 20px 0 50px 0;
        font-family: sans-serif;
        color: #054e68;
    }
    
    .reviews {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: center;
    }
    
    .reviews img {
        width: 100px;
        height: 100px;
        border: 3px solid orange;
        border-radius: 55px;
        margin-bottom: 30px;
    }
    
    .contact-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    .contact-form {
        display: flex;
        flex-direction: column;
        margin-top: 120px;
        padding: 10px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    .map {
        width: 100%;
        height: 450px;
    }
    
    .contact-form h2 {
        margin-bottom: 30px;
        color: #054e68;
        font-family: 'Lora', serif;
        font-weight: 700;
    }

    .message {
        width: 100%;
    }
    
    .form {
        padding: 10px;
    }
    
    .form label {
        color: #0b4e4e;
        margin-bottom: 5px;
    }
    
    .form div {
        display: flex;
        margin: 0 30px 10px 0;
    }
    
    .form div div {
        display: flex;
        flex-direction: column;
    }
    
    .form div div input {
        border: none;
        border-bottom: 1px solid black;
    }
    
    .copyright {
        font-size: 12px;   
    }
    
    .footer-logo {
        width: 40px;
        margin-top: -10px;
    }
}

/* Desktop styles */

@media screen and (min-width: 769px) {
html, body {
    scroll-behavior: smooth;
}

.navbar {
    height: 10vh;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: fixed;
    z-index: 5;
    width: 100%;
    box-shadow: 5px 0 5px black;
    background-color: white;
}

.navbar-icon {
    visibility:hidden;
}

.mobile-menu {
    visibility: hidden;
}

.menus {
    display: flex;
    list-style: none;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-bottom: -15px;
}

.logo {
    align-self: center;
    width: 80px;
    height: 80px;
    margin-top: 50px;
}

.logo-text {
    margin-top: 30px;
    text-align: center;
}

.menus li {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: 50px;
    margin-bottom: 10px;
}

.menus li a {
    color: #000;
    text-decoration: none;
    position: relative;
    padding: 0 5px;
}

.menus li:active a {
    color: #ff5722; /* Change to your desired active link color */
  }

.menus li a::after {
    content: '';
    position: absolute;
    background-color: #F56D6D;
    height: 3px;
    width: 0%;
    left: 0;
    bottom: -9px;
    transition: .3s ease-in;
}

.menus li a:hover::after {
    width: 100%;
}

.homepage {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(#eafefe, #ffffff);
    align-items: center;
    overflow: hidden;
    margin-top: -70px;
}

.homepage h1 {
    margin-bottom: 20px;
    margin-top: 30px;
    color: #054e68;
    font-family: 'Lora', serif;
    font-weight: 700;
}

.homepage-container {
    width: 90%;
    display: flex;
    justify-content: center;
    padding: 20px 20px;
    align-items: center;
}


.homepage-left {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: #f1efef;
    background-color: transparent;
    padding-left: 30px;
}

.homepage-right {
    width: 40%;
}

.para {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #000;
}

.home-para-one {
    font-size: 26px;
}

.home-para-two {
    font-size: 44px;
}

.home-para-three {
    font-size: 108px;
    color: #FFD401;
    margin: -10px 0px;
}

.home-para-four {
    font-size: 20px;
}

.contact-btn {
    background-color: #91fcfc;
    border: none;
    width: 202px;
    height: 44px;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 25px;
    margin-top: 50px;
    margin-right: 60px;
    cursor: pointer;
}

.contact-btn a {
    color: #054e68;
    text-decoration: none;
}

.homepage-image {
    width: 500px;
    height: 450px;
}

.services {
    padding: 10px 40px 150px 40px;
    overflow: hidden;
    height: 1000px;
    scroll-behavior: smooth;
    background-image: url('./images/service_bg.webp');
    background-size: cover;
}

.services h2 {
    color: #054e68;
    font-family: 'Lora', serif;
    font-weight: 700;
}

.services-container {
    margin: 60px 40px 0 40px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    background-image: url("./images/14381e96fa6c6375c69916eae785ae36.png");
    background-size: cover;
}

.service {
    width: 260px;
    height: 356px;
    padding: 10px 20px 20px 20px;
    margin-bottom: 60px;
    border: 1px solid rgb(87, 86, 86);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #f8f8f8;
    overflow: hidden;
}

.service:hover {
    background-color: #002351;
    color: white;
}

.service:hover p {
    color: white;
}

.service:hover .service-head {
    color: white;
}

.service-head {
    font-size: 20px;
    margin: 10px 0 20px 0;
    font-family: 'Lora', serif;
    font-weight: 400;
    color: #054e68;
}

.service-head-data {
    font-size: 18px;
}

.service-desc {
    color: #5d5c5c;
    font-size: 16px;
}

.service:hover .service-desc {
    position: relative;
    left: -110%;
}

.service-desc-after-branding {
    position: relative;
    left: -110%;
    top: -30%;
    line-height: 2em;
}

.service-desc-after-marketing {
    position: relative;
    left: -110%;
    top: -30%;
    line-height: 2em;
}

.service-desc-after-development {
    position: relative;
    left: -110%;
    top: -30%;
    line-height: 2em;
}

.service-desc-after-analysis {
    position: relative;
    left: -110%;
    top: -30%;
    line-height: 1.5em;
}

.service-desc-after-design {
    position: relative;
    left: -110%;
    top: -30%;
    line-height: 2em;
}

.service-desc-after-ui-ux {
    position: relative;
    left: -110%;
    top: -30%;
    line-height: 2em;
}

.service:hover .service-desc-after-branding {
    position: relative;
    left: 0;
    top: -30%;
}

.service:hover .service-desc-after-marketing {
    position: relative;
    left: 3%;
    top: -33%;
    padding-right: 0;
}

.service:hover .service-desc-after-development {
    position: relative;
    left: 0;
    top: -30%;
}

.service:hover .service-desc-after-analysis {
    position: relative;
    left: 4%;
    top: -30%;
}

.service:hover .service-desc-after-design {
    position: relative;
    left: 0;
    top: -34%;
}

.service:hover .service-desc-after-ui-ux {
    position: relative;
    left: 5%;
    top: -27%;
}

.service-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-flex2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: center;
}

.service-img {
    width: 100px;
    height: 85px;
}

.lottie-cylinder {
    margin: -220px -1150px 220px 1150px;
    mix-blend-mode: color-burn;
}

.whyus-sec {
    height: 500px;
}

.whyus-head {
    padding: 0 40px;
    margin-bottom: 20px;
    color: #054e68;
    font-family: 'Lora', serif;
    font-weight: 700;
}

.whyus-para {
    padding: 0 40px;
    margin: 0 0 50px 20px;
}

.whyus-container {
    display: flex;
    justify-content: space-between;
    margin-top: -200px;
}

.whyus-div {
    width: 150px;
    height: 150px;
    background-color: #127f92;  
    border-radius: 79% 21% 38% 62% / 54% 62% 38% 46%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.whyus-div1 {
    border-radius: 79% 21% 38% 62% / 54% 62% 38% 46%;
    margin: 0 -50px 0px 50px;
}

.time {
    margin: 0 -50px 0px 50px; 
}

.whyus-div2 {
    border-radius: 200px 200px 200px 200px;
    margin: -10px -110px 10px 110px;
    overflow: hidden;
}

.team {
    margin: 15px -102px 0px 102px;
}

.whyus-div3 {
    border-radius: 48% 52% 49% 51% / 30% 27% 73% 70%;
    margin: 50px 0px -50px 0;
}

.quality {
    margin: 60px 0px -60px 0;
}

.whyus-div4 {
    border-radius: 48% 52% 67% 33% / 37% 55% 45% 63%;
    margin: 50px 50px -50px -50px;
}

.support {
    margin: 60px 60px -60px -60px;
}

.whyus {
    text-align: center;
}

.whyus-img {
    width: 80%;
    height: fit-content;
}

.path-img {
    width: 100%;
    height: fit-content;
    margin-top: 20px;
}

.ladder-img {
    display: none;
}

.footer {
    background-color: #054e68;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px 10px 40px;
}

.footer-bottom p {
    color: #d0cece;
}

.footer-top {
    text-align: center;
}

.footer-bottom {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.hr {
    width: 85%;
}

.social-icons img {
    width: 50px;
    height: 50px;
}

.footer-follow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-follow h2 {
    margin-bottom: 10px;
    font-size: 20px;
}

.footer-explore h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.footer-locate h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.footer-follow p {
    margin-bottom: 10px;
    font-size: 14px;
}

.footer-explore p {
    font-size: 14px;
    margin-bottom: 3px;
}

.footer-locate p {
    font-size: 14px;
    margin-bottom: 3px;
}

.projects {
    text-align: center;
    padding: 40px;
}

.projects-head {
    margin-bottom: 30px;
    text-align: left;
    color: #054e68;
    font-family: 'Lora', serif;
    font-weight: 700;
}

.project-category {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.projects-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f1efef;
    padding: 20px;
}

.projects-container-top {
    width: 95%;
    display: flex;
    justify-content: center;
    padding: 20px;
    margin-bottom: -30px;
}

.project {
    width: 33%;
    height: 508px;
    margin-right: 20px;
    overflow: hidden;
    text-align: left;
}

.project-img {
    height: 50%;
    width: 95%;
    border: 8px solid white;
    border-radius: 5px;
    margin-bottom: 20px;
}

.project-head {
    color: #000;
    margin-bottom: 20px;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.project-description {
    color: #605F5F;
    font-size: 16px;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.project-link {
    color: #000;
    font-size: 16px;
    text-decoration: none;
}

.project-controls-container {
    display: flex;
    text-align: center;
    justify-content: center;
}

.project-control-button {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 20px;
    border: none;
    box-shadow: 5px 0 5px black;
}

.category-filter {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    border: none;
    margin-right: 72px;
    cursor: pointer;
    transition: .5s ease-in;
    background-color: transparent;
}

.category-filter:hover {
    color: #054e68;
    border-bottom: 1px solid #000;
}

.review-control-btn {
    width: fit-content;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.testimonials {
    padding: 40px;
}

.testimonials h2 {
    text-align: left;
    margin: 20px 0 50px 0;
    color: #054e68;
}

.reviews {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: center;
}

.reviews img {
    width: 100px;
    height: 100px;
    border: 3px solid orange;
    border-radius: 55px;
    margin-bottom: 30px;
}

.contact-container {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 100px;
}

.contact-form {
    padding: 5px 40px 40px 40px;
}

.map-container {
    align-self: flex-end;
    padding: 10px;
}

.map {
    width: 600px;
    height: 450px;
}

.contact-form h2 {
    margin-bottom: 30px;
    color: #054e68;
    font-family: 'Lora', serif;
    font-weight: 700;
}

.form {
    padding: 30px;
    width: 50%;
}

.form label {
    color: #0b4e4e;
    margin-bottom: 5px;
}

.form div {
    display: flex;
    margin: 0 30px 10px 0;
}

.form div div {
    display: flex;
    flex-direction: column;
}

.form div div input {
    border: none;
    border-bottom: 1px solid black;
}

.copyright {
    font-size: 12px;   
}

.footer-logo {
    width: 40px;
    height: fit-content;
    margin: -10px 0 0 0;
}
}


.video {
    width: 210px;
}


.thankyou-bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}