@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"); *{ margin: 0; padding: 0; font-family: "Montserrat", sans-serif; } /*------------------------ everything header ------------------------*/ header{ background-color: #cda63c; /*#272727*/ position: sticky; top: 0; bottom: 0; left: 0; right: 0; text-align: center; height: 85px; width: 100%; margin-bottom: 80px; } #logo-image{ width: auto; height: 70px; margin-top: 6.5px; transform: translateX(-30px); } .navMenu a { color: black; /* changes nav menu default font color */ text-decoration: none; font-size: 1.2em; text-transform: uppercase; font-weight: 500; display: inline-block; width: 130px; -webkit-transition: all 0.3s ease-in-out; /*to make white color ease in when hovered*/ transition: all 0.3s ease-in-out; transform: translateY(-25px); } .navMenu a:hover { color: white; /* #fddb3a */ } /*------------------------ everything body ------------------------*/ body{ background: white; text-align: center; line-height: 150%; } ul,ol{ text-align: left; margin-right: 550px; margin-left: 550px; } .bodyMargin{ margin-right: 400px; margin-left: 400px; } /*------------------------ body gallery ------------------------*/ .wholeGallery{ margin-left: 50px; margin-right: 50px; } .img{ height: 250px; width: auto; opacity: 1; padding: 5px; } h1{ font-size: xxx-large; } /*------------------------ everything footer ------------------------*/ footer{ display: flex; background-color: #cda63c; /*#272727*/ font-family: "Montserrat", sans-serif; position: static; text-align: center; height: 150px; width: 100%; bottom: 0; margin-top: 80px; align-items: center; justify-content:center; } a{ text-decoration: none; color: black; } iframe{ width: 100%; height: 300px; } /*------------------------ stely of comments------------------------*/ *{ margin: 0px; padding: 0px; font-family: poppins; box-sizing: border-box; } a{ text-decoration: none; } #testimonials{ display: flex; justify-content: center; align-items: center; flex-direction: column; width:100%; } .testimonial-heading{ letter-spacing: 1px; margin: 30px 0px; padding: 10px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .testimonial-heading span{ font-size: 1.3rem; color: #252525; margin-bottom: 10px; letter-spacing: 2px; text-transform: uppercase; } .testimonial-box-container{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width:100%; } .testimonial-box{ width:500px; box-shadow: 2px 2px 30px rgba(0,0,0,0.1); background-color: #ffffff; padding: 20px; margin: 15px; cursor: pointer; } .profile-img{ width:50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 10px; } .profile-img img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .profile{ display: flex; align-items: center; } .name-user{ display: flex; flex-direction: column; } .name-user strong{ color: #3d3d3d; font-size: 1.1rem; letter-spacing: 0.5px; } .name-user span{ color: #979797; font-size: 0.8rem; } .reviews{ color: #f9d71c; } .box-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .client-comment p{ font-size: 0.9rem; color: #4b4b4b; } .testimonial-box:hover{ transform: translateY(-10px); transition: all ease 0.3s; } @media(max-width:1060px){ .testimonial-box{ width:45%; padding: 10px; } } @media(max-width:790px){ .testimonial-box{ width:100%; } .testimonial-heading h1{ font-size: 1.4rem; } } @media(max-width:340px){ .box-top{ flex-wrap: wrap; margin-bottom: 10px; } .reviews{ margin-top: 10px; } } ::selection{ color: #ffffff; background-color: #252525; }