.carousel .wrap ul { font-size: 0; /* Add this line to remove whitespace between inline-block elements */ } .carousel { position: relative; width: 100%; /* Set carousel width to 100% */ height: 100%; /* Set carousel height to 100% */ overflow: hidden; /* Hide overflow content */ } .service-image { height: 150px; width: 150px; object-fit: contain; } .service-mobile-image { height: 100px; width: 100px; object-fit: contain; } .carousel .wrap { overflow: hidden; white-space: nowrap; /* border-radius: 8px; */ width: 100%; /* Set wrap width to 100% */ height: 100%; /* Set wrap height to 100% */ } ul { margin: 0; padding: 0; } li { margin: 0; padding: 0; } div { margin: 0; padding: 0; } /* .carousel .wrap::before, .carousel .wrap::after { height: 100%; content: '\2039'; opacity: 0; position: absolute; top: 0; z-index: 2; width: 50px; font-size: 80px; text-indent: -30px; line-height: 200px; font-family: monospace; color: #555; font-weight: bold; pointer-events: none; transition: 0.2s ease-out; background: linear-gradient(to right, white 20%, transparent); } */ .carousel .wrap::after { transform: rotate(180deg); left: auto; right: 0; } .carousel .wrap ul { list-style: none; height: 100%; /* Set ul height to 100% */ padding: 0; margin: 0; } .carousel .wrap ul li { display: inline-block; vertical-align: middle; height: 100%; /* margin: 0 0 0 5px; */ position: relative; overflow: hidden; transition: 0.25s ease-out; } .carousel .wrap ul li:first-child { margin: 0; } .carousel .wrap ul li { font-size: 16px; /* Reset font size for child elements */ } /* .carousel .wrap ul li img { display: block; width: 400px; height: 100%; object-fit: cover; margin: auto; position: relative; z-index: 1; transition: 1s ease; } */ .carousel .wrap ul li .service-item { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; text-wrap: wrap; width: 450px; /* Set div width to 100% */ height: 100%; /* Set div height to 100% */ object-fit: cover; /* Maintain aspect ratio while covering the entire space */ margin: auto; position: relative; z-index: 1; transition: 1s ease; } .service-item-text { text-align: center; color: #000; letter-spacing: 0; font-family: Sora, sans-serif; font-size: 50px; font-weight: 600; line-height: 1.4; } .service-item-para { min-height: 20vh; color: #000; text-align: center; margin-bottom: 20px; padding-left: 40px; padding-right: 40px; font-size: 16px; line-height: 1.4; text-decoration: none; display: block; } .service-item-quote { display: flex; flex-direction: column; align-items: center; opacity: 0; /* Initially hide the quote */ transform: translateX(-100%); /* Move the quote to the left */ transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Adjust transition duration and timing function */ } .service-item:hover .service-item-quote { opacity: 1; /* Show the quote on hover */ transform: translateX(0); /* Move the quote back to its original position */ } .service-item-a { background-color: #838383; } .service-item-b { background-color: #fff; } .service-item-c { background-color: #838383; } .service-item-d { background-color: #fff; } .service-item-e { background-color: #838383; } .service-item-f { background-color: #fff; } .service-item-g { background-color: #838383; } .service-item-h { background-color: #fff; } .service-item-i { background-color: #838383; } .service-item-j { background-color: #fff; } .service-item-k { background-color: #838383; } .service-item-l { background-color: #fff; } .service-item-m { background-color: #838383; } .service-item-a:hover, .service-item-b:hover, .service-item-c:hover, .service-item-d:hover, .service-item-e:hover, .service-item-f:hover, .service-item-g:hover, .service-item-h:hover, .service-item-i:hover, .service-item-j:hover, .service-item-k:hover, .service-item-l:hover, .service-item-m:hover { background-color: #c1f703; /* Change this to the desired hover color */ } /* Apply hover styles */ .carousel .wrap ul li .service-item:hover { cursor: pointer; } .carousel[data-at*='left']>.wrap::before, .carousel[data-at*='right']>.wrap::after { opacity: 1; } .carousel::after { content: ''; pointer-events: none; position: absolute; z-index: 4; bottom: -4px; left: 0; background: #D82B6A; height: 4px; border-radius: 4px; opacity: 0; width: var(--scrollWidth, 0); left: var(--scrollLleft, 0); transition: opacity 0.2s, bottom 0.2s; } .carousel:hover::after { opacity: 1; bottom: -10px; } .services-without-carousel { display: none; } .show-more-button { display: none; } .mobile-services-title { font-size: 8vw; font-weight: 600; text-align: center; padding-top: 20px; } .mobile-services { display: none; } /* media queries */ @media (max-width: 575.98px) { .mobile-services{ display: block; } .media-marketing, .ppc-ads, .seo-opt, .local-seo, .web-design, .branding, .influencer-marketing, .email-marketing, .content-marketing, .online-reputation { border-bottom: 1px solid #000; } .carousel { display: none; } .services-without-carousel { padding: 4%; display: flex; flex-direction: column; align-items: center; } .service-p { text-align: start; color: #838383; } .detailed-services { display: flex; flex-direction: column; align-items: start; height: 50vh; justify-content: space-evenly; } .service-title-text { font-size: 18px; font-weight: 800; } .service-p { font-size: 16px; font-weight: 600; } .mobile-services-visible { display: flex; flex-direction: column; } .show-more-button { display: flex; align-items: end; justify-content: center; flex-direction: column; margin: 0 5%; } } @media (min-width: 576px) and (max-width: 767.98px) { .carousel .wrap ul li .service-item { width: 350px; } } @media (min-width: 768px) and (max-width: 991.98px) { .carousel .wrap ul li .service-item { width: 400px; } } @media (min-width: 992px) and (max-width: 1199.98px) {} @media (min-width: 1200px) and (max-width: 1399.98px) {} /* @media (min-width: 1400px) {} */