@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@600&display=swap');
* {
    margin:0px;
}
#digi-sol {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70vh;
    background: #420eab;
    align-items: center;
    justify-content: center;
}
#digi-sol h2 {
    font-size: 36px;
    color: #fff;
    font-family: 'Mukta', sans-serif;
}
#digi-sol p {
    font-size: 20px;
    color: #fff;
    font-family: calibri;
    text-align: center;
}
#digi-sol button {
    border: 1px solid #fff;
    background: #fff;
    width: 185px;
    height: 52px;
    font-size: 22px;
    font-family: 'Mukta';
    margin-top: 48px;
    color: #420eab;
    transition: 0.3s;
}
#digi-sol button:focus {
    background: #420eab;
    color: #fff;
}
#digi-says {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
.mod {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 48px;
}
.mod i {
    font-size: 60px;
    color: #666;
}
.mod h1 {
    font-size: 36px;
    color: #666;
    font-family: 'Mukta';
}
.mod p {
    width:70%;
    font: 18px calibri;
    line-height: 1.5;
}
#quote {
    display: flex;
    width: 100%;
    background: #420eab;
    margin-top: 28px;
    align-items: center;
    justify-content: center;
    margin: 88px 0px;
}
#quote p {
    font: 24px Verdana;
    width: 40%;
    padding: 18px 24px;
    color: #fff;
}
#quote a {
    color: #420eab;
    font-size: 24px;
    font-family: 'Mukta';
    text-decoration: none;
    padding: 18px;
    height: 38px;
    width: 40%;
    margin: 10px;
    text-align: center;
    line-height: 1.5;
    background: #25D366;
    border-radius: 12px;
}
#quote a i {
    color: #fff;
    font-size: 36px;
}
#koti {
    display: flex;
    flex-direction: column;
    width: 0%;
    height: 100vh;   
    position: fixed;
    top: 0px;
    right: 0;
    z-index: 3;
    background: #fff;
    transition: 0.6s;
    overflow: hidden;
}
#koti button {
    width: 100%;
    height: 60px;
    font: 36px Arial;
    line-height: 1.5;
    margin-top: 120px;
    color: #666;
    background: none;
    border: none;
    padding-right: 10%;
    text-align: right;
    margin-bottom: 88px;
}
#koti a {
    border: 1px solid #000;
    border-radius: 50px;
    width: 70%;
    font-size: 18px;
    font-family: Arial;
    padding: 18px 24px;
    align-self: center;
    background: #000;
    color: #fff;
    text-align: center;
    text-decoration: none;
    margin-top: 20px;
}
.form-quote {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 0vh;
    overflow: hidden;
}
.form-quote form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
.form-quote label {
    font: 18px Verdana;
    margin-top: 28px;
}
.form-quote input[type=text] {
    border: none;
    border-bottom: 2px solid #000;
    font: 18px Verdana;
    text-align: center;
    margin-top: 9px;
}
.form-quote select {
    width: 60%;
    height: 60px;
}
.form-quote input[type=submit] {
    width: 40%;
    height: 45px;
    background: #000;
    color: #fff;
    border: none;
    margin-top: 28px;
    font: 18pt Calibri;
    box-shadow: 2px 2px 9px #5f5f5f;
}
@media screen and (min-width:720px) {
 #digi-says {
    flex-direction: row;
    width: 80%;
    margin-left: 10%;
 }   
 .mod i {
    font-size: 48px;
 }
 .mod h1 {
    font-size: 28px;
    margin-top: 18px;
 }
 .mod p {
    font: 14px calibri;
    color: #444;
 }
 #quote a {
    line-height: 1;
    width: 145px;
    color: #fff;
 }
 #quote a i {
    margin: 0;
    color: #fff;
    line-height: 1;
 }
}