body {
    overflow-x: hidden;
    width: 70%;
    margin: 1% 15%;
}

/* Header Section */

header {
    display: inline-flex;
    width: 100%;
}

#logo {
    display: flex;
    flex: 1;
}

/* Nav Section */

.top-nav {
    flex: 1.6;
    display: flex;
    justify-content: right;
    text-align: right;
    align-items: center;
}

.nav-buttons {
    margin: 0 5%;
    text-decoration: none;
    font-size: 17px;
    color: #212832;
    font-family: "Google Sans Medium", Arial, Helvetica;
}

#signup-button {
    border: #212832 solid 1px;
    padding: 8px 18px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

/* Hero Section */

.hero-content {
    margin-top: 10%;
    width: 50%;
}

#hero-tagline {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    color: #DF6951;
}

#hero-heading {
    font-family: 'Volkhov', serif;
    font-weight: bold;
    font-size: 84px;
    color: #181E4B;
    padding-right: 0%;
    letter-spacing: -2px;
    line-height: 89px;
    margin: 3% 0;
}

#hero-paragraph {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    color: #5E6282;
    padding-right: 25%;
    margin-bottom: 8%;
}

/* Decoration Section */

.blob {
    position: absolute;
    z-index: -1;
    right: -16.5%;
    top: -18%;
}

.girl {
    position: absolute;
    right: 15%;
    top: 10%;
}

#rectangle {
    position: absolute;
    z-index: -1;
    left: 29.7%;
    top: 31.2%;
}

.purple-background-circle {
    position: absolute;
    left: -30%;
    top: -20%;
    filter: blur(50px);
    -webkit-filter: blur(50px);
}

.plus.decore {
    position: absolute;
    right: 0%;
    margin-top: 14%;
    margin-right: 8%;
}

/* Services Decore Rectangle */

.rounded-rectangle {
    position: absolute;
    margin: 8% -15%;
}

/* CTA (Call to Action) Section */

.CTA {
    display: flex;
    align-items: center;
    width: 396px;
    height: 60px;
}

#find-more-button {
    background-color: #F1A501;
    color: #FFFFFF;
    padding: 18px 23px;
    margin-right: 25px;
    font-family: "Google Sans Medium";
    font-size: 18px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    filter: drop-shadow(00px 20px 70px #f1a50134);
    -webkit-filter: drop-shadow(00px 20px 70px #f1a50134);
}

#demo-button-container {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

#demo-button-text {
    margin: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    color: #686D77;
}

#demo-circle {
    height: 52px;
    width: 52px;
    background-color: #DF6951;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0px 15px 60px #DF6951);
    -webkit-filter: drop-shadow(0px 15px 60px #DF6951);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#demo-play-button {
    height: 0px;
    width: 0px;
    margin-left: 12%;
    border-style: solid;
    border-width: 10px 0px 10px 20px;
    border-color: transparent transparent transparent white;
}

/* Services Section */

.services {
    height: 525px;
    margin: 20% 0 15% 0;
}

.services-headings {
    padding: 0 2%;
    margin: 0 25%;
}

.section-name {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 2% 36%;
    color: #5E6282;
}

.section-heading {
    font-family: "Volkhov", sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: #14183E;
}

/* Services Cards Section */

.services-card-container {
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-card {
    height: 314px;
    width: 267px;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: hsl(0, 0%, 100%);
    margin: 0 3%;
    position: relative;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    -ms-border-radius: 36px;
    -o-border-radius: 36px;
}
.services-card-icons {
    height: 70px;
    position: relative;
    z-index: 99;
}
.customization-icon {
    height: 50px;
}
.small-rounded-rectangle {
    width: 50px;
    position: absolute;
}
.services-card:hover {
    filter: drop-shadow(0px 51.85px 46.3px #00000014);
    -webkit-filter: drop-shadow(0px 51.85px 46.3px #00000014);
}

.card-heading {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #1E1D4C;
    margin: 5% 0;
}

.card-paragraph {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #5E6282;
    padding: 0 13%;
}
.services-card-decore-container {
    height: 75px;
    margin-top: 10% ;
}
.services-small-rectangle {
    position: absolute;
    width: 50px;
    height: 50px;
}
.first-services-rounded-rectangle {
    top: 29%;
    margin-left: 4%;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
.second-services-rounded-rectangle {
    top: 18%;
    left: 35%;
}
.third-services-rounded-rectangle {
    top: 0%;
    border-radius: 0% 70% 0% 0;
    right: 0%;
    -webkit-border-radius: 0% 70% 0% 0;
    -moz-border-radius: 0% 70% 0% 0;
    -ms-border-radius: 0% 70% 0% 0;
    -o-border-radius: 0% 70% 0% 0;
}
.fourth-services-rounded-rectangle {
    right: 32%;
    top: 23%;
}