html {
    margin: 0%;
    padding: 0%;
}

body {
    margin: 0%;
    padding: 0%;
    font-family: "Poppins";
    background-color: #F3F3F3;
}

h1 {
    font-size: 3.3vw;
    color: #0033D9;
}

h2 {
    font-size: 2vw;
    color: #0033D9;
}

h3 {
    font-size: 1.25vw;
    color: #0033D9;
}

p {
    font-size: 1vw;
    font-weight: 300
}

a {
    text-decoration: none;
}

nav {
    margin-top: 1vw;
    text-align: center;
    font-size: 1vw;
    font-weight: 400;
}

nav a{
    color: #0033D9;
}

.hero-section {
    margin: auto;
    margin-top: 20vw;
    margin-bottom: 10vw;
    width: 80vw;
}

.hero-section h1{
    width: 50vw;
}

.hero-section hr{
    border-color: #000;
}

.hero-section p{
    width: 40vw;
    font-size: 1.25vw;
    text-align: justify;
}

.service-section {
    margin-top: 0vw;
    margin-bottom: 20vw;
    height: fit-content;
}

.service-section-verticals {
    left: 0%;
    right: 0%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 80vw;
    position: absolute;
    z-index: 0;
}

.service-section-gradient {
    position: absolute;
    width: 100vw;
    height: 110vw;
    background: linear-gradient(to bottom, #F3F3F3, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #F3F3F3);
    z-index: 1;
}

.service-section-verticals div{
    height: 110vw;
}

.service-section-verticals div:nth-child(1){
    margin-left: 0vw;
    width: 25vw;
    border-left: 1px #0033D9 dashed;
    border-right: 1px #0033D9 dashed;
}

.service-section-verticals div:nth-child(2){
    margin-left: auto;
    margin-right: 0vw;
    border-right: 1px #0033D9 dashed;
}

.service-section-info-section {
    position: relative;
    padding-top: 2vw;
    z-index: 10;
}

.service-section-info-data {
    left: 0%;
    right: 0%;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px #0033D9 dashed;
}

.service-section-info-data-card {
    margin: auto;
    margin-top: 10vw;
    width: 80vw;
    display: flex;
}

.service-section-info-data-card h3{
    margin: 0%;
    width: 20vw;
    font-size: 2vw;
    padding-left: 2.5vw;
    border-left: 8px #0033D9 solid;
}

.service-section-info-data-card p{
    text-align: justify;
    margin: 0%;
    margin-left: auto;
    margin-right: 0vw;
    padding-right: 1vw;
    width: 30vw;
    border-bottom: 8px #0033D9 solid;
}

.case-study-section {
    margin: auto;
    width: 80vw;
}

.case-study-card-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.case-study-card {
    margin-bottom: 2.5vw;
    padding-bottom: 2.5vw;
    border-bottom: 1px #0033D9 dashed;
    box-shadow: -10px -12px 10px 0px rgba(0,51,217,0.15), 14px 12px 30px 0px rgba(0,51,217,0.15);
    transition: 2s;
}

.case-study-card-thumbnail-long {
    background-image: url("../Assets/Images/1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 37.5vw;
    height: 40vw;
    z-index: 0;
}

.case-study-card-thumbnail-short {
    background-image: url("../Assets/Images/1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 37.5vw;
    height: 30vw;
}

#thumbnail-one {
    background-image: url("../Assets/Images/index-page/Veloura_Thumbnail_2.png");
}

#thumbnail-two {
    background-image: url("../Assets/Images/index-page/Brew_Heaven_Thumbnail.png");
}

#thumbnail-three {
    background-image: url("../Assets/Images/index-page/Luminara_Thumbnail.png");
}

#thumbnail-four {
    background-image: url("../Assets/Images/index-page/Everleaf_Solutions_Thumbnail.png");
}

#thumbnail-five {
    background-image: url("../Assets/Images/index-page/Yfj_Thumbnail.png");
}

.case-study-card-thumbnail-wide {
    background-image: url("../Assets/Images/1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: right;
    width: 80vw;
    height: 20vw;
}

.case-study-card-thumbnail-overlay {
    position: relative;
    margin-left: 95%;
    margin-top: 2%;
    width: 2.5vw;
}

.case-study-card-thumbnail-overlay-compact {
    position: relative;
    margin-left: 90%;
    margin-top: 4%;
    width: 2.5vw;
}

.case-study-card-info {
    margin-top: 2vw;
    margin-right: 1vw;
    margin-left: 1vw;
}

.case-study-card-info-flex {
    margin-bottom: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: fit-content;
}

.case-study-card-info h3{
    margin: 0%;
    font-size: 2.5vw;
    color: #000;
    font-weight: 500;
}

.case-study-card p{
    margin: 0%;
    font-size: 1.25vw;
    color: #949494;
    font-weight: 500;
}

.case-study-card-info-flex img{
    width: 2.5vw;
    height: 2.5vw;
}

.case-study-card-section-one{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.case-study-card-section-two{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about-section {
    margin: auto;
    width: 80vw;
}

.about-section h2 {
    font-size: 5vw;
    font-weight: 600;
    text-align: center;
    margin-top: 5vw;
    margin-bottom: 3vw;
}

.about-section-container {
    display: flex;
    justify-content: space-between;
}

.about-section-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2vw;
    width: 18vw;
    box-shadow: -10px -12px 10px 0px rgba(0,51,217,0.15), 14px 12px 30px 0px rgba(0,51,217,0.15);
}

.about-section-card p{
    padding-bottom: 2.5vw;
    text-align: justify;
    
}

.about-section-card hr{
    width: 18vw;
    border-color: #0033D9;
}

.contact-section {
    margin: auto;
    margin-top: 15vw;
    margin-bottom: 5vw;
    width: 80vw;
    display: flex;
    justify-content: space-between;
}

.contact-section-info {
    width: 30vw;
}

.contact-section-info span{
    color: #0033D9;
    font-size: 6.66vw;
    font-weight: 400;
}

.contact-section-info-socials img{
    background-color: none;
    margin: 0.5vw;
    width: 3vw;
    border-radius: 0.8vw;
    /*box-shadow: -10px -12px 10px 0px rgba(0,51,217,0.05), 14px 12px 30px 0px rgba(0,51,217,0.15);*/
}

.contact-section-form {
    width: 30vw;
}

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

.contact-form input{
    margin-bottom: 2.5vw;
    background-color: #F3F3F3;
    color: #949494;
    font-size: 1vw;
    font-weight: 400;
    height: 2.5vw;
    border: none;
    border-bottom: 2px #0033D9 solid;
}

.contact-form button{
    margin-bottom: 2.5vw;
    background-color: #0033D9;
    color: #FFFFFF;
    font-size: 1vw;
    font-weight: 400;
    height: 3vw;
    border: none;
}

.footer-section {
    margin: auto;
    margin-top: 10vw;
    width: 80vw;
}

.footer-section-info {
    margin: auto;
    margin-left: 50vw;
    width: fit-content;
}

.footer-section-info a{
    color: #000;
    font-size: 1vw;
    font-weight: 300;
}

.footer-section-info a:hover{
    color: #0033D9;
    font-size: 1vw;
    font-weight: 500;
}

.footer-section-info-contact {
    display: flex;
    flex-direction: column;
    margin-top: 1vw
}

.footer-section-info-social {
    display: flex;
    flex-direction: column;
    margin-top: 1.5vw
}

.footer-section-info span{
    font-size: 1vw;
    font-weight: 500;
}

.footer-section-base{
    margin-top: 5vw;
    padding: 0%;
    width: 80vw;
    border-bottom: 4px #0033D9 solid;
    margin-bottom: 2.5vw;
}

.footer-section-base span{
    margin: 0%;
    padding: 0%;
    width: 80vw;
    font-size: 6.66vw;
    font-weight: 300;
}

@media only screen and (max-width: 600px) {
    html {
        margin: 0%;
        padding: 0%;
    }
    
    body {
        margin: 0%;
        padding: 0%;
        font-family: "Poppins";
        background-color: #F3F3F3;
    }
    
    h1 {
        font-size: 6.4vw;
        color: #0033D9;
    }
    
    h2 {
        font-size: 12.8vw;
        color: #0033D9;
    }
    
    h3 {
        font-size: 6.4vw;
        color: #0033D9;
    }
    
    p {
        font-size: 3.2vw;
        font-weight: 300
    }
    
    a {
        text-decoration: none;
    }
    
    nav {
        margin-top: 1vw;
        text-align: center;
        font-size: 20px;
        font-weight: 300;
    }
    
    .hero-section {
        margin: auto;
        margin: 5vw;
        margin-top: 20vw;
        margin-bottom: 20vw;
        width: 90vw;
    }
    
    .hero-section h1{
        width: 90vw;
    }
    
    .hero-section hr{
        border-color: #000;
    }
    
    .hero-section p{
        width: 90vw;
        font-size: 3.2vw;
        font-weight: 300;
        text-align: justify;
    }
    
    .service-section {
        margin-top: 20vw;
        margin-bottom: 40vw;
        height: fit-content;
    }
    
    .service-section-verticals {
        left: 0%;
        right: 0%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        width: 90vw;
        position: absolute;
        z-index: 0;
    }
    
    .service-section-gradient {
        position: absolute;
        width: 100vw;
        height: 400vw;
        background: linear-gradient(to bottom, #F3F3F3, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #F3F3F3);
        z-index: 1;
    }
    
    .service-section-verticals div{
        height: 400vw;
    }
    
    .service-section-verticals div:nth-child(1){
        margin-left: 0vw;
        width: 90vw;
        border-left: 1px #0033D9 dashed;
        border-right: 0px;
    }
    
    .service-section-verticals div:nth-child(2){
        margin-left: auto;
        margin-right: 0vw;
        border-right: 0px;
    }
    
    .service-section-info-section {
        position: relative;
        padding-top: 2vw;
        z-index: 10;
    }
    
    .service-section-info-data {
        left: 0%;
        right: 0%;
        margin-left: auto;
        margin-right: auto;
        border-bottom: 0px;
    }
    
    .service-section-info-data-card {
        margin: auto;
        margin-top: 10vw;
        width: 90vw;
        display: flex;
        flex-direction: column;
    }
    
    .service-section-info-data-card h3{
        margin: 0%;
        width: 90vw;
        font-size: 6.4vw;
        padding-left: 2.5vw;
        border-left: 8px #0033D9 solid;
        border-bottom: 1px #0033D9 dashed;
    }
    
    .service-section-info-data-card p{
        text-align: justify;
        margin: 0%;
        margin-top: 10vw;
        padding-right: 5vw;
        padding-left: 5vw;
        padding-bottom: 5vw;
        width: 85vw;
        border-bottom: 8px #0033D9 solid;
    }

    .case-study-section {
        margin: auto;
        width: 90vw;
    }
    
    .case-study-card-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .case-study-card {
        margin-bottom: 10vw;
        padding-bottom: 10vw;
        border-bottom: 1px #0033D9 dashed;
        transition: 2s;
    }
    
    #thumbnail-one {
        background-image: url("../Assets/Images/index-page/Veloura_Thumbnail_1.png");
    }

    .case-study-card-thumbnail-long {
        width: 90vw;
        height: 60vw;
    }
    
    .case-study-card-thumbnail-short {
        width: 90vw;
        height: 60vw;
    }
    
    .case-study-card-thumbnail-wide {
        width: 90vw;
        height: 60vw;
    }
    
    .case-study-card-info {
        margin-top: 2vw;
        margin-right: 5vw;
        margin-left: 5vw;
    }
    
    .case-study-card-info-flex {
        margin-bottom: 1vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: fit-content;
    }
    
    .case-study-card-info h3{
        margin: 0%;
        font-size: 9.6vw;
        color: #000;
        font-weight: 500;
    }
    
    .case-study-card p{
        margin: 0%;
        font-size: 3.7vw;
        color: #949494;
        font-weight: 500;
    }
    
    .case-study-card-thumbnail-overlay {
        position: relative;
        margin-left: 90%;
        margin-top: 5%;
        width: 5vw;
    }
    
    .case-study-card-thumbnail-overlay-compact {
        position: relative;
        margin-left: 90%;
        margin-top: 5%;
        width: 5vw;
    }
    
    .case-study-card-section-one{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .case-study-card-section-two{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .about-section {
        margin: auto;
        width: 90vw;
    }
    
    .about-section h2 {
        font-size: 10.6vw;
        font-weight: 600;
        text-align: left;
        margin-top: 15vw;
        margin-bottom: 10vw;
    }
    
    .about-section-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    
    .about-section-card {
        margin-bottom: 10vw;
        padding: 5vw;
        width: 80vw;
        box-shadow: -10px -12px 10px 0px rgba(0,51,217,0.15), 14px 12px 30px 0px rgba(0,51,217,0.15);
    }
    
    .about-section-card p{
        padding-bottom: 2.5vw;
        text-align: justify;
    }
    
    .about-section-card hr{
        width: 80vw;
        border-color: #0033D9;
    }

    .contact-section {
        margin: auto;
        margin-top: 15vw;
        margin-bottom: 5vw;
        width: 90vw;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    
    .contact-section-info {
        width: 90vw;
        margin-bottom: 20vw;
    }
    
    .contact-section-info span{
        color: #0033D9;
        font-size: 12.8vw;
        font-weight: 600;
    }
    
    .contact-section-info-socials img{
        margin: 0.5vw;
        width: 10vw;
        border-radius: 1vw;
        /*box-shadow: -10px -12px 10px 0px rgba(255,255,255,1), 14px 12px 30px 0px rgba(0,51,217,0.15);*/
    }
    
    .contact-section-form {
        width: 90vw;
    }
    
    .contact-form {
        display: flex;
        flex-direction: column;
    }
    
    .contact-form input{
        margin-bottom: 10vw;
        background-color: #F3F3F3;
        font-size: 5.33vw;
        font-weight: 400;
        height: 15vw;
        border: none;
        border-bottom: 2px #0033D9 solid;
    }
    
    .contact-form button{
        margin-bottom: 2.5vw;
        background-color: #0033D9;
        color: #FFFFFF;
        font-size: 5.33vw;
        font-weight: 400;
        height: 15vw;
        border: none;
    }
    
    .footer-section {
        margin: auto;
        margin-top: 30vw;
        width: 90vw;
    }
    
    .footer-section-info {
        margin: auto;
        margin-left: 50vw;
        width: max-content;
    }
    
    .footer-section-info a{
        color: #000;
        font-size: 3.7vw;
        font-weight: 300;
    }
    
    .footer-section-info-contact {
        display: flex;
        flex-direction: column;
        margin-top: 1vw
    }
    
    .footer-section-info-social {
        display: flex;
        flex-direction: column;
        margin-top: 1.5vw
    }
    
    .footer-section-info span{
        font-size: 3.73vw;
        font-weight: 500;
    }
    
    .footer-section-base{
        margin-top: 10vw;
        padding: 0%;
        width: 90vw;
        border-bottom: 4px #0033D9 solid;
        margin-bottom: 2.5vw;
    }
    
    .footer-section-base span{
        margin: 0%;
        padding: 0%;
        width: 90vw;
        font-size: 17.06vw;
        font-weight: 300;
    }
}