* {
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}

h2 {
    font-weight: 700;
    /* font-style: normal; */
    color: rgb(31, 56, 139);
    /* color: rgb(31, 12, 111); */
    margin-top: 14px;
    margin-bottom: 14px;
}

hr {
    border-top: 1px solid #bbb;
    /* margin: 0 40px; */
}


body {
    background-color: white;
    max-width: 1024px;
    margin: 0 auto;
    /* background-color: yellow; */
}

p {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1.1em;
}

h4 {
    color: rgb(39, 70, 147);
    font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
    /* font-family: "Inter", sans-serif; */
}

h2, h3, h5, h6 {
    font-family: "Inter", sans-serif;
    /* font-family: "Poppins", sans-serif; */
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: "DM Serif Display", serif; */
}

a {
    margin-right: 10px;
}

section {
    gap: 20px;
    margin-bottom: 40px;
    /* background-color: tomato; */
}

.header {
    margin-left: 10px;
}

#about {
    margin: 10px;
    padding: 20px;
    background-color: rgb(240, 240, 240);
    border-radius: 12px;
}

#cases {
    padding: 20px;

}

#cases h3 {
    font-weight: 600;
    font-size: 1.2em;
    color: rgb(122, 22, 56);
    margin-top: 16px;
    margin-bottom: 8px;
}

a {
    font-family: "Inter", sans-serif;
    font-weight: 500;
}

a:link {
    color: rgb(31, 92, 180);
}

a:hover {
    color: rgb(21, 50, 91)
}

a:visited {
    color: rgb(31, 92, 180);
}

#cases a:visited {
    color: rgb(87, 30, 180);
}


.common-container {
    padding: 16px;
}

.btn {
    width: 140px;
    height: 50px;
    padding: 0px;
    margin: 10px;
    background-color: rgb(55, 130, 211);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 300ms ease;
    font-size: 14px;
}

.appstore {
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: transparent;
}
.appstore img {
    width: auto;
    height: auto;
    max-height: 50px;
}

.btn:hover {
    background-color: rgb(27, 90, 157);
}

#hero {
    padding: 10px;
    text-align: center;
}

#hero h1 {
    font-family: "DM Serif Display", serif;
    font-size: 3em;
    font-weight: 500;
    margin: 16px auto;
}


#hero h2, #hero p {
    color: rgb(85, 85, 85);
    font-weight: 300;
}

#hero h4 {
    font-family: "Inter", sans-serif;
    font-size: 1.1em;
    font-weight: 500;
    padding-top: 6px;
    color: rgb(85, 85, 85);
}

.hero-container {
    width: 250px;
    height: auto;
    /* border-radius: 50%; */
    overflow: hidden;
    margin: 40px auto;
}

#hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#about, .container, .common-container, .outer-container {
    display: flex;
    align-items: left;
}

#about, .common-container, .outer-container {
    flex-direction: column;
}

.container {
    gap: 20px;
}

#about p {
    text-align: left;
    margin-top: 16px;
    margin-bottom: 0;
}

.container div {
    flex: 1;
}

/* Projects */
.project-container {
    display: flex;
    flex-direction: column;
    /* padding: 0 40px; */
}

.project-content {
    /* background-color: lightblue; */
    display: block;
}

.project-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-icon {
    float: left;
    padding: 20px;
    margin-bottom: 20px;
}

.project-icon img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.project-img {
    /* background-color: beige; */
    /* display: block; */
    /* margin-top: 20px; */
    padding: 20px;
    margin: 20px auto 5px;
}

.project-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.project-img-left {
    /* background-color: beige; */
    float: left;
    margin: 20px;
}

.project-img-right {
    float: right;
    margin: 20px;
}

.project-screenshot {
    /* width: 100%; */
    border-radius: 8px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.phone-screenshot {
    max-height: 500px;
    object-fit: cover;
}

.project-description {
    /* background-color: lightgreen; */
    padding: 20px;
}

.project-description h4 {
    font-size: 2.0em;
    font-weight: 700;
    margin-top: 16px;
    padding-top: 20px;
    margin-bottom: 8px;
}
.project-description ul {
    margin-top: 15px;
    list-style-position: inside;
}
.project-description h5 {
    color: rgb(122, 22, 56);
    font-size: 1.5em;
    font-weight: 650;
    margin-top: 18px;
    margin-bottom: 8px;
}
.project-description h6 {
    color: rgb(42, 106, 76);
    font-size: 0.8em;
}

.project-description p {
    margin-top: 13px;
    margin-bottom: 16px;
    margin-left: 0;
    margin-right: 0;
}

.project-download {
    /* background-color: lightseagreen; */
    margin-top: 20px;
    /* margin-bottom: 40px; */
    padding: 20px;
}

#tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    gap: 10px;
}

.tile button {
    border: none;
    background: transparent;
    padding: 20px;
}

.tile img {
    border-radius: 32px;
    max-width: 256px;
    /* width: 512px; */
}

span {
    display: inline-block;
    /* justify-content: left; */
    gap: 20px;
    margin-top: 40px;
}

#projects {
    margin: 20px 0;
}

#projects button {
    height: 40px;
    background-color: none;
    width: 140;
    height: 50px;
    padding: 16px;
    background-color: rgb(55, 130, 211);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 300ms ease;

}

/* Contacts */

#contact {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 40px;
}

#contact .container {
    height: auto;
}

#contact button {
    height: 50px;
    background-color: none;
    padding: 0;
}

#contact img {
    height: 100%;
}

footer {
    text-align: center;
    color: rgb(85, 85, 85);
    margin: 100px auto;
}

table {
    border-collapse: collapse;
}

th {
    background-color: lightblue;
    color: black;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

@media (max-width: 600px) {
    #hero span a {
        display: block;
    }
    .project-img-left {
        float: none;
    }
    .project-img-right {
        float: none;
    }
    .appstore img {
        max-height: 40px;
    }
}