body{ background-color: #272727; } .container.header h2{ color: white; } .container.header h1{ color: #FFF2DB; } header nav ul li a{ color: white; } .adsounds-banner{ display: flex; align-items: center; margin-bottom: 160px; } .adsounds-banner .right{ color: white; background-color: #1A4870; font-family: "Archivo", serif; font-size: 28px; padding-top: 42px; } .adsounds-banner .right p{ padding: 0 62px 24px 61px; } .container.process h2{ font-family: "Assistant", serif; font-size: 64px; font-weight: bold; color: #FFF2DB; line-height: 82px; } .process-wrapper-single{ font-family: "Montserrat", serif; font-weight: bold; font-size: 24px; color: #FFF2DB; text-align: center; background-color: #1A4870; width: 100%; max-width: 382px; padding: 46px 0; position: relative; margin-top: 100px; margin-left: 75px; } .process-wrapper-single .circle{ position: absolute; width: 150px; height: 150px; border-radius: 50%; background-color: #035B73; font-size: 80px; display: flex; align-items: center; justify-content: center; top: -75px; left: -75px; } .process-wrapper p{ width: 100%; } .process-wrapper .second{ display: flex; justify-content: center; } .process-wrapper .third{ display: flex; justify-content: flex-end; } .container.examples{ font-family: "Assistant", serif; font-size: 64px; font-weight: bold; color: #FFF2DB; line-height: 82px; margin-top: 168px; } .container.examples h2{ font-size: 64px; } .container.reviews{ margin-top: 168px; } .container.reviews h2{ font-family: "Assistant", serif; font-size: 64px; font-weight: bold; color: #FFF2DB; line-height: 82px; } .reviews-wrapper{ display: flex; justify-content: space-between; } .container .reviews-wrapper-single h2{ font-family: "Montserrat", serif; font-size: 36px; line-height: normal; background-color: #1A4870; width: 100%; max-width: 363px; text-align: center; padding: 24px 0; } .container .reviews-wrapper-single p{ font-family: "Archivo", serif; font-size: 32px; font-weight: lighter; color: white; } .paragraph-wrapper{ width: 100%; max-width: 363px; padding: 47px 34px; height: 747px; background-size: cover; background-position: center; } .paragraph-wrapper.one{ background-image: url("../images/adsounds/project-single-one.png"); } .paragraph-wrapper.two{ background-image: url("../images/adsounds/project-single-two.png"); } .paragraph-wrapper.three{ background-image: url("../images/adsounds/project-single-three.png"); } .see-packages{ background-color: #1A4870; width: 100%; max-width: 780px; padding: 70px 0; text-align: center; color: white; font-family: "Montserrat", serif; margin: 200px auto 200px auto; border-radius: 25px; } .see-packages h2{ font-size: 40px; } .see-packages a{ color: white; text-decoration: none; } .footer.container{ color: white; } .footer ul li a{ color: #FFFFFF; text-decoration: none; } @media screen and (max-width: 1200px){ .container.adsounds-banner .left{ width: 50%; } .container.adsounds-banner .right{ width: 50%; font-size: 18px; padding-top: 26px; } .container.adsounds-banner .left img{ max-width: 100%; } .reviews-wrapper-single { max-width: 32%; } .container .reviews-wrapper-single h2{ font-size: 28px; } .container .reviews-wrapper-single p { font-size: 22px; } } @media screen and (max-width: 880px) { .container.adsounds-banner{ display: flex; flex-direction: column-reverse; align-items: center; } .container.process{ display: flex; align-items: center; flex-direction: column; text-align: center; } .process-wrapper-single{ margin-top: 50px; margin-left: 0; } .process-wrapper-single .circle{ display: none; } .process-wrapper p{ padding-left: 14px; padding-right: 14px; } .container.process h2{ line-height: 52px; } .container.adsounds-banner{ margin-bottom: 80px; } .container.examples{ display: flex; align-items: center; flex-direction: column; margin-top: 80px; } .container.examples h2{ font-size: 38px; text-align: center; line-height: 52px; margin-bottom: 32px; } .container.reviews{ text-align: center; } .reviews-wrapper{ display: flex; flex-direction: column; align-items: center; } .reviews-wrapper-single{ margin-bottom: 42px; max-width: 100%; } .see-packages{ max-width: 500px; padding: 70px 40px; } .container.examples iframe{ margin-bottom: 50px; } .container.reviews h2{ font-size: 40px; line-height: 50px; margin-top: 32px; } .adsounds-banner .right{ padding-top: 0; } .adsounds-banner .right p{ padding: 40px 12px; font-size: 18px; text-align: center; border-bottom: 5px solid #272727; } } @media screen and (max-width: 574px) { .container.adsounds-banner img{ max-width: 100%; } .container .reviews-wrapper-single p{ font-size: 24px; } .see-packages h2{ font-size: 32px; } }