*,*::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Roboto Slab", serif; font-size: 15px; line-height: 1.67; color: #444; } /* Header Start */ header { margin: 0; width: 100%; background-color: #fff; position: fixed; height: 70px; z-index: 2000; } .header-info { font-size: 0.9rem; color: #555; } .logo .Navbar-brand-img { max-width: 100%; height: auto; } .Navbar-brand { display: flex; align-items: center; justify-content: center; } .logo { float: center; padding-top: 5px; } nav { height: 100%; position: fixed; right: 0; width: 320px; transform: translateX(320px); transition: transform 560ms ease-in-out; background-color: white; ol { margin: 0; padding: 0; border-top: 1px solid #eee; z-index: -1; li { list-style: none; color: #fff; text-transform: uppercase; font-weight: bold; padding: 20px; cursor: pointer; border-bottom: 1px solid #eee; transition: 0.25s; span { display: block; font-size: 14px; color: #353535; } a { color: #353535; text-transform: uppercase; font-weight: bold; color: #353535; cursor: pointer; text-decoration: none; } &:hover { background-color: #eee; } } } } input[type="checkbox"]:checked ~ nav { transform: translateX(0); } input[type="checkbox"] { box-sizing: border-box; display: none; transition: all 0.25s; } .menuIconToggle { box-sizing: border-box; cursor: pointer; position: fixed; z-index: 40; height: 100%; width: 100%; top: 2px; right: 15px; height: 30px; width: 30px; transition: all 0.3s; } .menuIconToggle i { font-size: 22px; color: #1b1b1b; transition: all 0.3s; } h1 { margin: 0; font-size: 3em; text-align: center; } @media screen and (max-width: 640px) { nav { height: 100%; width: 100%; transform: translateX(100%); } @media (max-width: 768px) { .header-info { font-size: 0.8rem; text-align: center; } .logo .Navbar-brand-img { width: 280px; } } @media (max-width: 576px) { .logo .Navbar-brand-img { width: 210px; } .header-info { font-size: 0.7rem; } } @media (max-width: 406px) { .logo .Navbar-brand-img { width: 180px; } .header-info { font-size: 0.7rem; } } } /* Header End */ .about-us{ padding: 130px 10px 70px 10px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background: linear-gradient(to left top, #7ebef3, #4b4b4b); h2{ font-size: 2em; } p{ font-size: 1.2em; } } .testimonial-header{ text-align: center; background-color: rgb(250, 250, 250); text-align: center; background: linear-gradient(to bottom, #02132f 32%, #174f6f 46%, #0095cf 64%); background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; text-transform: uppercase; font-family: "Times New Roman", Times, serif; font-size: 2rem; margin-top: 50px; } .testimonial-section { width: 100%; position: relative; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: flex; padding: 10px 35px; align-items: center; justify-content: center; min-height: 50vh; } /* .carousel-track { display: flex; transition: transform 0.5s ease-in-out; } .testimonial { flex: 1 0 33.33%; box-sizing: border-box; padding: 40px; text-align: center; } .testimonial-img { width: 120px; height: 120px; border-radius: 50%; margin-bottom: 15px; border: 3px solid #007BFF; } .testimonial p { font-size: 16px; color: #555; margin-bottom: 10px; line-height: 1.5; font-style: italic; margin: 0 auto; text-align: center; margin: 10px 0; } .testimonial h3 { font-size: 14px; color: #333; font-weight: bold; margin: 20px 0 0 0; } .carousel-controls { position: absolute; bottom:10px; left: 0; width: 100%; display: flex; justify-content: space-around; } .carousel-button { background: #007BFF; color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 25px; font-weight: bold; font-family: cursive; text-align: center; width: 50px; height: 50px; } .carousel-button:hover { background-color: #0056b3; } @media (max-width: 768px) { .testimonial { flex: 1 0 100%; } } @media (max-width: 480px) { .testimonial p { font-size: 14px; } .testimonial h3 { font-size: 14px; } .carousel-button { font-size: 23px; font-weight: bold; position: relative; padding: 6px 19px; } } */ .wrapper { max-width: 900px; width: 100%; position: relative; } .wrapper i { top: 50%; height: 50px; width: 50px; cursor: pointer; font-size: 1.25rem; position: absolute; text-align: center; line-height: 50px; background: #fff; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23); transform: translateY(-50%); transition: transform 0.1s linear; } .wrapper i:active { transform: translateY(-50%) scale(0.85); } .wrapper i:first-child { left: -22px; z-index: 1; } .wrapper i:last-child { right: -22px; } .wrapper .carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% / 3) - 1px); overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; border-radius: 8px; scroll-behavior: smooth; scrollbar-width: none; } .carousel::-webkit-scrollbar { display: none; } .carousel.no-transition { scroll-behavior: auto; } .carousel.dragging { scroll-snap-type: none; scroll-behavior: auto; } .carousel.dragging .card { cursor: grab; user-select: none; } .carousel :where(.card, .img) { display: flex; justify-content: center; align-items: center; } .carousel .card { scroll-snap-align: start; height: 342px; list-style: none; background: #fff; cursor: pointer; padding-bottom: 15px; flex-direction: column; border-radius: 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.418) 0%, rgba(6, 155, 255, 0.288) 100%); } .carousel .card .img { background: #5bacd1; height: 148px; width: 148px; border-radius: 50%; } .card .img img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid #e7e7e7; } .carousel .card h2 { font-weight: 500; font-size: 1.2rem; margin: 10px 0 5px; text-transform: uppercase; } .carousel .card span { color: #3f4046; text-align: center; font-size: 0.8rem; line-height: 1.5; font-style: italic; margin: 0 auto; } @media screen and (max-width: 900px) { .wrapper .carousel { grid-auto-columns: calc((100% / 2) - 1px); } } @media screen and (max-width: 600px) { .wrapper .carousel { grid-auto-columns: 100%; } }