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

body{
    background-color: rgb(247, 247, 253);
}

.main-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
}

.header{
    grid-column: 1 / 5;
    grid-row: 1 / 2;
    font-size: 30px;
    color: rgb(247, 247, 253);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1004%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M744.25 604.87C878.2 584.2 914.07 287.01 1164.82 262.77 1415.57 238.53 1467.7 55.91 1585.39 49.97' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M578.88 575.54C755.62 531.17 812.71 57.99 1084.74 50.74 1356.77 43.49 1460.44 173.06 1590.6 173.94' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M662.3 637.7C796.61 637.29 913.71 544.15 1190.62 540.25 1467.53 536.35 1574.46 310.28 1718.94 305.05' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M693.22 671.01C825.93 606.35 767.03 177.21 1014.69 175.7 1262.35 174.19 1483.49 439.16 1657.63 444.5' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M697.38 582.24C807.85 557.21 750.38 277.53 1020.49 264.62 1290.6 251.71 1500.14 103.46 1666.71 102.22' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1004'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");

}

.header-hello{
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 20px;
}
.header-pic {
    width: 120px;
    height: 120px;
    border-radius: 100px;
}
.header h1{
    margin-top: 2%;
    margin-left: 1%;
    font-size: 38px;
}
.header p {
    font-size: 20px;
    margin-left: 6%;
    margin-bottom: 20px;
    width: 60%;

}

.header a {
    color:rgb(242, 226, 133);
}
.about {
    grid-column: 1 / 5;
    grid-row-start: 2;
    grid-row-end: auto;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

.about h2 {
    margin-top: 20px;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.about h3 {
    font-weight: 500;
    font-size: 28px;
}

.about ul {
    list-style: none;
}
.about li{
    font-size: 20px;
    text-align: center;
}

.about a {
    font-size: 28px;
}
.info-section{
    grid-column: 3 / 5;
    grid-row-start: 3;
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
}

.info-section h2{
    margin-bottom: 20px;
}

.info-section p {
    margin-right: 5%;
}

#conversion-icon{
    width: 40px;
    height: 40px;
    margin-left: 8px;
    border-radius: 10px;
}


.contact ul {
    display: flex;
    flex-direction: row;
    position: relative;
    list-style: none;
    text-align: center;
    font-size: 22px;
    line-height: 70px;
    margin-top: 30px;
    left: 80%;
}

.contact li {
    padding: 0 30px;
    border-right: 1px solid rgb(247, 247, 253);
    border-left: 1px solid rgb(247, 247, 253);
}

.contact-info a {
    font-size: 20px;
    color: rgb(242, 226, 133);
}


@media screen and (max-width: 700px) {
    .header p{
        width: 85%;
    }    
    .header {
        background-image: rgb(49, 44, 44);
    }
}