@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css?family=Dancing Script'); *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } * { margin: 0; padding: 0; } :root { --fonts: "Poppins", sans-serif; --lightcolor: #0581c6; --darkcolor: #1c4579; } button:focus { outline: none!important; } .cart-section a:hover , a:hover { text-decoration: none!important; } .dropdown-item.active, .dropdown-item:active { background-color: unset!important; color: #ffbc00!important; } .nav-item:hover .dropdown-menu-2 li { color: #ffbc00!important; } body { font-family:var(--fonts); } img { max-width: 100%; height: auto; } /* Header CSS */ .sticky-header { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Softer shadow with larger blur */ position: fixed; top: 0; width: 100%; z-index: 1000; background-color: rgba(255, 255, 255, 0.95); /* Slight transparency for smooth effect */ transition: all 0.3s ease-in-out; } .sticky-header .modal.show { display: inline-table!important; } .logoonone { /* display: none; */ width: 40%; margin-left: 50px; transition: 0.2s linear; } .sticky-header .logoonone { display: block; width: 40%; margin-left: 50px; transition: 0.2s linear; } .sticky-header .logoo { display: none; transition: 0.2s linear; } .dropdown-item:focus, .dropdown-item:hover { color: black; } .sticky-header .navbar { background-color: white; } .sticky-header .menu-section .active , .sticky-header .menu-section ul li a:hover , .sticky-header .cart-section a:hover { color: black; } .navbar { display: flex; z-index: 999; margin: 0 50px; min-height: 30px; justify-content: space-between; align-items: center; background-color: white; /* padding: 0px 50px; */ height: 80px; position: relative; transition: .3s; } .logoo { width: 40%; margin-left: 50px; } .language-section, .cart-section{ display: none; } .hamburger { display: none; flex-direction: column; cursor: pointer; margin-bottom: 20px; } .hamburger div { width: 25px; height: 3px; background-color: #fff; margin: 2px 0; } header{ background: white; transition: all 0.3s ease-in-out; /* overflow: hidden; */ } .menu-section .active{ color: black; } .language-section, .cart-section { display: flex; align-items: center; color: black; } .language-dropdown { display: flex; align-items: center; cursor: pointer; } .language-dropdown img { width: 24px; height: 24px; margin-right: 5px; } .language-dropdown i { margin-left: 5px; } .logo-section { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .logo img { height: 100%; width: 100%; max-width: 189px; transform: translateY(43px); } .menu-section { display: flex; justify-content: center; } .menu-section ul.show { max-height: 500px; display: flex!important; border-radius: 5rem 0rem!important; padding: 5px!important; } .nav-item .dropdown-menu-2 a { font-size: 13px!important; padding: 5px 10px!important; cursor: pointer!important; } .menu-section ul { list-style: none; display: flex; gap: 0px; margin-bottom: 0; } .menu-section ul li.dropdown{ margin: 10px 0 0 0; } .menu-section ul li { margin: 7px 0px 0px 0px; } .menu-section ul li a { color: black; text-decoration: none; padding: 0px 30px 0px 0px; font-size: 16px; font-weight: 550; font-family: var(--fonts); } .menu-section ul li a:hover { border-radius: 5px; color: black; } .cart-section a { color: black; text-decoration: none; font-size: 13px; transition: 0.2s ease; } .cart-section a:hover { color: black; transition: 0.2s ease; } .cart-section i { font-size: 15px; } .nav-item { position: relative; } .nav-item .dropdown-menu-2 { display: none; position: absolute; top: 100%; left: 0; /* background-color: #070707; */ background: rgba(0, 0, 0, .8); padding: 10px 0; z-index: 1000; border: none; border-radius: 0px; } .nav-item:hover .dropdown-menu-2 { display: block; padding: 19px 0px 19px 0px; margin: 0; border-radius: 0.3rem 2rem; } .nav-item:hover .dropdown-menu-2 li{ margin-top: 0; } .login-signup-drop { width: 144% !important; } .dropdown-item:focus, .dropdown-item:hover { background-color: unset!important; } /* .nav-item.dropdown:hover .dropdown-menu-2 li a{ color: white; padding: 6px 15px 6px 15px; } */ .login-btnnn:focus { background-color: black!important; box-shadow: unset!important; } .dropdown-menu-2 li a { color: white; } .nav-item .dropdown-menu-2 a:hover { background-color: rgba(255,255,255,.5); /* color: #c6c6c6; */ border-radius: 0; } ul.dropdown-menu-2.megamenu-panel { width: 750px; left: -220px; } .nav-item:hover .megamenu-panel{ display: flex; flex-wrap: nowrap; border-radius: 90px 0px 90px 0px!important; } .nav-item:hover .megamenu-panel li{ padding: 30px 0px 30px 30px!important; } .mega-section-subtitle { color: #C6C6C6; font-family: "Poppins", Sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; line-height: 1em; margin: 0px 0px 0px 0px; } .mega-section-subtitle::before { transform: translateY(-2px); -webkit-transform: translateY(-2px); background-color: #FFB25D; width: 6px; height: 6px; margin: 0px 5px 0px 0px; } .megamenu-panel .megamenu-dropdown:hover { background: transparent !important; color: #ffba14 !important; } .content-center{ width: 20%; display: flex; justify-content: space-around; } .hamburger.toggle div:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .hamburger.toggle div:nth-child(2) { opacity: 0; } .hamburger.toggle div:nth-child(3) { transform: rotate(45deg) translate(-4px, -5px); } .sidenav { height: 100%; width: 0; position: fixed; z-index: 9999; top: 0; left: 0; background-color: #070707; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 14px; color: #fff; display: block; transition: 0.3s; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .sidenav a:hover { color: #f1f1f1; } #sidenav { width: 0px; } /* Header CSS */ /* card slider css */ #cCarousel { position: relative; max-width: 1800px; margin: auto; } #cCarousel .arrow { position: absolute; top: 45%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; border-radius: 50%; z-index: 1; font-size: 26px; color: #0077cc; cursor: pointer; } #cCarousel #prev { left: 0; } #cCarousel #next { right: 0; } #carousel-vp { width: 1480px; height: 400px; display: flex; align-items: center; overflow: hidden; margin: auto; position: relative; } @media (max-width: 770px) { #carousel-vp { width: 510px; } } @media (max-width: 510px) { #carousel-vp { width: 250px; } } #cCarousel #cCarousel-inner { display: flex; position: absolute; transition: 0.3s ease-in-out; gap: 0px; left: 0; } .cCarousel-item { width: unset; margin-right: 10px; border: 2px solid #0077cc; border-radius: 17px; overflow: hidden; display: flex; flex-direction: row; } .cCarousel-item .infos .diwali-offer{ height: 93px; object-fit: contain; } .cCarousel-item .infos h3 { margin-bottom: 0px; } .cCarousel-item .infos p { margin-bottom: 0px; } .cCarousel-item img { width: 100%; object-fit: cover; height: 245px; } .cCarousel-item .infos { display: flex; flex-direction: column; padding-top: 10px!important; padding-bottom: 10px!important; justify-content: space-around; background: white; color: black; } .cCarousel-item .infos h3 { font-size: 17px; } .cCarousel-item .infos p { font-size: 15px; } .cCarousel-item .infos button { background: #094E96; padding: 4px 4px 4px 4px; width: max-content; border-radius: 5px; color: white; letter-spacing: 1.3px; border: unset; font-size: 0.8rem; font-weight: 300; cursor: pointer; } .diaa { position: relative; padding: 5px 0px 30px 0px; overflow: hidden; } .diaa::before { content: url(../images/dia-02.gif); position: absolute; transform: scale(0.4); top: -40px; left: -159px; z-index: 1111; overflow: hidden; } .diaa::after { content: url(../images/dia-01.gif); position: absolute; transform: scale(0.4); top: -40px; right: -164px; overflow: hidden; z-index: 1111; } /* card slider css */ /* Discover Services */ .discover-services{ /* display: flex; */ background: url(../images/bg-img-for-discover.jpg); background-position: center center; overflow-x: hidden; background-repeat: no-repeat; background-size: cover; } .discover-services h2 { text-align: center; font-size: 60px; color: #808080; /* Light gray for the normal text */ margin-bottom: 20px; font-weight: 400; } .discover-services h2 .highlight { color: #0583c9; /* Blue color for "Services" */ } /* Filter Buttons */ .filter-buttons { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; } .filter-buttons button { border: 2px solid #0583C9; background-color: transparent; color: #0583C9; font-weight: 700; font-size: 16px; padding: 2px 47.5px 2px 47.5px; border-radius: 11px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; outline: none; } .filter-buttons button.active { background-color: #000; color: #fff; border: 2px solid #075D8C; } /* Service Card */ .service-card { background: linear-gradient(137deg, #1C4579 62%, #0091DA 100%); border-radius: 15px; padding: 20px; text-align: center; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); color: #fff; position: relative; overflow: hidden; /* max-width: 300px; */ margin: 6px; } .service-cards .row .col-4{ padding: 0; } /* Service Icon */ .service-card .service-icon { width: 100px; margin-bottom: 15px; } /* Title and Subtitle */ .service-card h3 { font-size: 22px; margin-bottom: 5px; } .service-card p { font-size: 14px; margin-bottom: 20px; } /* Buttons */ .service-card button { display: block; width: 100%; border: none; border-radius: 25px; padding: 10px; margin: 10px 0; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .book-now-btn{ width: 35%; } .service-card .more-detail { font-family: "Poppins", Sans-serif; font-weight: 600; text-transform: capitalize; background-color: #F7CF01; width: max-content; border-radius: 27px 27px 27px 27px; padding: 5px 20px 5px 20px; font-size: 14px; display: flex; gap: 5px; } .service-card .book-now { background-color: #000; color: #fff; display: flex; justify-content: center; align-items: center; gap: 10px; } .service-card .book-now:hover { background-color: #333; } /* Book Now Button Icon */ .service-card .book-now::before { content: "\f054"; /* Font Awesome 'right arrow' icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; } .side-banner img{ margin: 100px 0 0 100px; } /* CTA Buttons Section */ .cta-buttons { display: flex; gap: 20px; justify-content: center; align-items: center; margin: 50px auto; } .cta-button { display: flex; align-items: center; font-size: 17px; width: 23.8%; border-radius: 30px; border: none; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease; } /* Custom Clean Button */ .custom-clean-btn { background-color: #fbe9d4; color: #333; padding: 0 4px; display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .custom-clean-btn img { height: 100%; width: 100%; max-width: 70px; border-radius: 50%; } .custom-clean-btn:hover { background-color: #fcdcb0; } /* Free Demo Button */ .demo-btn { font-size: 17px; letter-spacing: 1.3px; width: max-content; font-family: 'Poppins'; background-color: #333; color: #fff; padding: 30px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .demo-btn:hover { background-color: #555; /* Slightly lighter on hover */ } /* Discover Services */ /* Video Section */ .video-section { text-align: center; padding: 10px; color: #fff; background-image: url('../images/watchourvideobg.jpg'); background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative; } .video-section h2 { font-size: 50px; font-family: "Poppins", Sans-serif; margin: 20px 0px 50px 0px; color: #5d5d5e; } .video-section .highlight { color: var(--darkcolor); /* Highlight color */ } .video-cards { display: flex; align-items: center; justify-content: center; gap: 20px; /* filter: drop-shadow(0 0 1.05rem #0585ca); */ flex-wrap: wrap; } .video-card { width: 478px; height: 270px; margin-right: 35px; position: relative; border-radius: 33px; /* overflow: hidden; */ /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); border-style: solid; border-color: #41A4D9; border-radius: 33px 33px 33px 33px; */ border-radius: 0px; transition: 0.2s ease; } .video-card:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); border-style: solid; border-color: #00deff; border-bottom: none; border-width: 5px; transition: 0.1s ease; } .video-card:hover .video-card-body { background: #05aee5; border: 5px solid #00deff; color: white; border-top: none; transition: 0.1s ease; } .video-card:hover .video-card-body { width: 102%; margin-left: -0.3rem; transition: 0.1s ease; } .video-overlay img { width: 100%; height: auto; display: block; object-fit: cover; cursor: pointer; } .video-content { position: absolute; top: 50%; cursor: pointer; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 80%; } .video-content p { font-size: 20px; font-weight: bold; margin-bottom: 20px; } .play-button { font-size: 25px; padding: 19px; border-radius: 100px; background-color: rgba(66, 165, 218, 0.7); color: #fff; /* Play button color */ } /* Social Media Section */ .social-links { margin: 97px 0px 10px 0px; } .social-links p { margin-bottom: 0px; font-size: 14px; letter-spacing: 1px; color: black; font: var(--fonts); font-weight: 500; } .social-links .icons a { margin: 0 10px; color: black; font-size: 24px; } .social-links .icons a i{ font-size: 16px; } .social-links .icons a:hover { color: #27b2ff; } /* Video Section */ /* Contact Us Section */ .callback-section { position: relative; display: flex; align-items: center; padding: 50px; color: #fff; overflow: hidden; height: auto; /* Full height for the video */ } /* Video Background Styling */ #background-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; /* Send the video behind the content */ } /* Overlay Styling */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(54, 54, 54, 0.5); /* Semi-transparent dark overlay */ z-index: 0; } /* Content Container Styling */ .container-fluid { display: flex; justify-content: space-between; width: 100%; max-width: 1760px; margin: auto; z-index: 2; /* Bring content in front of the video */ } .left-content { width: 38%; margin-top: 35px; color: #fff; } .left-content h3 { font-size: 13px; font-family: "Poppins", sans-serif; margin-bottom: 10px; font-weight: 400; letter-spacing: 1px; } .left-content h1 { font-size: 50px; margin-bottom: 20px; font-weight: 500; line-height: 1.2em; } .left-content p { font-size: 20px; font-family: poppins, sans-serif; width: 81.766%; line-height: 1.6; font-weight: 400; } /* Form Container */ .appointment-form-container { width: 100%; max-width: 700px; margin: 50px auto; background-color: rgba(0,0,0,0.4); border-radius: 2rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-size: cover; background-position: center; } .appointment-form { display: flex; flex-direction: row; padding: 1.5rem; } .appointment-form h2 { border-radius: 2rem 2rem 0rem 0rem; background: linear-gradient(90deg, #0f557b 0%, #43a6dc 100%) !important; position: relative; } .appointment-heading{ border-radius: 2rem 2rem 0rem 0rem; background: linear-gradient(90deg, #0f557b 0%, #43a6dc 100%) !important; position: relative; display: block; background-color: var(--treck-base); padding: 28px 60px 30px; } .appointment-heading::before{ content: ""; position: absolute; bottom: -10px; left: 60px; border-top: 10px solid #1c6d9a; border-left: 25px solid transparent; border-right: 25px solid transparent; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-size: 16px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 14px; } .contact-button { background-color: #007BFF; color: white; margin-right: auto; margin-left: auto; padding: 8px 20px; font-family: 'Poppins', sans-serif; font-size: 18px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .contact-button:hover { background-color: #0056b3; } /* Responsive Styles */ @media (max-width: 768px) { .container-fluid { flex-direction: column; align-items: center; } .left-content, .right-form { width: 100%; margin-bottom: 20px; } .left-content h1 { font-size: 32px; } .left-content h3 { font-size: 16px; } .left-content p { font-size: 14px; } } .shape-divider{ width: 40px; height: 2px; color: #FFFFFF; background-color: #fff; } .shape-divider::after { border: 1px solid #ffa827; background-color: #121315; content: ""; position: absolute; /* top: 17.3%; */ left: 5.6%; height: 8px; width: 8px; border-radius: 50%; transform: translateX(-50%) translateY(-50%); } /* Contact Us Section */ /* Footer CSS */ footer { position: relative; background: url(../images/footernew.jpg) no-repeat center center / cover; padding: 0px 0 0px 0; color: black; background-size: cover; } .footer-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.57); /* Transparent black overlay */ z-index: 0; /* Overlay should be behind the content */ } .footer-container { position: relative; /* Content should be above the overlay */ z-index: 1; display: flex; justify-content: space-between; color: black; font-family: poppins, sans-serif; max-width: 1501px; margin: 0 auto; } .footer-links{ width: 16%; padding: 10px; } .footer-contact { padding: 10px; width: 30%; } .footer-subscribe { padding: 10px; width: 31%; } .footer-about img { max-width: 1051px; width: 55%; margin-bottom: 20px; margin-right: auto; margin-left: auto; } .footer-about p { font-size: 16px; margin-bottom: 20px; line-height: 1.7; color: black; } .footer-social a { display: inline-flex; border-radius: 50%; justify-content: center; align-items: center; margin-right: 5px; color: black; font-size: 18px; text-decoration: none; border: 1px solid #5e6d7e; height: 40px; width: 40px; } .footer-links ul { list-style: none; } .footer-links ul li { margin-bottom: 10px; font-size: 15px; } .footer-links ul li a { color: black; text-decoration: none; } .footer-contact p { margin-bottom: 15px; font-weight: 300; } .footer-subscribe form { display: flex; flex-direction: column; } .footer-subscribe input { padding: 10px; margin-bottom: 10px; border: none; border-radius: 5px; } .footer-subscribe button { padding: 8px 25px 7px 25px; width: 30%; font-family: poppins, sans-serif; background-color: #057686; border: none; font-size: 14px; font-weight: 600; color: white; border-radius: 5px; transition: 0.3s ease-in-out; cursor: pointer; } .footer-subscribe button:hover { transition: 0.3s ease-in-out; background-color: #FCBC45; } .footer-bottom { text-align: center; background: #063f6a; } .footer-bottom p { padding: 10px; font-size: 16px; color: #fff; font-weight: 400; margin-bottom: 0; letter-spacing: 2px; } .footer-about { display: flex; flex-direction: column; padding: 10px; width: 26%; } .footer-anker:hover,.footer-anker{ color: black; text-decoration: none; } .footer-contact strong { color: black; font-weight: 700; } .footer-container .footer-span-text , #subscribe-heading{ font-size: 20px; color: black; margin: 2px 0px 16px 0px; font-weight: 600; } .footer-social a:hover{ text-decoration: none; color: var(--lightcolor); } /* Chat Widget CSS */ .whatsapp-chat-widget { position: fixed; bottom: 20px; left: 20px; z-index: 3006; } .footer-about , .footer-links , .footer-contact , .footer-subscribe { padding-top: 54px; } .whatsapp-chat-widget .chat-box { display: none; position: relative; background-color: white; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); width: 360px; } .chats{ padding: 7px 14px 6px; background-color: rgb(255, 255, 255); border-radius: 0px 8px 8px; position: relative; transition: 0.3s; opacity: 1; transform-origin: center top; z-index: 2; box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 0.5px; margin-top: 4px; max-width: calc(100% - 66px); color: rgb(17, 17, 17); } .chats::before{ position: absolute; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACQUExURUxpccPDw9ra2m9vbwAAAAAAADExMf///wAAABoaGk9PT7q6uqurqwsLCycnJz4+PtDQ0JycnIyMjPf3915eXvz8/E9PT/39/RMTE4CAgAAAAJqamv////////r6+u/v7yUlJeXl5f///5ycnOXl5XNzc/Hx8f///xUVFf///+zs7P///+bm5gAAAM7Ozv///2fVensAAAAvdFJOUwCow1cBCCnqAhNAnY0WIDW2f2/hSeo99g1lBYT87vDXG8/6d8oL4sgM5szrkgl660OiZwAAAHRJREFUKM/ty7cSggAABNFVUQFzwizmjPz/39k4YuFWtm55bw7eHR6ny63+alnswT3/rIDzUSC7CrAziPYCJCsB+gbVkgDtVIDh+DsE9OTBpCtAbSBAZSEQNgWIygJ0RgJMDWYNAdYbAeKtAHODlkHIv997AkLqIVOXVU84AAAAAElFTkSuQmCC); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; content: ""; top: 0px; color: rgb(17, 17, 17); left: -12px; width: 12px; height: 19px; } .whatsapp-chat-widget .chat-box header { display: flex; background: rgb(9, 94, 84); align-items: center; border-radius: 10px 10px 0 0; justify-content: space-between; padding: 4px 10px; } .whatsapp-chat-widget .chat-box header img { width: 50px; height: 56px; object-fit: contain; border-radius: 50%; } .whatsapp-chat-widget .chat-box .chat-body { padding: 20px 20px 20px 10px; background-color: rgb(230, 221, 198); position: relative; overflow: auto; max-height: 382px; } .chat-body::before { display: block; position: absolute; content: ""; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 0; opacity: 0.08; background-image: url(https://elfsight.com/assets/chats/patterns/whatsapp.png); } .whatsapp-chat-widget .chat-box .chat-body p { margin: 0; } .x-mark { background: transparent; border: unset; color: #fff; } .whatsapp-chat-widget .whatsapp-button { background-color: #25d366; border: none; border-radius: 50px; padding: 10px 15px; color: white; font-size: 16px; cursor: pointer; display: flex; align-items: center; } .whatsapp-chat-widget .whatsapp-button img { width: 24px; margin-right: 10px; } .whatsapp-chat-widget .chat-box footer { margin-top: 10px; text-align: center; padding: 10px; background: transparent; } .whatsapp-chat-widget .chat-box footer button { /* background-color: #25d366; border: none; padding: 8px 12px; color: white; border-radius: 5px; cursor: pointer; */ padding: 8px 12px; border-radius: 20px; border: none; background: rgb(79, 206, 93); color: rgb(255, 255, 255); font-size: 15px; font-weight: 700; line-height: 20px; width: 100%; cursor: pointer; position: relative; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; margin: 0px; overflow: hidden; appearance: none; } /* Footer CSS */ /* about us */ /* .about-us { background-image: url('../images/about-us.jpg'); background-repeat: no-repeat; background-size: cover; height: 600px; position: relative; overflow: hidden; } */ .background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.36; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; box-sizing: border-box; /* Ensures padding/border do not affect size */ } .about-us-button { margin-top: 6rem; } .about-us-p { color: white; font: var(--fonts); margin-top: 3rem; margin-left: 3rem; text-align: justify; } .proven-services , .Our-Clients { text-align: center; font-family: var(--fonts); font-size: 36px; font-weight: 600; margin-top: 3rem; } .proven-services-span , .Our-Clients-span { color: var(--lightcolor); } .proven-services::before { background-image: url('../images/yellowline.png'); content: ''; display: block; width: 28%; height: 8%; background-repeat: no-repeat; position: absolute; overflow: visible; margin: auto; margin-right: 50%; margin-left: 44%; margin-top: 3rem; } .Our-Clients::before { background-image: url('../images/yellowline.png'); content: ''; display: block; width: 28%; height: 13%; background-repeat: no-repeat; /* margin-left: -40px; */ /* margin-bottom: -110px; */ position: absolute; margin-right: 50%; margin-left: 50%; margin-top: 3rem; overflow: visible; } .career { position: relative; /* Ensure it positions child elements correctly */ background-image: url('../images/career-new.jpg'); background-repeat: no-repeat; background-size: cover; height: 600px; overflow: hidden; /* Contain child overflow */ } .career-p { color: white; font: var(--fonts); margin-top: -1rem; margin-left: 3rem; text-align: justify; } .background-overlay-career { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.36; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; box-sizing: border-box; /* Ensures padding/border do not affect size */ } .career-accordion { --background-overlay: ''; background-image: url('../images/white-background.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; overflow: hidden; } .career-heading { color: var(--lightcolor); } .career-contact { --background-overlay: ''; background-image: url('../images/how-to-apply.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; overflow: hidden; position: relative; } .career-text { margin: auto; display: block; text-align: center; color: white; padding-top: 2rem; width: 60%; z-index: 1111111111111111111111; position: relative; } .career-text-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.36; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; box-sizing: border-box; /* Ensures padding/border do not affect size */ } .career-text h2 , .career-text p { color: white; } .career-contact { --background-overlay: ''; background-image: url('../images/how-to-apply.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; overflow: hidden; position: relative; } .mission { --background-overlay: ''; background-image: url('../images/mission-vision.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; /* background-attachment: fixed; */ overflow: hidden; position: relative; height: 500px; } .background-overlay-mission { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.36; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; box-sizing: border-box; /* Ensures padding/border do not affect size */ } .mission-care { background: url('../images/Cleaning-Video-Home-Page-Web.mp4'); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; overflow: hidden; position: relative; height: 600px; } .video-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; /* Ensures the video covers the entire screen */ z-index: -1; /* Keeps the video in the background */ } .career-content { position: relative; z-index: 1; color: white; text-align: center; padding-top: 2%; font-size: 2em; width: 60%; margin: auto; } .career-content p { font-size: 18px; } .box-mission { padding: 30px 30px 30px 30px; background-color: transparent; background-image: linear-gradient(109deg, #1C4579 0%, #0B75B6 100%); border-radius: 50px 0px 50px 0px; text-align: justify; flex-direction: row; display: flex; align-items: center; flex: 1!important; margin: 10px; } .box-mission div h1 , .box-mission div p { color: white; } .box-mission i { font-size: 50px; text-align: center; margin-right: 2rem; } .box-mission-2 { padding: 30px 30px 30px 30px; background-color: transparent; background-image: linear-gradient(109deg, #1C4579 0%, #0B75B6 100%); border-radius: 0px 50px 0px 50px; flex: 1!important; margin: 10px; } .comparison-section { /* background-color: #0a0a0a; */ padding: 60px 0; } .card-custom { background-color: #fff!important; color: black; padding: 30px; border-radius: 10px; /* box-shadow: 0 5px 15px rgba(4, 180, 254, 20.35); */ /* border: 5px solid #04b4fe; */ background: linear-gradient(to top, rgba(190, 190, 190, 0.1), rgba(100, 100, 100, 0)); /* Gradient from bottom to top */ height: 485px; } .card-header-custom-kleankare::after { content: ''; background-image: url(../images/kleankaretextbox.png); top: 0; position: relative; width: 370px; display: block; height: 112px; position: absolute; z-index: 1; background-size: cover; background-repeat: no-repeat; margin-left: -104px; margin-top: 35px; } .card-header-custom-other::after { content: ''; background-image: url(../images/othercompanytextbox.png); top: 0; position: relative; width: 370px; display: block; height: 112px; position: absolute; z-index: 1; background-size: cover; background-repeat: no-repeat; margin-top: 35px; margin-left: -104px; } .card { border-radius: 10px; background: linear-gradient(to top, rgba(190, 190, 190, 0.1), rgba(100, 100, 100, 0)); /* Gradient from bottom to top */ border: none!important; } .card-headerrr { margin-top: 5rem; } .vs-text { color: #00aaff; font-size: 3rem; font-weight: bold; text-align: center; margin: 0; } .list-item-green { color: black; margin-bottom: 10px; } .list-item-red { color: black; margin-bottom: 10px; } .section-title { color: #09638f; font-size: 2.5rem; font-weight: 600; font-family: var(--fonts); } .whykleankare { background: url('../images/lightbluebackground.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; /* background-attachment: fixed; */ overflow: hidden; position: relative; height: auto; } .comparison-section-p { color: #1b6a95; width: 60%; margin: auto; font-weight: 400!important; font-family: var(--fonts); font-size: 18px!important; } .kleankarespan { color: #ffbc00; } .feature-box { display: flex; align-items: center; margin-bottom: 20px; } .feature-icon { /* background-color: #115b8a; */ color: white; border-radius: 50%; width: 71px; height: 71px; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .guarantee-section { background: linear-gradient(180deg, #ffffff 0%, #e0f3ff 50%, #c2e7ff 100%); border-radius: 15px; padding: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .guarantee-text { font-weight: bold; color: #115b8a; } .guarantee-description { font-size: 16px; color: #6c757d; } .card-custom ul { list-style-image: url(''); } .card ul { list-style-image: url(''); } .reasons { /* background: url('../images/klean-kare-gives-you-so-many-reasons-to-love-it-varient-02.jpg'); */ background-position: center center; background-repeat: no-repeat; background-size: cover; /* background-attachment: fixed; */ overflow: hidden; position: relative; height: auto; position: relative; } .background-overlay-reason { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(54, 54, 54, 0.5); /* Semi-transparent dark overlay */ z-index: 0; } .reasons .section-title { color: #09638f; font-size: 1.75rem; text-align: center; margin-bottom: 1rem; position: relative; z-index: 2; font-family: var(--fonts); } .reasons .heading-wrapper { position: relative; display: inline-block; text-align: center; width: 100%; margin-bottom: 2rem; } .reasons .divider { width: 100%; height: 3px; background-color: #00aaff; position: absolute; top: 50%; left: 0; z-index: 1; } .reasons .feature-box { background-color: rgba(1, 18, 44, 0.4); border-radius: 2.5rem; padding: 30px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; display: block; width: 80%; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .reasons .feature-box img { width: 50%; margin-bottom: 1rem; } .reasons .feature-box-2 { background-color: white; } /* .reasons .feature-box:hover { transform: scale(1.05); } */ .reasons .feature-box:nth-child(2) { background-color: white; color: #0a0a0a; } .reasons .feature-icon { font-size: 3rem; margin-bottom: 20px; color: #00aaff; } .reasons .feature-box:nth-child(2) .feature-icon { color: #007bff; } .reasons .feature-title { font-size: 1.5rem; font-weight: bold; color: white; font-weight: 700; font: var(--fonts); font-size: 24px!important; font-weight: 600!important; } .reasons .feature-title:nth-child(2) { /* color: black; */ font-weight: 700; font: var(--fonts); } .reasons .feature-subtitle { font-size: 1.25rem; color: #ffbc00; font-weight: 700; font-size: 24px!important; font-weight: 600!important; font: var(--fonts); } .reasons .feature-box:nth-child(2) .feature-subtitle { color: white; font-weight: 700; font: var(--fonts); } .reasons .feature-text { font-size: 0.9rem; color: white; font-weight: 700; font: var(--fonts); font-size: 13px; } .reasons .feature-box:nth-child(2) .feature-text { color: #6c757d; font-weight: 700; font: var(--fonts); } .best-choice { /* background: url('../images/bg-img-for-discover.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; */ overflow: hidden; position: relative; height: auto; } .best-choice-text { font-size: 2.2rem!important; color: #09638f; margin: 20px auto; font-weight: 600!important; text-align: center; font: var(--fonts); } .best-choice-text span { color: #ffbc00; } /* .best-choice-text::before { background-image: url('../images/yellowline.png'); content: ''; display: block; width: 34%; height: 44%; background-repeat: no-repeat; position: absolute; top: 77px; left: 790px; overflow: visible; } */ .cert-card { background: #ffffff; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: center; transition: all 0.3s ease-in-out; width: 270px; height: 300px; } .cert-card img { width: 100px; margin-bottom: 20px; } .cert-card p { font-size: 0.9rem!important; color: black; font: var(--fonts)!important; } /* Shadow effect for card */ .cert-card { border-radius: 15px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } .container-custom { max-width: 1200px; margin: 0 auto; } .cert-heading { font-weight: bold; color: #222; } .car-cleaning-section { background: url('../images/car-clean-header.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; overflow: hidden; position: relative; min-height: 350px; align-items: flex-end; display: flex; margin-right: auto; margin-left: auto; position: relative; justify-content: end; } .services-text { justify-content: flex-end; padding: 10px; display: flex; position: relative; width: 100%; flex-wrap: wrap; align-content: flex-start; box-sizing: border-box; text-align: center; width: auto; } .services-text H2 { margin: 0px 70px 20px 0px; color: #FFFFFF; font-family: "Inder", Sans-serif; font-size: 100px; font-weight: 500; -webkit-text-stroke-width: 0.1px; stroke-width: 0.1px; -webkit-text-stroke-color: #08AFD5!important; stroke: #08AFD5!important; text-shadow: 0px 0px 35px #08AFD5; -webkit-text-stroke-width: 4px; /* Increase stroke width */ -webkit-text-stroke-color: #08AFD5 !important; text-shadow: 0px 0px 35px #08AFD5; } .service-item { padding: 10px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.5); /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */ margin-bottom: 5px; border: 1px solid #f5f5f5; position: relative; } .service-image { width: 550px; margin-right: 20px; display: inline-block; vertical-align: middle; } .service-title { font-size: 0.9rem; font-weight: 400; margin: 0; display: inline-block; vertical-align: middle; } .label-popular { color: #0d6efd; font-size: 0.6rem; font-weight: 400; float: right; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .header-area { /* display: flex; justify-content: space-between; */ align-items: center; padding: 20px 0; } .header-area h3 { margin: 0; font-weight: bold; font-size: 1.5rem; } .header-link { color: #6c757d; font-size: 0.9em; float: right; } .rating-info { color: #f4b400; font-size: 1rem; } .rating-info small { color: #6c757d; } .label-popular-green { color: lightgreen; } .carousel-item { position: relative; } .carousel-video { width: 100%; height: auto; object-fit: cover; } .video-overlay { position: absolute; color: white; font-size: 1.5rem; } .video-overlay h2 { background-color: rgba(0, 128, 128, 0.8); display: inline-block; padding: 8px 16px; border-radius: 10px; } .video-overlay p { font-size: 1rem; margin: 0; } #videoCarousel { margin: 29px 50px 50px 50px; border: none; } #videoCarousel .carousel-control-prev , #videoCarousel .carousel-control-next { width: 30px; height: 30px; transform: translateY(400%); border: none; background: none; } #videoCarousel .carousel-inner .carousel-item { height: 260px; } .carousel-video { height: 260px; } .cart-empty-card { border: 1px solid #e0e0e0; border-radius: 10px; padding: 30px; text-align: center; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); max-width: 310px; margin: 43px auto; } .cart-empty-card img { width: 100px; margin-bottom: 20px; } .cart-empty-card p { font-size: 1.1rem; color: #777; } .offer-card { border: 1px solid #e0e0e0; border-radius: 10px; padding: 20px; background-color: #fff; margin-bottom: 10px; opacity: 1; transition: opacity 0.5s ease, height 0.5s ease; } .offer-icon { width: 40px; height: 40px; background-color: #e8f4f8; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: #36a7d4; margin-right: 15px; } .offer-content { display: flex; align-items: center; } .offer-title { font-size: 0.9rem; font-weight: 600; margin: 0; } .offer-description { font-size: 0.7rem; color: #777; margin-bottom: 0px; } .view-toggle { color: purple; font-weight: 600; cursor: pointer; margin: auto; display: block; text-align: center; margin-bottom: 20px; } .hidden { height: 0; overflow: hidden; transition: display 0.5s ease, height 0.5s ease; display: none; } .visible { opacity: 1; height: auto; } .sticky-div { position: sticky; top: 25px; bottom: 60px; /* background-color: #fff; */ /* border: 1px solid rgba(0, 0, 0, 0.08); */ /* border-radius: 12px 12px 0 0; */ margin: -42px 0 0; max-width: 107%; padding: 20px 11px 13px; position: sticky; width: 107%; z-index: 3; top: 70px; left: -4%; margin-bottom: 35px; } .cleaning-service-card { display: flex; border-bottom: 1px solid #ddd; padding: 20px 0; } .service-image-section { text-align: center; margin-right: 6.5rem; } .service-thumbnail { width: 300px; max-width: 300px; border-radius: 50%; } .price-bubble { background-color: #FFCC00; border-radius: 50%; padding: 10px; font-size: 18px; font-weight: bold; position: relative; top: -20px; left: -10px; color: #fff; } .service-info-section .description-content{ padding-left: 0px; } .service-info-section { /* border-left: 0.3vh solid #7a7b80; */ margin-bottom: 0.8rem; } .service-info-section button { margin: 0px; padding: 0px; background: none; color: #ffbc00; } .service-heading { font-size: 1vw; font-weight: bold; color: #0056b3; margin-top: 0rem; } .service-description-text { color: #555; } .rating-stars { color: orange; margin-top: -1.0rem; font-size: 1rem; } .view-more-btn { background-color: #87CEEB; color: white; border: none; padding: 8px 16px; margin-top: 10px; cursor: pointer; border-radius: 5px; } /* CSS for fade animation */ .more-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.5s ease; margin-top: 10px; } .more-content.show { max-height: 500px; /* Adjust this value according to the content size */ opacity: 1; } .booknow-btn { border: none; background: rgba(0,0,0,0.8); color: white; border-radius: 0.6rem; padding: 10px 40px; font: var(--fonts); text-transform: uppercase; transform: translateX(-13px) translateY(-39px); } .mainheading { color: var(--lightcolor); } .vertical-hr { width: 2px; height: 300px; /* You can change this as needed */ background-color: #6c757d; /* Bootstrap's default muted gray color */ } .shopping-icon { font-size: 1.5rem; color: #ccc; /* Light gray for the cart icon */ } .custom-button { border: 2px solid #6c5ce7; background-color: transparent; color: #6c5ce7; padding: 0px 17px; border-radius: 25px; margin-top: 18px; transition: background-color 0.3s ease; } .custom-button:hover { background-color: #6c5ce7; color: white; } .buy-text { font-size: 0.7rem; font-weight: bold; color: #4a4a4a; margin-top: 20px; } .options-description { margin-top: 5px; font-size: 0.9rem; color: #7f7f7f; } .cartdiv { /* background: rgba(255, 255, 255); z-index: 11; padding: 2px; margin-top: -7rem; */ display: block; position: relative; transform: unset; margin-top: 0px; background: none; padding: 0px; } .cart-card { display: none; max-width: 405px; margin: auto; padding: 13px; margin-top: 2rem; transition: display 0.6s linear; border-radius: 10px; background-color: #fff; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); } .cart-summary { font-weight: bold; } .btn-view-cart { background-color: #1386e6; color: white; text-align: end!important; } /* .btn-view-cart:hover { background-color: #563d7c; } */ .discount-banner { background-color: #ffbc00; color: white; text-align: center; padding: 5px; width: 70%; border-radius: 5px; margin: auto; font-size: 0.875rem; } .price-text { font-weight: bold; color: #1386e6; } .old-price { text-decoration: line-through; color: #888; } .counter-wrapper { display: flex; align-items: center; justify-content: center; width: 120px; /* border: 2px solid rgba(19,134,230, 0.5); */ border-radius: 15px; padding: 5px; /* background-color: rgba(19,134,230, 0.05); */ } .counter-button { border: none; background-color: transparent; color: #1386e6; /* purple color for the buttons */ font-size: 20px; } .counter-button:focus { outline: none; box-shadow: none; } .counter-value { margin: 0 10px; font-size: 18px; color: #1386e6; /* purple color */ } .cart-icon { position: absolute; width: 50px; height: 50px; background-image: url('../images/add-to-cart.png'); /* Replace with your cart icon */ background-size: contain; background-repeat: no-repeat; z-index: 9999; visibility: hidden; /* Initially hidden */ transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; } .show-cart-icon { visibility: visible; opacity: 1; transform: scale(1.2); /* Slightly scale up the icon */ } .hide-cart-icon { opacity: 0; transform: scale(0.8); /* Shrinks the icon before disappearing */ } .counter-wrapper-service { padding: 1px; margin-top: 0px; width: unset; } .counter-wrapper-service .counter-button { font-size: 16px; } .counter-wrapper-service .counter-value { font-size: 16px; } .hero-section { padding: 50px 0 20px 0; } .hero-section h1 { font-size: 2.2rem; /* font-weight: bold; */ text-align: left; /* font-style: oblique; */ font-family: var(--fonts); } .hero-section p { font-size: 1rem; color: #777; text-align: left; font-family: var(--fonts); } .hero-section { width: 73%; margin: auto; display: block; } body { font-family: var(--fonts); } .carousel-control-prev-icon, .carousel-control-next-icon { background-color: #000; border-radius: 50%; } .profile-card { background-color: #fff; border-radius: 15px; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); width: 290px; margin: 0 auto; position: relative; text-align: center; } .profile-card-header { font-size: 1.2rem; font-weight: bold; text-align: left; position: relative; } .profile-card-header i { position: absolute; top: 0; right: 0; cursor: pointer; } .profile-name { font-size: 1.5rem; font-weight: bold; margin: 0px 0; } .profile-role { color: #666; font-size: 1rem; } .profile-stats { display: flex; justify-content: space-between; margin-top: 20px; } .profile-stat { text-align: center; display: flex; justify-content: space-between; align-items: center; background: aliceblue; padding: 5px 20px; border-radius: 5rem; } .profile-stat-icon { font-size: 0.9rem; color: #00c0ff; /* margin-bottom: 5px; */ margin-right: 0.3rem; } .swiper-pagination-bullet { background-color: #00c0ff !important; } .swiper-pagination-bullet-active { background-color: #000 !important; } .trusted-customers img { border-radius: 50%; width: 50px; height: 50px; margin-right: -19px; } /* .service-image { max-width: 31px; margin-right: 5px; mix-blend-mode: multiply; } */ .service-image { max-width: 31px; width: 25px; height: 25px; margin-right: 5px; /* mix-blend-mode: multiply; */ border-radius: 50%; } .stars { color: #00c0ff; } .rating { font-size: 1.2rem; color: #008fc9; margin-left: 2rem; } .start-chat-btn { background-color: #00c96d; color: white; padding: 10px 20px; border-radius: 20px; font-size: 1rem; text-decoration: none; } .checkmark-icon { font-size: 4rem; color: #00c0ff; } .keyboard-keys { font-size: 2rem; display: inline-block; margin: 10px; } .getstartservice { background-color: #008fc9!important; color: white!important; font-family: var(--fonts)!important; font-weight: 300!important; } .viewdemoservice { background-color: #f4f4f4!important; color: black!important; font-family: var(--fonts)!important; font-weight: 400!important; border: none!important; } .progress-ring { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#00c0ff 75%, #e0e0e0 25%); display: flex; justify-content: center; align-items: center; margin: auto; margin-top: 1.5rem; margin-bottom: 1.5rem; } .inner-circle { width: 100px; height: 100px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; } .profile-image { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; } .star-badge { position: absolute; bottom: 200px; right: 80px; width: 25px; height: 25px; background-color: black; color: white; font-size: 14px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .servicess-images-set .service-item img { width: 50px; } .trusted-customers img:nth-last-child(-n+2) { margin-left: 3px; cursor: pointer; pointer-events: none; } .custom-modal-body { max-height: 650px; overflow-y: auto; padding: 0px 30px; } .custom-rating-header { font-size: 36px; font-weight: bold; } .custom-rating-total { font-size: 18px; margin-bottom: 10px; } .custom-rating-bar { height: 3px; background-color: #ddd; /* margin-bottom: 8px; */ } .custom-rating-fill { height: 3px; background-color: #0087bd; } .custom-review-filters { margin-bottom: 30px; text-align: left; } .custom-review { margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .custom-review-author { font-weight: 500; margin-bottom: 5px; display: flex; justify-content: space-between; } .custom-review-rating { background-color: #0087bd; color: #fff; font-weight: bold; padding: 2px 8px; border-radius: 4px; font-size: 14px; } .custom-hidden { display: none; } .custom-view-more { text-align: center; cursor: pointer; color: #007bff; font-weight: bold; } .ratingstari { font-size: 10px; margin-right: 0.1rem; } .custom-modal-body .filter-button { font-size: 13px; color: black; font-weight: 400; padding: 5px 15px; margin-right: 10px; border-color: #0182b5; } .date-reviews { text-align: start; font-size: 12px; margin-bottom: 10px; } .review-text { font-size: 14px!important; color: black!important; font-family: var(--fonts)!important; } .custom-view-more { font-weight: 400; color: black; width: 30%; display: block; margin: auto; padding: 10px 20px; border-radius: 0.5rem; margin-top: 2rem; margin-bottom: 4rem; background: aliceblue; font-size: 14px; } .review-send-btn { background: #0087bd!important; color: white!important; padding: 6px 30px!important; float: right!important; margin-top: 0.5rem!important; } .revieww-rating { display: inline-block; position: relative; height: 50px; line-height: 50px; font-size: 40px; margin-right: 2rem; } .revieww-rating label { position: absolute; top: 0; left: 0; height: 100%; cursor: pointer; } .revieww-rating label:last-child { position: static; } .revieww-rating label:nth-child(1) { z-index: 5; } .revieww-rating label:nth-child(2) { z-index: 4; } .revieww-rating label:nth-child(3) { z-index: 3; } .revieww-rating label:nth-child(4) { z-index: 2; } .revieww-rating label:nth-child(5) { z-index: 1; } .revieww-rating label input { position: absolute; top: 0; left: 0; opacity: 0; } .revieww-rating label .icon { float: left; color: transparent; } .revieww-rating label:last-child .icon { color: #000; } .revieww-rating:not(:hover) label input:checked ~ .icon, .revieww-rating:hover label:hover input ~ .icon { color: #09f; } .revieww-rating label input:focus:not(:checked) ~ .icon:last-child { color: #000; text-shadow: 0 0 5px #09f; } .contact-section { padding: 50px 0; margin-top: 5rem; font-family: var(--fonts); } .contact-section h2 { font-weight: 600; font-family: var(--fonts); margin-bottom: 20px; } .contact-details { margin-bottom: -17px; } .contact-details p { margin: 0; } .contact-us-button { background-color: #e3f6f5; border: none; padding: 10px 20px; font-size: 12px; font-family: var(--fonts); border-radius: 10px; margin-bottom: 30px; } .btn-book-now-contact { background-color: aliceblue; color: black; /* font-weight: bold; */ font-size: 14px; width: 30%; display: block; margin: auto; padding: 15px 30px; border: none; border-radius: 0.5rem; } .contact-image { width: 110px; height: auto; float: right; } .address-icon { color: #007bff; } .contactusparagraph { font-family: var(--fonts); font-size: 14px; } .contact-form-select { width: 100%; padding: 10px; } .diaa .swiper-container { width: 80%; overflow: hidden; display: block; margin: auto; } .footer-about , .footer-about p , .footer-contact p { font-family: var(--fonts); } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { margin-bottom: -3rem; } .diaa .swiper-horizontal>.swiper-pagination-bullets, .diaa .swiper-pagination-bullets.swiper-pagination-horizontal { margin-bottom: 0rem; } .description-content { display: -webkit-box; -webkit-line-clamp: 2; /* Show first 6 lines */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 150px; /* Adjust based on your line height */ transition: max-height 0.3s ease; font-size: 14px; } .description-content.expanded { max-height: none; /* Allow full content to be shown when expanded */ -webkit-line-clamp: unset; overflow: unset; } /* .view-more-btn { margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px; cursor: pointer; border-radius: 5px; } */ .view-more-btn:focus { outline: none; } /* .vertical-hr { height: 200px; border-left: 1px solid #333; position: absolute; left: 50%; transform: translateX(-50%); } */ .vertical-hr { margin-left: 3rem; margin-right: 4rem; } .cartdiv { display: flex; flex-direction: column; justify-content: center; align-items: center; /* position: absolute; top: 78%; left: 0%; transform: translate(-117%, -13%); */ } .custom-button { margin-top: 10px; } .counter-wrapper-service { margin-top: 0px; } .buy-text { margin-top: 15px; font-weight: bold; } /* .kk001 .carousel-control-prev , .kk001 .carousel-control-next { display: table; position: absolute; top: 50%; background-color: #0088be; padding: 1rem; font-size: 10px; width: 10px; background-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E'); height: 10px; border-radius: 50%; } .kk001 .carousel-control-prev { left: 3%; } .kk001 .carousel-control-next { right: 3%; } */ .services-head-img img { width: 70%; float: right; } .header-bg-img-home { background: url('../images/Animated_banner.gif'); background-size: cover; background-repeat: no-repeat; background-position: center; /* padding: 15vh 40vh; */ position: relative; overflow: hidden; height: 70vh; } .background-overlay-home { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.60; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; box-sizing: border-box; } .header-bg-img-home img { z-index: 1; position: relative; opacity: 1; width: 50%; } .top-service-video-div { width: 300px; height: 300px; border-radius: 50%; /* Makes the div circular */ overflow: hidden; /* Ensures the content doesn't overflow outside the circle */ position: relative; display: block; margin: auto; border: 5px solid; border-color: var(--lightcolor); } .top-service-video-div video { height: 100%; /* Ensures the video fills the height of the container */ position: absolute; top: 50%; /* Center the video vertically */ left: 50%; /* Center the video horizontally */ transform: translate(-50%, -50%); /* Ensure the centering works */ } .top-services { width: 90%; margin: auto; display: block; } .top-services { text-align: center; } .top-service-heading { margin-top: 1.5rem; color: var(--lightcolor); font-family: var(--fonts); font-weight: 600; } .top-service-paragraph { text-align: justify; font-size: 1.5vh; font-family: var(--fonts); font-weight: 500; width: 80%; margin: 0.5rem auto; } .top-service-button { background: var(--lightcolor); font-family: var(--fonts); color: white; font-weight: 600; border: none; padding: 0.3rem 2rem; border-radius: 2rem; font-size: 1.6vh; margin-top: 0.5rem; margin-bottom: 4rem; } .top-service-h1 { margin-top: 4rem; margin-bottom: 5rem; color: black; font-size: 2.5rem; /* font-family: var(--fonts); */ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Oxygen-Sans, Ubuntu, Cantarell, Helvetica, Arial, sans-serif !important; font-weight: 500; } .top-service-h1 span , .top-service-p span { color: var(--lightcolor); } .top-service-p {font-family: var(--fonts); color: black; font-size: 2.3vh; } .top-service-video-badge-car { content: url(../images/20off.png); } .top-service-video-badge-carpet { content: url(../images/30off.png); } .top-service-video-badge-curtain { content: url(../images/10off.png); } .top-service-video-badge-mattress { content: url(../images/15off.png); } .top-service-video-badge-car , .top-service-video-badge-carpet , .top-service-video-badge-mattress , .top-service-video-badge-curtain { width: 25%; position: absolute; top: -3%; left: 28%; transform: translateX(-50%); height: auto; z-index: 1; } #sidebar-cart { background: white; color: #75757a; padding: 15px 15px 0 15px; position: fixed; display: block; width: 320px; height: 100vh; z-index: 111111111; top: 0; right: -340px; box-shadow: -10px 0 15px rgba(0, 0, 0, 0.1); transition: right 0.5s ease-in-out; } .show-sidebar-cart #sidebar-cart { right: 0; /* Visible state */ } #sidebar-cart a.close-button { height: 16px; width: 16px; margin: 0 0 15px 0; text-decoration: none; position: absolute; top: 20px; left: 20px; display: flex; } #sidebar-cart a.close-button span.close-icon { width: 16px; height: 16px; background: black; text-indent: -9999px; overflow: hidden; font-size: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M30.3 32c-.5 0-.9-.2-1.2-.5L16 18.4 3 31.5c-.4.3-.8.5-1.3.5s-.9-.2-1.2-.5c-.7-.7-.7-1.8 0-2.4L13.6 16 .5 2.9C-.2 2.2-.2 1.2.5.5.8.2 1.2 0 1.7 0s.9.2 1.2.5l13.1 13 13-13c.7-.7 1.7-.7 2.4 0 .4.3.6.7.6 1.2s-.2.9-.5 1.2L18.4 16l13.1 13.1c.7.7.7 1.8 0 2.4-.3.3-.8.5-1.2.5z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M30.3 32c-.5 0-.9-.2-1.2-.5L16 18.4 3 31.5c-.4.3-.8.5-1.3.5s-.9-.2-1.2-.5c-.7-.7-.7-1.8 0-2.4L13.6 16 .5 2.9C-.2 2.2-.2 1.2.5.5.8.2 1.2 0 1.7 0s.9.2 1.2.5l13.1 13 13-13c.7-.7 1.7-.7 2.4 0 .4.3.6.7.6 1.2s-.2.9-.5 1.2L18.4 16l13.1 13.1c.7.7.7 1.8 0 2.4-.3.3-.8.5-1.2.5z'/%3E%3C/svg%3E"); transition: all 0.5s linear; } #sidebar-cart a.close-button:active span.close-icon, #sidebar-cart a.close-button:hover span.close-icon { background: black; } #sidebar-cart .service-bag-cart { color: black; font-size: 16px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1; margin: 5px 0 25px 0; display: flex; justify-content: center; } #sidebar-cart .service-bag-cart span.count { color: #fff; background: #075d8c; padding: 8px; margin-left: 6px; position: relative; top: -1px; width: 18px; height: 18px; border-radius: 50px; font-size: 12px; letter-spacing: 0; display: flex; align-items: center; justify-content: center; } #sidebar-cart ul.products { margin: 0; padding: 0 0 15px 0; list-style: none; height: calc(100vh - 200px); overflow-x: hidden; overflow-y: auto; display: block; position: relative; z-index: 0; } /* #sidebar-cart ul.products:after { background: linear-gradient(180deg, transparent, #0581c6); height: 30px; width: 300px; z-index: 1; content: ""; position: absolute; right: 0; bottom: 0; } */ #sidebar-cart ul.products li.product { margin: 0 0 10px 0; padding: 0; width: 100%; min-height: 30px; background: #dee2ee; border-radius: 3px; color: #98989b; position: relative; z-index: 1; display: flex; flex-flow: row nowrap; transition: all 0.5s linear; align-items: center; justify-content: center; } #sidebar-cart ul.products li.product:active, #sidebar-cart ul.products li.product:hover { background: aliceblue; } #sidebar-cart ul.products li.product:active span.product-details h3, #sidebar-cart ul.products li.product:hover span.product-details h3 { color: #4dc0e3 !important; } #sidebar-cart ul.products li.product:active img, #sidebar-cart ul.products li.product:hover img { border-color: #d7d7de !important; } #sidebar-cart ul.products li.product a.product-link { width: 100%; color: #354165; padding: 10px; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } #sidebar-cart ul.products li.product a.product-link span.product-image { display: inline-block; width: 75px; height: 50px; padding-right: 10px; } #sidebar-cart ul.products li.product a.product-link span.product-image img { width: 50px; height: 50px; max-width: 60px; border-radius: 50%; border: 1px solid #d7d7de; transition: all 0.5s linear; } #sidebar-cart ul.products li.product a.product-link span.product-details { display: inline-block; width: 100%; min-height: 30px; color: #75757a; } #sidebar-cart ul.products li.product a.product-link span.product-details h3 { margin: 3px 25px 5px 0; font-size: 13px; font-weight: 500; color: #44444a; transition: all 0.5s linear; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: space-between; width: 100%; position: relative; z-index: 5px; margin-top: 8px; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty, #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.price { display: flex; flex-direction: row; flex-wrap: nowrap; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: flex-start; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty button.minus-button, #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty button.plus-button { width: 25px; height: 24px; border-radius: 3px; border: 1px solid #cdcdd1; background: #f0f0f9; color: #75757a; font-size: 18px; text-align: center; vertical-align: middle; line-height: 20px; transition: all 0.3s linear; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty button.minus-button:active, #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty button.minus-button:hover, #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty button.plus-button:active, #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty button.plus-button:hover { color: #fff; background: #4dc0e3; border-color: #4dc0e3; cursor: pointer; outline: none; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty button.minus-button:focus, #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty button.plus-button:focus { outline: none; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty input.qty-input { width: 24px; height: 24px; text-align: center; border: 1px solid #cdcdd1; border-radius: 3px; margin: 0 2px; transition: all 0.5s linear; padding: 0px!important; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty input.qty-input:active, #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty input.qty-input:hover { border: 1px solid --lightcolor; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty input.qty-input:focus { outline: none; border: 1px solid --lightcolor; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty input.qty-input::-webkit-inner-spin-button, #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.qty input.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } #sidebar-cart ul.products li.product a.product-link span.product-details span.qty-price span.price { color: var(--lightcolor); font-weight: 500; font-size: 13px; display: inline-flex; } #sidebar-cart ul.products li.product a.remove-button { height: 16px; width: 16px; margin: 10px 10px 0 0; text-decoration: none; position: absolute; top: 2px; right: 0; z-index: 2; display: flex; } #sidebar-cart ul.products li.product a.remove-button span.remove-icon { width: 15px; height: 16px; background: rgba(117, 117, 122, 0.5); text-indent: -9999px; overflow: hidden; font-size: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cpath fill='currentColor' d='M30.9 2.3h-8.6L21.6 1c-.3-.6-.9-1-1.5-1h-8.2c-.6 0-1.2.4-1.5.9l-.7 1.4H1.1C.5 2.3 0 2.8 0 3.4v2.2c0 .6.5 1.1 1.1 1.1h29.7c.6 0 1.1-.5 1.1-1.1V3.4c.1-.6-.4-1.1-1-1.1zM3.8 32.8A3.4 3.4 0 0 0 7.2 36h17.6c1.8 0 3.3-1.4 3.4-3.2L29.7 9H2.3l1.5 23.8z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cpath fill='currentColor' d='M30.9 2.3h-8.6L21.6 1c-.3-.6-.9-1-1.5-1h-8.2c-.6 0-1.2.4-1.5.9l-.7 1.4H1.1C.5 2.3 0 2.8 0 3.4v2.2c0 .6.5 1.1 1.1 1.1h29.7c.6 0 1.1-.5 1.1-1.1V3.4c.1-.6-.4-1.1-1-1.1zM3.8 32.8A3.4 3.4 0 0 0 7.2 36h17.6c1.8 0 3.3-1.4 3.4-3.2L29.7 9H2.3l1.5 23.8z'/%3E%3C/svg%3E"); transition: all 0.5s linear; } #sidebar-cart ul.products li.product a.remove-button:active span.remove-icon, #sidebar-cart ul.products li.product a.remove-button:hover span.remove-icon { background: #cc0000; } #sidebar-cart div.totals { position: absolute; bottom: 80px; left: 0; right: 0; height: 45px; background: #e1e1e7; border-bottom: 1px solid #d7d7de; display: flex; flex-direction: column; flex-wrap: nowrap; } #sidebar-cart div.totals div.subtotal, #sidebar-cart div.totals div.shipping, #sidebar-cart div.totals div.tax { padding: 15px; text-align: center; color: #44444a; border-bottom: 1px solid #d7d7de; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 400; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } #sidebar-cart div.totals div.subtotal span.amount, #sidebar-cart div.totals div.shipping span.amount, #sidebar-cart div.totals div.tax span.amount { color: var(--lightcolor); margin-left: 10px; font-weight: 600; } #sidebar-cart div.action-buttons { padding: 0; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 80px; background: #fff; display: block; white-space: nowrap; } #sidebar-cart div.action-buttons a.view-cart-button, #sidebar-cart div.action-buttons a.checkout-button { display: inline-block; padding: 10px; margin: 20px 15px; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; border-width: 1px; border-style: solid; border-radius: 4px; transition: all 0.5s linear; } #sidebar-cart div.action-buttons a.view-cart-button { background: #fff; border-color: var(--lightcolor); margin-right: 5px; color: var(--lightcolor); width: 80px; } #sidebar-cart div.action-buttons a.checkout-button.disabled { opacity: 0.5; cursor: default; } #sidebar-cart div.action-buttons a.view-cart-button:active, #sidebar-cart div.action-buttons a.view-cart-button:hover { background: rgba(77, 192, 227, 0.2); color: #4dc0e3; } #sidebar-cart div.action-buttons a.checkout-button { border-color: var(--lightcolor); background: var(--lightcolor); /* margin-left: 5px; */ color: #fff; width: 200px; display: block; margin: auto; margin-top: 20px; } #sidebar-cart div.action-buttons a.checkout-button:after { content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M311.03 131.515l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887l-83.928 83.444c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l116.485-116c4.686-4.686 4.686-12.284 0-16.971L328 131.515c-4.686-4.687-12.284-4.687-16.97 0z'/%3E%3C/svg%3E"); width: 20px; height: 14px; display: inline-block; margin-left: 6px; vertical-align: middle; position: relative; top: -5px; z-index: 1; } #sidebar-cart div.action-buttons a.checkout-button:active, #sidebar-cart div.action-buttons a.checkout-button:hover { background: #22b0db; border-color: #22b0db; } #sidebar-cart-curtain { background: rgba(0, 0, 0, 0.2); /* Semi-transparent background */ display: none; /* Hidden by default, can be shown when needed */ position: fixed; /* Fixed position to cover the entire screen */ top: 0; left: 0; width: 100vw; /* Full width of the viewport */ height: 100vh; /* Full height of the viewport */ z-index: 1000; /* High z-index to appear above other elements */ } .bag-count { position: relative; background: #008fc8; color: #fff; /* Add text color */ border-radius: 50%; width: 1.5rem; /* Use relative unit */ height: 1.5rem; /* Keep it square */ line-height: 1.5rem; /* Vertically center the number */ text-align: center; font-size: 0.9rem; /* Adjust text size */ top: -11px; right: -6px; } @media screen and (max-width: 768px) { .bag-count { width: 1.3rem; /* Reduce size on smaller screens */ height: 1.3rem; line-height: 1.3rem; font-size: 0.8rem; /* Adjust font size */ top: 8px; /* Adjust position */ right: -8px; } } @media screen and (max-width: 480px) { .bag-count { width: 1.1rem; /* Further reduce size */ height: 1.1rem; line-height: 1.1rem; font-size: 0.7rem; /* Further adjust font size */ top: 5px; /* Adjust position */ right: -5px; } } .counter-wrapper .bag-count { display: none; } .cart-section { margin: 7px 0px 0px 0px; } #videoCarousel .carousel-inner { border-radius: 0.7rem; } .modal-backdrop.show { z-index: 11; } .login-modal .modal-header { padding: 0.5rem 1rem; align-items: center; } .login-modal .modal-title { font-size: 18px; font-family: var(--fonts); } .login-modal .btn-close { border: none; background-color: unset; } .login-modal .btn-close::before { content: url('../images/close-icon.png'); } .login-modal .modal-footer{ border: none; } .login-modal .modal-footer button { /* display: block; */ margin: auto; background-color: #000000; width: 90%!important; height: 50px; border-radius: 50px; width: 27%; border: none; display: flex; justify-content: center; align-items: center; } .login-modal .input-container { position: relative; /* display: flex; */ width: 100%; max-width: 410px; margin: auto; margin-top: 20px; margin-bottom: 10px; } .login-modal .input-container p { font-size: 15px; color: grey; } .login-modal .input-container > span, .login-modal .input-container .input { white-space: nowrap; display: block; } .login-modal .input-container > span, .login-modal .input-container .input:first-child { border-radius: 6px 0 0 6px; } /* .login-modal .input-container > span, .login-modal .input-container .input { border-radius: 0 6px 6px 0; } */ /* .login-modal .input-container > span, .login-modal .input-container .input { margin-left: -1px; } */ /* .login-modal .input-container .input { position: relative; z-index: 1; flex: 1 1 auto; width: 1%; margin-top: 0; margin-bottom: 0; } */ /* .login-modal .input-container span { text-align: center; padding: 8px 12px; font-size: 14px; line-height: 25px; color: #6b7385; background: #d4def5; border: 1px solid #CDD9ED; font-weight: bold; transition: background 0.3s ease, border 0.3s ease, color 0.3s ease; } .login-modal .input-container:focus-within > span { color: #fff; background-color: #148cd1; border-color: #148cd1; } */ /* .login-modal .input-container:focus-within > span { color: #fff; background-color: #148cd1; border-color: #148cd1; } .login-modal .input { display: block; width: 100%; padding: 8px 16px; line-height: 25px; font-size: 14px; font-weight: 500; font-family: var(--fonts); border-radius: 6px; -webkit-appearance: none; color: black; border: 1px solid #CDD9ED; background: #fff; transition: border 0.3s ease; } .login-modal .input::placeholder { color: #CBD1DC; } .login-modal .input:focus { outline: none; border-color: #148cd1; } */ .otp-Form { width: 230px; height: 300px; background-color: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 30px; gap: 20px; position: relative; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082); border-radius: 15px; } .mainHeading { font-size: 1.1em; color: rgb(15, 15, 15); font-weight: 700; } .otpSubheading { font-size: 0.7em; color: black; line-height: 17px; text-align: center; } .inputContainer { width: 100%; display: flex; justify-content: center; } .otp-input { background-color: transparent; /* No background */ width: 100%; height: 30px; text-align: center; border: none; /* No border */ outline: none; /* Remove outline */ font-size: 1.5em; /* Increase font size */ font-weight: 600; } .otp-input::placeholder { color: transparent; /* Hide default placeholder */ } .otp-input:focus { background-color: transparent; /* Keep transparent when focused */ } .inputContainer::after { content: ''; display: flex; justify-content: space-between; margin-top: 10px; } .inputContainer::after { border-top: 2px solid rgb(127, 129, 255); width: 100%; } .verifyButton { width: 100%; height: 30px; border: none; background-color: rgb(127, 129, 255); color: white; font-weight: 600; cursor: pointer; border-radius: 10px; transition-duration: .2s; } .verifyButton:hover { background-color: rgb(144, 145, 255); transition-duration: .2s; } .exitBtn { position: absolute; top: 5px; right: 5px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.171); background-color: rgb(255, 255, 255); border-radius: 50%; width: 25px; height: 25px; border: none; color: black; font-size: 1.1em; cursor: pointer; } .form-card-input { all: unset; } .form-card-input-wrapper { position: relative; width: 100%; height: 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1rem; } .form-card-input { font-size: 2rem; font-weight: bold; letter-spacing: 2rem; text-align: center; -webkit-transform: translateX(36px); -ms-transform: translateX(36px); transform: translateX(36px); position: absolute; z-index: 3; background-color: transparent; } .form-card-input-bg { content: ''; width: 240px; height: 60px; margin: auto; inset: 0; bottom: 10px; position: absolute; z-index: 1; border-radius: 12px; background-color: rgba(206, 206, 206, 0.664); } .resendNote { font-size: 0.7em; color: black; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .resendBtn { background-color: aliceblue; padding: 0.5rem; border-radius: 0.5rem; border: none; color: rgb(127, 129, 255); cursor: pointer; font-size: 1.1em; font-weight: 700; } #verifyOtpBtn { display: block; margin: auto; width: 30%; } .registerinput { width: 100%!important; display: block!important; margin: auto; margin-bottom: 1rem; } #completeRegistrationBtn , #verifyOtpBtn { display: block; margin: auto; margin-top: 1.5rem; background-color: #2c80a1; border: none; } #verificationContainer .form-card-input-wrapper { width: 50%!important; display: block!important; margin: auto!important; margin-bottom: 1rem!important; } #verificationContainer .form-card-input-wrapper .form-card-input { text-align: left!important; } #resendBtn { opacity: 0.5; cursor: not-allowed; } #resendBtn:enabled { opacity: 1; cursor: pointer; } .profile-container { width: 30%; margin: 10rem auto; text-align: center; border-radius: .5rem; box-shadow: 0 0 0 1px #0000001f; margin-bottom: 5rem; margin-top: 7.5rem; padding: 2rem; } .container-bookings { width: 50%; margin: 10rem auto; text-align: center; border-radius: .5rem; box-shadow: 0 0 0 1px #0000001f; margin-bottom: 5rem; margin-top: 7.5rem; padding: 2rem; } .container-payment { width: 26%; margin: 10rem auto; text-align: center; border-radius: .5rem; box-shadow: 0 0 0 1px #0000001f; margin-bottom: 5rem; margin-top: 7.5rem; padding: 2rem; background: url('../images/bg-img.jpg') center top no-repeat rgb(255, 255, 255); background-size: cover; /* Ensure background image covers the element */ position: relative; overflow: auto; box-sizing: border-box; min-height: 35rem; height: auto; } .registed-card-dont { text-align: justify; margin-top: 2rem; font-family: var(--fonts); } .add-new-card-btn { bottom: 0.5rem; position: absolute; width: 89%; border-radius: 9999px; padding-left: 1.25em; padding-right: 1.25em; background-color: #075D8C; border-color: #dbdbdb; border-width: 1px; color: white; cursor: pointer; justify-content: center; padding: calc(.5em - 1px) 1em; text-align: center; white-space: nowrap; right: 0; left: 0; margin: auto; } .card-modal .modal-header { padding: 1px; justify-content: end; border: none; } .card-modal .btn-close { border: none; background-color: unset; text-align: end; } .card-modal .btn-close::before { content: url('../images/close-icon.png'); } .card-modal .modal-footer button { width: 30%; background: #075D8C; border: none; } .payment-title { width: 100%; text-align: center; } .form-container .field-container:first-of-type { grid-area: name; } .form-container .field-container:nth-of-type(2) { grid-area: number; } .form-container .field-container:nth-of-type(3) { grid-area: expiration; } .form-container .field-container:nth-of-type(4) { grid-area: security; } .field-container input { -webkit-box-sizing: border-box; box-sizing: border-box; } .field-container { position: relative; } .form-container { display: grid; grid-column-gap: 10px; grid-template-columns: auto auto; grid-template-rows: 90px 90px 90px; grid-template-areas: "name name""number number""expiration security"; max-width: 758px; padding: 20px; color: #707070; } label { padding-bottom: 5px; font-size: 13px; } input { margin-top: 3px; padding: 15px; font-size: 16px; width: 100%; border-radius: 3px; border: 1px solid #dcdcdc; } .ccicon { height: 38px; position: absolute; right: 6px; top: calc(50% - 0px); width: 60px; } /* CREDIT CARD IMAGE STYLING */ .preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; } .modal .container { width: 100%; max-width: 400px; max-height: 251px; height: 54vw; padding: 20px; } #ccsingle { position: absolute; right: 15px; top: 20px; } #ccsingle svg { width: 100px; max-height: 60px; } .creditcard svg#cardfront, .creditcard svg#cardback { width: 100%; -webkit-box-shadow: 1px 5px 6px 0px black; box-shadow: 1px 5px 6px 0px black; border-radius: 22px; } #generatecard{ cursor: pointer; float: right; font-size: 12px; color: #fff; padding: 2px 4px; background-color: #909090; border-radius: 4px; cursor: pointer; float:right; } /* CHANGEABLE CARD ELEMENTS */ .creditcard .lightcolor, .creditcard .darkcolor { -webkit-transition: fill .5s; transition: fill .5s; } .creditcard .lightblue { fill: #03A9F4; } .creditcard .lightbluedark { fill: #0288D1; } .creditcard .red { fill: #ef5350; } .creditcard .reddark { fill: #d32f2f; } .creditcard .purple { fill: #ab47bc; } .creditcard .purpledark { fill: #7b1fa2; } .creditcard .cyan { fill: #26c6da; } .creditcard .cyandark { fill: #0097a7; } .creditcard .green { fill: #66bb6a; } .creditcard .greendark { fill: #388e3c; } .creditcard .lime { fill: #d4e157; } .creditcard .limedark { fill: #afb42b; } .creditcard .yellow { fill: #ffeb3b; } .creditcard .yellowdark { fill: #f9a825; } .creditcard .orange { fill: #ff9800; } .creditcard .orangedark { fill: #ef6c00; } .creditcard .grey { fill: #bdbdbd; } .creditcard .greydark { fill: #616161; } /* FRONT OF CARD */ #svgname { text-transform: uppercase; } #cardfront .st2 { fill: #FFFFFF; } #cardfront .st3 { font-family: 'Source Code Pro', monospace; font-weight: 600; } #cardfront .st4 { font-size: 54.7817px; } #cardfront .st5 { font-family: 'Source Code Pro', monospace; font-weight: 400; } #cardfront .st6 { font-size: 33.1112px; } #cardfront .st7 { opacity: 0.6; fill: #FFFFFF; } #cardfront .st8 { font-size: 24px; } #cardfront .st9 { font-size: 36.5498px; } #cardfront .st10 { font-family: 'Source Code Pro', monospace; font-weight: 300; } #cardfront .st11 { font-size: 16.1716px; } #cardfront .st12 { fill: #4C4C4C; } /* BACK OF CARD */ #cardback .st0 { fill: none; stroke: #0F0F0F; stroke-miterlimit: 10; } #cardback .st2 { fill: #111111; } #cardback .st3 { fill: #F2F2F2; } #cardback .st4 { fill: #D8D2DB; } #cardback .st5 { fill: #C4C4C4; } #cardback .st6 { font-family: 'Source Code Pro', monospace; font-weight: 400; } #cardback .st7 { font-size: 27px; } #cardback .st8 { opacity: 0.6; } #cardback .st9 { fill: #FFFFFF; } #cardback .st10 { font-size: 24px; } #cardback .st11 { fill: #EAEAEA; } #cardback .st12 { font-family: 'Rock Salt', cursive; } #cardback .st13 { font-size: 37.769px; } /* FLIP ANIMATION */ .container { perspective: 1000px; } .creditcard { width: 100%; max-width: 400px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: -webkit-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; cursor: pointer; display: block; margin: auto; } .creditcard .front, .creditcard .back { position: absolute; width: 100%; max-width: 400px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; color: #47525d; } .creditcard .back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .creditcard.flipped { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .cardd, .card__chip { overflow: hidden; position: relative; } .cardd, .card__chip-texture, .card__texture { animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .cardd { animation-name: rotate_500; background-color: black; background-image: radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 29.5%,hsla(0,0%,100%,0) 30%), radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 39.5%,hsla(0,0%,100%,0) 40%), radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 49.5%,hsla(0,0%,100%,0) 50%); border-radius: 0.5em; box-shadow: 0 0 0 hsl(0,0%,80%), 0 0 0 hsl(0,0%,100%), -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3); color: hsl(0,0%,100%); width: 16.3em; height: 9.8em; transform: translate3d(0,0,0); } .card__info, .card__chip-texture, .card__texture { position: absolute; } .card__chip-texture, .card__texture { animation-name: texture; top: 0; left: 0; width: 200%; height: 100%; } .card__info { font: 0.75em/1 "DM Sans", sans-serif; display: flex; align-items: center; flex-wrap: wrap; padding: 0.75rem; inset: 0; } .card__logo, .card__number { width: 100%; } .card__logo { font-weight: bold; font-style: italic; } .card__chip { background-image: linear-gradient(hsl(0,0%,70%),hsl(0,0%,80%)); border-radius: 0.2rem; box-shadow: 0 0 0 0.05rem hsla(0,0%,0%,0.5) inset; width: 1.25rem; height: 1.25rem; transform: translate3d(0,0,0); } .card__chip-lines { width: 100%; height: auto; } .card__chip-texture { background-image: linear-gradient(-80deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0.6) 48% 52%,hsla(0,0%,100%,0)); } .card__type { align-self: flex-end; margin-left: auto; } .card__digit-group, .card__exp-date, .card__name { background: linear-gradient(hsl(0deg 0% 100%), hsl(0deg 0% 100%) 15% 55%, hsl(0deg 0% 99.96%) 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Courier Prime", monospace; filter: drop-shadow(0 0.05rem hsla(0,0%,0%,0.3)); } .card__number { font-size: 0.8rem; display: flex; justify-content: space-between; } .card__valid-thru, .card__name { text-transform: uppercase; } .card__valid-thru, .card__exp-date { margin-bottom: 0.25rem; width: 50%; } .card__valid-thru { font-size: 0.3rem; padding-right: 0.25rem; text-align: right; } .card__exp-date, .card__name { font-size: 0.7rem; } .card__exp-date { padding-left: 0.25rem; } .card__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* width: 6.25rem; */ } .card__vendor, .card__vendor:before, .card__vendor:after { position: absolute; } .card__vendor { right: 0.375rem; bottom: 0.375rem; width: 2.55rem; height: 1.5rem; } .card__vendor:before, .card__vendor:after { border-radius: 50%; content: ""; display: block; top: 0; width: 1.5rem; height: 1.5rem; } .card__vendor:before { background-color: #e71d1a; left: 0; } .card__vendor:after { background-color: #fa5e03; box-shadow: -1.05rem 0 0 #f59d1a inset; right: 0; } .card__vendor-sr { clip: rect(1px,1px,1px,1px); overflow: hidden; position: absolute; width: 1px; height: 1px; } .card__texture { animation-name: texture; background-image: linear-gradient(-80deg,hsla(0,0%,100%,0.3) 25%,hsla(0,0%,100%,0) 45%); } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,30%); --fg: hsl(var(--hue),10%,90%); } } /* Animation */ @keyframes rotate_500 { from, to { animation-timing-function: ease-in; box-shadow: 0 0 0 hsl(0,0%,80%), 0.1rem 0 0 hsl(0,0%,100%), -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3); transform: rotateY(-10deg); } 25%, 75% { animation-timing-function: ease-out; box-shadow: 0 0 0 hsl(0,0%,80%), 0 0 0 hsl(0,0%,100%), -0.25rem -0.05rem 1rem 0.15rem hsla(0,0%,0%,0.3); transform: rotateY(0deg); } 50% { animation-timing-function: ease-in; box-shadow: -0.1rem 0 0 hsl(0,0%,80%), 0 0 0 hsl(0,0%,100%), -0.3rem -0.1rem 1.5rem 0.3rem hsla(0,0%,0%,0.3); transform: rotateY(10deg); } } @keyframes texture { from, to { transform: translate3d(0,0,0); } 50% { transform: translate3d(-50%,0,0); } } .card-details { margin: auto; text-align: center; display: flex; margin-top: 0.5rem; margin-bottom: 2rem; flex-direction: column; justify-content: center; align-items: center; } .dlt-btn-card { /* background: var(--lightcolor)!important; */ margin: 28px; /* width: 30%; */ color: white!important; /* border-radius: 1rem; */ z-index: 11111111; position: relative; } .help-container { width: 30%; margin: 10rem auto; /* text-align: center; */ border-radius: .5rem; box-shadow: 0 0 0 1px #0000001f; margin-bottom: 5rem; margin-top: 7.5rem; padding: 2rem; } .help-container-text { text-align: left; font-size: 15px; } .accordion .accordion-item { border-bottom: 1px solid #e5e5e5; } .accordion .accordion-item button[aria-expanded=true] { border-bottom: 1px solid #0581c6; } .accordion button { position: relative; display: block; text-align: left; width: 100%; padding: 1em 0; color: #7288a2; font-size: 1.15rem; font-weight: 400; border: none; background: none; outline: none; } .accordion button:hover, .accordion button:focus { cursor: pointer; color: var(--lightcolor); } .accordion button:hover::after, .accordion button:focus::after { cursor: pointer; color: var(--lightcolor); border: 1px solid #0581c6; } .accordion button .accordion-title { padding: 1em 1.5em 1em 0; font-family: var(--fonts); font-size: 14px; color: black; } .accordion button .icon { display: inline-block; position: absolute; top: 18px; right: 0; width: 22px; height: 22px; border: 1px solid; border-radius: 22px; } .accordion button .icon::before { display: block; position: absolute; content: ""; top: 9px; left: 5px; width: 10px; height: 2px; background: currentColor; } .accordion button .icon::after { display: block; position: absolute; content: ""; top: 5px; left: 9px; width: 2px; height: 10px; background: currentColor; } .accordion button[aria-expanded=true] { color: #0581c6; } .accordion button[aria-expanded=true] .icon::after { width: 0; } .accordion button[aria-expanded=true] + .accordion-content { opacity: 1; max-height: 11em; transition: all 200ms linear; will-change: opacity, max-height; } .accordion .accordion-content { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 200ms linear, max-height 200ms linear; will-change: opacity, max-height; } .accordion .accordion-content p { font-size: 14px; font-weight: 300; margin: 2em 0; font-family: var(--fonts); } .accordion button:focus { outline: none; } .diwali-h5 { font-family: 'Fjalla One'; font-size: 22px; text-align: center; margin-top: 0.5rem; font-weight: 700; margin-bottom: 0px; } .diwali-h5 span { color: red; } .diwali-p { text-align: center; font-family: 'Inder';font-size: 18px; } .dropdown-menu-2 li a { color: white!important; } .dropdown-menu-2 li a:hover { color: #fac000!important; } .login-btnnn { background-color: black !important; color: ghostwhite !important; padding: 3px 26px !important; border-radius: 20px 4px !important; transition: 0.1s ease; } .login-btn-ul { margin-right: 1.5rem!important; } .login-btnnn:hover { background-color: black !important; } .powerdby { display: flex; justify-content: center; align-items: center; height: 45px; background-color: #fac000; } .powerdby h1 { font-size: 20px; font-weight: 400; font-family: var(--fonts); margin: 0px; margin-right: 4px; } .powerdby h1 span { color: #3c3c3c; font-weight: 800; font-style: italic; } .kk001 .swiper-button-next , .kk001 .swiper-button-prev { top: unset!important; margin-top: -15rem; } .promotion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 0px; margin-top: 30px; transition: transform 0.5s ease; will-change: transform; transform: translateX(0%) translateY(0%); } /* Optional: Responsive adjustments */ @media (max-width: 768px) { .promotion-grid { transform: translateX(0); /* Reset transform on smaller screens */ } } @media (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } .promotion-grid { transform: none !important; transition: none !important; } } .promotional-div { width: 80%; margin: auto; margin-bottom: 66px; margin-top: 45px; position: relative; /* overflow: hidden; */ } .promotional-div h1 { /* font-family: var(--fonts); */ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Oxygen-Sans, Ubuntu, Cantarell, Helvetica, Arial, sans-serif !important; position: relative; } .promotional-div h1 span { color: var(--darkcolor); position: relative; } .promotional-div h1 span::before { content: ""; /* Empty content, using background to set the image */ display: inline-block; /* Ensuring it can accept width and height */ width: 244px; height: 50px; margin-left: -20px; position: absolute; z-index: -1; background-image: url(../images/YELLOWBRUSH.png); background-size: cover; /* Cover ensures the image covers the full area of the pseudo-element */ } /* .promotion-card-1::before { content: ""; display: inline-block; width: 177px; height: 116px; margin-left: -111px; position: absolute; z-index: 1; background-image: url(../images/best-sellling-item-png.png); background-size: cover; } */ .video-card-body { margin-top: 16rem; /* z-index: 99999999999999999; */ position: relative; overflow: visible; display: flex; display: flex; justify-content: space-between; align-content: space-between; width: 100%; background: #e8e8e8; align-items: center; padding: 0px 20px; height: 70px; color: black; border: 2px solid grey; } .top-service-h1 span::before { content: ""; display: inline-block; width: 580px; height: 113px; margin-top: -20px; margin-left: -292px; position: absolute; z-index: -1; background-image: url(../images/YELLOWBRUSH.png); background-size: cover; } .video-section-header video { width: 100%; height: auto; object-fit: cover; } .clickformoreservices { z-index: 111; position: relative; margin-right: 50%; margin-left: 44%; display: block !important; position: absolute; margin-top: -8rem; width: 13%; display: flex; align-items: center; text-align: center; background: aliceblue!important; padding: 10px !important; border-radius: 13px !important; } .clickformoreservices a { color: black; display: flex; justify-content: center; align-items: center; } .clickformoreservices i { font-size: 16px; margin-left: 5px; } .backdrop-container{ display: none; position: fixed; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); -webkit-animation: fadeIn 1.2s ease-in-out; animation: fadeIn 1.2s ease-in-out; } .mobile-nav-open-icon{ font-size: 2rem; cursor: pointer; /* margin-right: 2rem; */ color: black; /* margin-left:3rem; */ display: none; float: right; } .sidenav-container { height: 100%; width: 0; position: fixed; z-index: 11111; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 10px; display: flex; flex-direction: column; align-items: flex-start; } .sidenav-container a { text-decoration: none; font-size: 1rem; color: #818181; display: block; transition: 0.3s; margin: 10px 0; } .sidenav-container a:hover { color: #f1f1f1; } .sidenav-container .closebtn { font-size: 3rem; font-weight: 700; color:#C9002B ; padding-right: 1rem; } .logoo:hover , .logoonone:hover { cursor: pointer; } .testimonial-container { position: relative; max-width: 800px; margin: auto; } .testimonial-slider { display: flex; overflow: hidden; position: relative; } .testimonial-slide { min-width: 100%; transition: transform 0.5s ease; opacity: 0; } .testimonial-slide.active { opacity: 1; } blockquote { padding: 20px; background: #f9f9f9; border-radius: 8px; margin: 0; } .author { font-weight: bold; margin-top: 10px; } figure { margin-top: 10px; } figure img { width: 100%; height: auto; border-radius: 50%; } .testimonial-dots { text-align: center; margin-top: 20px; } .dot { height: 10px; width: 10px; margin: 0 5px; background-color: #bbb; border-radius: 50%; display: inline-block; cursor: pointer; } .dot.active { background-color: #717171; } .about-us-heading { display: block; margin: auto; text-align: center; padding: 50px 0px 0px 10px; font-family: var(--fonts); } .about-us-heading h1, .about-us-heading p { font-family: var(--fonts); } .about-us-heading span { color: #ffbc00; } .login-modal .input { caret-color: #ffbc00; } /* .login-modal .modal-content , .swal2-loading { border-radius: 10px; background: #e0e0e0; box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff; } */ .email-filed { color: white; border: 2px solid #8707ff; border-radius: 10px; padding: 10px 25px; background: transparent; max-width: 290px; } .email-filed:active { box-shadow: 2px 2px 15px #8707ff inset; } /* From Uiverse.io by WhiteNervosa */ .textInputWrapper { position: relative; width: 340px; margin: 2px 5px; margin-bottom: -10px; --accent-color: #ffbc00; } .textInputWrapper:before { transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-bottom: 1px solid rgba(0, 0, 0, 0.42); } .textInputWrapper:before, .textInputWrapper:after { content: ""; left: 0; right: 0; position: absolute; pointer-events: none; bottom: -1px; z-index: 4; width: 100%; } .textInputWrapper:focus-within:before { border-bottom: 1px solid var(--accent-color); } .textInputWrapper:before { transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-bottom: 1px solid rgba(0, 0, 0, 0.42); } .textInputWrapper:focus-within:before { border-bottom: 1px solid var(--accent-color); transform: scaleX(1); } .textInputWrapper:focus-within:after { border-bottom: 2px solid var(--accent-color); transform: scaleX(1); } .textInputWrapper:after { content: ""; transform: scaleX(0); transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms; will-change: transform; border-bottom: 2px solid var(--accent-color); border-bottom-color: var(--accent-color); } .textInput::placeholder { transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms; opacity: 1; user-select: none; color: rgba(255, 255, 255, 0.582); } .textInputWrapper .textInput { border-radius: 5px 5px 0px 0px; box-shadow: 0px 2px 5px rgb(35 35 35 / 30%); max-height: 50px; background-color: #252525; transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); transition-duration: 200ms; transition-property: background-color; color: #e8e8e8; font-size: 14px; font-weight: 500; padding: 12px; width: 100%; border-left: none; border-bottom: none; border-right: none; } .textInputWrapper .textInput:focus, .textInputWrapper .textInput:active { outline: none; } .textInputWrapper:focus-within .textInput, .textInputWrapper .textInput:focus, .textInputWrapper .textInput:active { background-color: #353535; } .textInputWrapper:focus-within .textInput::placeholder { opacity: 0; } .reviewsssection .swiper-button-next, .reviewsssection .swiper-button-prev { top: unset!important; margin-top: -20rem!important; } .date-slider .swiper-button-next, .date-slider .swiper-button-prev { margin-top: -5rem!important; } .diwaliofferslider { text-align: center; margin: auto; display: block; margin-top: 5rem; margin-bottom: 2rem; /* font-family: var(--fonts); */ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Oxygen-Sans, Ubuntu, Cantarell, Helvetica, Arial, sans-serif !important; font-weight: 400; } .diwaliofferslider span::before { content: ""; display: inline-block; width: 280px; height: 50px; margin-left: 0px; position: absolute; z-index: -1; background-image: url(../images/YELLOWBRUSH.png); background-size: cover; } .diwaliofferinputinnerdiv { position: absolute; z-index: 1111111111; margin-top: 30rem; margin-left: 9rem; color: white; width: 20%; } .diwaliofferinputinnerdiv div { display: flex; margin-bottom: 1rem; } .diwaliofferinputinnerdiv button { margin-left: 1rem!important; background: #008fc8!important; } .offerssection .swiper-button-prev { top: unset!important; margin-top: -19.3rem; height: 179px; left: 1.5rem; opacity: 0!important; } .offerssection .swiper-button-next { top: unset!important; right: unset!important; left: unset!important; height: 186px; margin-left: 1.4rem; margin-top: -33rem; opacity: 0!important; } .offerssection .swiper-button-next:after, .offerssection .swiper-button-prev:after { opacity: 0; } .services-text-box { text-align: center; font-family: var(--fonts); color: #09638f; margin-top: 2.9rem; } .services-text-box h1 { font-weight: 700; } .services-text-box h1 span { color: #fcbc14; } .services-text-box h6 { font-family: 'Dancing Script', cursive; font-size: 24px; } .services-text-box p { font-size: 15px; width: 50%; display: block; margin: auto; } .services-card-grid-container { display: grid; grid-template-columns: repeat(5, 1fr); /* Set to 5 columns */ gap: 30px 15px; padding: 10px; width: 70%; margin: auto; margin-top: 2rem; } .services-card-grid-item { cursor: pointer; text-align: center; font-family: var(--fonts); color: #616161; font-size: 14px; } .services-card-grid-item img { display: block; margin: auto; } .req-quote-btn { display: block; margin: auto; cursor: pointer; position: absolute; top: 42%; /* Use top and transform for centering */ left: 50%; width: 20%; transform: translate(-50%, -50%); } #contactform #form-message { display: block; width: 100%; margin: auto; text-align: center; margin-top: 1rem; } #contactform #contact-form-submit-button { display: flex; justify-content: center; align-items: center; gap: 10px; } .footer-container #subform-response { font-family: var(--fonts); font-size: 12px; margin-top: 0.5rem; } .form-containercareer #career-form-response { display: block; margin: auto; text-align: center; margin-top: 0.2rem; } .header-socialdiv { position: absolute; right: 0; margin-top: -29rem; display: flex; flex-direction: column; /* Ensures the items stack vertically */ align-items: flex-end; /* Keeps the elements aligned to the right */ } .header-socialdiv div { background: var(--lightcolor); padding: 10px; margin-bottom: 0.5rem; cursor: pointer; display: flex; align-items: center; /* Aligns the icon and text vertically */ } .header-socialdiv div i { color: white; } .hover-expand { width: 49px; height: 44px; transition: width 0.3s ease, border-radius 0.3s ease; overflow: hidden; position: relative; display: inline-flex; /* Keep items in a horizontal layout */ align-items: center; /* Center the icon vertically */ } .hover-expand:hover { width: 260px; border-radius: 3px; } .hover-expand a { opacity: 0; width: 0; transition: opacity 0.3s ease, width 0.3s ease; border: none; background: transparent; color: white; font-size: 20px; padding-left: 15px; display: inline-grid; font-size: 14px; font-family: var(--fonts); } .hover-expand:hover a { opacity: 1; width: 200px; } .hover-expand:hover a:hover { color: white; } .booking-successdiv { width: 50%; margin: 10rem auto; text-align: center; border-radius: .5rem; box-shadow: 0 0 0 1px #0000001f; margin-bottom: 5rem; margin-top: 7.5rem; padding: 2rem; font-family: var(--fonts); } .booking-successdiv h1 { color: var(--lightcolor); margin-bottom: 1rem; font-weight: 400; } .booking-successdiv p a { color: #fac000; } .reviewsssection { position: relative; } .reviewbtnn { position: absolute; top: 460px; left: 90px; z-index: 1111111111111; opacity: 0; width: 200px; height: 80px; display: block; } .offerssectionscrool .container { max-width: unset; height: 600px; margin: auto; overflow: hidden; } .offerssectionscrool .swiper-container-parallax, .offerssectionscrool .swiper-wrapper { /* height: 450px; */ display: flex; } .offerssectionscrool .swiper-wrapper { display: flex; } .offerssectionscrool .swiper-slide { display: flex; width: 1500px; } .offerssectionscrool .media img{ display: block; position: relative; } .mr_x6 { margin-inline-end: 1.5rem; } .main-card.radiusX3 { border-radius: 12px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.08); padding: 1.5rem; margin-bottom: 2rem; } .p_x6 { padding: 1.5rem; } .mb_x8 { margin-bottom: 2rem; } .service-attributes { position: relative; margin-top: 49px; /* To allow space for sticky top */ } .attribute-categories-menu { background-color: #fff; /* border: 1px solid rgba(0, 0, 0, 0.08); */ border-radius: 12px 12px 0 0; margin: -73px 0 0; max-width: 106%; padding: 20px 11px 13px; position: sticky; width: 106%; z-index: 3; top: 79px; margin-left: -24px; } .scrollable-section { position: relative; display: flex; overflow-x: auto; scroll-behavior: smooth; overflow-x: hidden; } .clickable-area { position: fixed; top: 60px; /* Adjust based on your header size */ width: 50px; height: 100%; display: flex; align-items: center; z-index: 200; cursor: pointer; } .clickable-area.left { left: 0; } .clickable-area.right { right: 0; } .arrow-icon { background: rgba(255, 255, 255, 0.9); border-radius: 50%; padding: 10px; } .section-content { display: flex; flex-wrap: nowrap; margin: 0 -24px; padding: 0 24px; overflow: hidden; } .attribute-categories { display: flex; flex-wrap: wrap; padding-bottom: 8px; } .attribute-category-button { margin-inline-end: 12px; margin-bottom: 12px; padding: 0.5rem 1rem; background-color: #fff; border: 1px solid #6a737b; border-radius: 5rem; color: #1a3d51; font-weight: 700; cursor: pointer; transition: background 0.3s, color 0.3s; text-align: center; white-space: nowrap; } /* .attribute-category-button.active, .attribute-category-button:hover { background: #d9f6ff; border: 1px solid #00c3ff; color: #00c3ff; } */ .attribute-category-button.active, .attribute-category-button:hover { background: #36a7d4; border: 1px solid #36a7d4; color: white; } .attribute-items { transition: .3s ease-out; } .attribute-item { margin-bottom: 2rem; padding-bottom: 1rem; } .custom-title { font-weight: 500; font-family: var(--fonts); text-transform: none; color: rgba(0, 0, 0, 0.87); font-size: 18px; } .custom-title.h3 { font-size: 18px; line-height: 32px; } .custom-title.h4 { font-size: 18px; line-height: 24px; } .attribute-card { border-bottom: 1px solid #f0f0f0; margin: 0 -24px; padding: 16px 24px; display: flex; align-items: center; } .attribute-image { margin-right: 0.75rem; width: 150PX; HEIGHT: 120PX; border-radius: 50%; overflow: hidden; } .attribute-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .attribute-content { width: 100%; } .attribute-content p { color: rgba(0, 0, 0, 0.6); font-size: 14px; line-height: 20px; height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 0rem; } .attribute-price { display: flex; align-items: center; cursor: default; } .body-text.dark { color: rgba(0, 0, 0, 1); font-weight: 500; } .body-text.light { color: rgba(0, 0, 0, 0.38); text-decoration: line-through; } .add-attribute-button { background-color: #00c3ff; border-radius: 24px; color: #fff; cursor: pointer; font-weight: 600; display: block; align-items: center; } .service-footer { background-color: #fff; border-radius: 0 0 12px 12px; bottom: 0; /* box-shadow: 0 -3px 12px -3px rgba(0, 0, 0, 0.08); */ /* margin: 0rem -1.5rem 0.5rem; */ padding: 1.5rem 0rem; position: sticky; z-index: 2; width: 100%; } .default-button.secondary { background-color: #36a7d4; border: 1px solid transparent; color: #fff; font-weight: 700; } .default-button.lg { height: 3rem; display: flex; justify-content: center; align-items: center; line-height: 28px; border-radius: 4rem; width: 60%; text-align: center; margin: auto; } .show { display: block !important; } .no-wrap { flex-wrap: nowrap !important; } .arrow-display { display: block !important; } .reduced-padding { padding-top: 27px !important; } .main-section-service { width: 100%; } .services-price-section { display: flex; justify-content: space-between; } .add-btn-service { width: 18%; margin-right: 0rem; } .scrollable-section .clickable-area.left { background: linear-gradient(270deg, #ffffff03, #ffffffe5 57%, #fff); } .scrollable-section .clickable-area { align-items: center; cursor: pointer; display: flex; height: 100%; position: absolute; top: 0; width: 50px; z-index: 2; } .scrollable-section .clickable-area .arrow-icon { border-radius: 50%; display: flex; justify-content: center; margin: 0 10px; padding: 6px; width: 30px; } .reverse-y { transform: rotateY(180deg); } .sltservice { text-align: left; margin: auto; margin-left: 1.5rem; margin-right: 1.4rem; line-height: 22px; font-family: var(--fonts); } .sltservice p { font-size: 22px; margin-bottom: 0px; } .custom-button { border: none; color: white; margin-top: 0px; padding: 0.25rem 1rem; width: 100%;} .cartdiv i { font-size: 14px; color: white; } .custom-button:hover { background-color: #0290c8; } .counter-wrapper a { color: white; font-weight: 400; } .services-offer-section { margin: auto; display: block; text-align: center; } .services-offer-section img { width: 40%; } .attribute-item:last-child { margin-bottom: 0rem; padding-bottom: 0rem; } .service-footer .default-button a { color: white!important; width: 100%; } .service-footer .checkoutButtonservice.disabled { opacity: 0.7; cursor: not-allowed; } .service-footer .checkoutButtonservice { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .counter-wrapper a { font-size: 14px; } .counter-wrapper a:hover { color: white; } .offer-icon img { width: 50%; height: 53%; object-fit: contain; } #offerContainer .offer-card:nth-of-type(4) .offer-content .offer-icon img { width: 100%; height: 100%; } #offerContainer .offer-card:nth-of-type(5) .offer-content .offer-icon img { width: 80%; height: 100%; } #offerContainer .offer-card:nth-of-type(6) .offer-content .offer-icon img { width: 100%; height: 44%; object-fit: cover; } #offerContainer .offer-card:nth-of-type(7) .offer-content .offer-icon img { width: 80%; height: 44%; object-fit: cover; } #offerContainer .offer-card:nth-of-type(8) .offer-content .offer-icon img { width: 98%; height: 30%; object-fit: cover; } .extraOffers { opacity: 0; transition: opacity 0.5s ease; /* Adjusted for smoother effect */ visibility: hidden; /* Initially hidden */ } .extraOffers.visible { opacity: 1; visibility: visible; /* Make visible when opacity is 1 */ } .hidden { display: none; /* Use display none to hide */ } .visible { display: block; /* Make visible */ } .offer-container { overflow: hidden; transition: height 0.9s ease; height: 300px; /* Initial height */ } .servicespricesaed { color: #00c0ff; font-weight: 500; } .services-container { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .servicescontent { flex: 2; max-width: 43%; } .faq-wrapper { /* flex: 1; */ max-width: 90%; } /* For better responsiveness, add media queries */ @media (max-width: 768px) { .services-container { flex-direction: column; /* Stack vertically on smaller screens */ } .servicescontent, .faq-wrapper { max-width: 100%; } } /* .servicescontent { width: 70%; margin: auto; margin-right: 2rem; display: block; line-height: 1.5rem; font-family: var(--fonts); } */ .servicescontent { font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Oxygen-Sans, Ubuntu, Cantarell, Helvetica, Arial, sans-serif; max-width: 69%; margin: auto; margin-right: 22rem; display: block; line-height: 1.5rem; /* font-family: var(--fonts); */ /* background: #f9f9f9; */ border: 2px solid #fafafa; padding: 29px; margin-bottom: 1rem; } .servicescontent h1, .servicescontent h3 { font-size: 25px; font-weight: 600; } .servicescontent h3 { margin-top: 2rem; font-weight: 400; } .servicescontent p { font-size: 14px; } .servicescontent h2 { font-size: 21px; font-weight: 600; margin: 30px 0px 11px 0px; } .servicescontent li { margin: 7px 0px 7px 0px; font-size: 14px; } .servicescontent ul, .servicescontent ol { margin-bottom: 2rem; line-height: 1.6rem; } .servicebenifitsheading { font-family: 'Poppins', sans-serif!important; font-weight: 400; text-align: center; margin-top: 2rem; } .servicebenifitsheading span { color: #00c3ff; font-weight: 500; } .benifitsp { margin-top: 1rem; font-size: 16px!important; text-align: center; } .servicectabtn { background-image: url('../images/servicesctabg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 95px; } .servicectabtn div { width: 61%; display: block; margin: auto; } .servicectabtn div h6 { font-size: 42px; margin-bottom: 0px; color: var(--lightcolor); } .servicectabtn div p { font-size: 13px; color: var(--lightcolor); } .servicectabtn .footer-social { width: 100%; } .servicectabtn .footer-social a { height: 26px; width: 26px; } .servicectabtn .footer-social a i { font-size: 12px; } .ctabooknowwhatsapp { width: 25%!important; border-radius: 20px!important; background: #063e69!important; color: white!important; } .ctabooknowcall { width:25%; border-radius: 20px!important; background: #fcbc14!important; color: white!important; } .servicectabtn .ctaservicebtn { width: 100%; margin-top: 3rem; } #offerContainer { overflow: hidden; /* Prevent overflow during transitions */ transition: max-height 0.5s ease-in-out; /* Smooth transition for max-height */ max-height: 755px !important; /* Initially set to collapsed height */ } .extraOffers { display: none; /* Start hidden */ opacity: 0; transition: opacity 0.3s ease-in-out; /* Smooth fade in/out */ } .extraOffers.visible { display: block; /* Show the offers when visible */ opacity: 1; } .attribute-category { display: contents; } .attribute-categories { display: flex; overflow-x: hidden; /* Enable horizontal scrolling */ scroll-behavior: smooth; /* Ensure smooth scrolling */ white-space: wrap; /* Prevent tabs from wrapping */ white-space: nowrap; } .clickable-area { display: block; cursor: pointer; } .services-container .faq-wrapper { width: 25%; font-family: var(--fonts); margin-right: 11rem; } .faq-wrapper h1 { margin-bottom: 20px; } .faq-container { background-color: white; color: black; border-radius: 20px; box-shadow: 0 1px 2px 0 rgb(0, 0, 0, 0.25); margin: 20px 0; } .faq-question { font-size: 14px; font-weight: 500; padding: 20px 80px 20px 20px; position: relative; display: flex; align-items: center; cursor: pointer; } .faq-question::after { content: "\002B"; font-size: 2.2rem; position: absolute; right: 20px; transition: 0.2s; } .faq-question.active::after { transform: rotate(45deg); } .faq-answer-container { max-height: 0; overflow: hidden; transition: 0.3s; } .faq-answer { padding: 0 20px 20px; line-height: 1.5rem; font-size: 13px; } /* Section Styling */ .testimonials-section { padding: 40px 20px; text-align: center; } .testimonials-section h2 { font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #333; margin-top: 1rem; } /* Testimonials Container */ .testimonials-container { display: grid; gap: 20px; max-width: 800px; margin: 0 auto; } /* Adjust layout for larger screens */ @media (min-width: 768px) { .testimonials-container { grid-template-columns: repeat(3,1fr); } } /* Testimonial Card Styling */ .testimonial-card { background: #f9f9f9; padding: 20px 20px 0px 20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: relative; text-align: left; } /* Quote Icon */ .quote-icon { font-size: 24px; color: #fbb034; /* Accent color, can be adjusted */ margin-bottom: 10px; } /* Testimonial Text */ .testimonial-text { font-style: italic; font-size: 12px; color: #555; line-height: 1.6; } /* Testimonial Author */ .testimonial-author { font-size: 13px; color: #888; margin-top: 15px; display: block; } /* Optional Star Ratings */ .rating-stars { color: #fbb034; /* Color for the stars */ font-size: 18px; margin-bottom: 10px; } /* Add Review Button Styling */ .add-review-button { margin-top: 2.5rem; } .addreviewbtnn { display: inline-block; /* Ensures the button behaves like a block element */ background-color: #007bff; text-decoration: none; padding: 10px 20px; font-size: 16px; border-radius: 22px !important; cursor: pointer; background-color: #00c3ff !important; color: #fff !important; /* Text remains white */ transition: background-color 0.3s ease; } .addreviewbtnn:hover { background-color: #0290c8 !important; color: #fff !important; /* Text remains white */ } .addreviewbtnn:active { background-color: #004080; color: #fff !important; /* Text remains white */ } /* .faq-question.active + .faq-answer-container { } */ @media screen and (max-width: 790px){ html { font-size: 14px; } .faq-wrapper { width: 80%; } } .dropped-service-container { display: flex; align-items: center; justify-content: space-between; background-color: #f0f0f0; /* Light background for visibility */ padding: 8px 12px; border-radius: 4px; margin-bottom: 8px; width: 90%; /* Adjust as needed */ font-family: var(--fonts); } .cancel-btn { background: aliceblue; border: none; color: #075d8c; border-radius: 50%; font-size: 1.2rem; cursor: pointer; width: 39px; height: 37px; margin-left: 10px; } .customize-quote-section { padding: 15px; height: auto; margin-bottom: 8rem; } .bucket-container { display: flex; flex-direction: column; align-items: center; gap: 13px; width: 100%; margin: auto; margin-left: 24px; margin-top: 5rem; } /* Initially disable all pyramid levels except the first one */ .bucket { opacity: 0.4; /* Visually show that it's disabled */ pointer-events: none; /* Disable dragging */ } /* Enable interaction and visibility when the bucket is enabled */ .bucket.enabled { opacity: 1; /* Fully visible */ pointer-events: auto; /* Enable dragging */ cursor: grab; /* Show the hand-like cursor */ } /* Add styles for a dragging effect (optional) */ .bucket.dragging { opacity: 0.5; /* You can modify this to give visual feedback when dragging */ } .pyramid-level-1, .pyramid-level-2, .pyramid-level-3, .pyramid-level-4, .pyramid-level-5, .pyramid-level-6 { display: flex; justify-content: center; gap: 20px; /* Adjust the gap between items in each row */ } .pyramid-level-1 { justify-content: center; /* Deep cleaning stays at the top, centered */ } .pyramid-level-2 { width: 35%; } .pyramid-level-3 { width: 56%; } .pyramid-level-4 { width: 74%; } .pyramid-level-5 { width: 92%; } .pyramid-level-6 { width: 100%; /* Full width to fit the 6 items */ } /* Responsive adjustments */ @media (max-width: 768px) { /* Decrease gaps and adjust widths for medium screens */ .bucket-container { gap: 8px; margin-left: 0; margin-top: 3rem; } .pyramid-level-1, .pyramid-level-2, .pyramid-level-3, .pyramid-level-4, .pyramid-level-5, .pyramid-level-6 { gap: 15px; } .pyramid-level-2 { width: 50%; } .pyramid-level-3 { width: 70%; } .pyramid-level-4 { width: 85%; } .pyramid-level-5, .pyramid-level-6 { width: 100%; } } @media (max-width: 480px) { /* Stack items for very small screens */ .bucket-container { gap: 5px; margin-top: 2rem; } .pyramid-level-1, .pyramid-level-2, .pyramid-level-3, .pyramid-level-4, .pyramid-level-5, .pyramid-level-6 { align-items: center; gap: 10px; } .pyramid-level-1, .pyramid-level-2, .pyramid-level-3, .pyramid-level-4, .pyramid-level-5, .pyramid-level-6 { width: 18%; } .customize-quote .d-block { margin-left: 0rem!important; } .drag-container { height: 86% !important; margin: auto!important; margin-top: 5rem!important; padding: 20px!important; width: 100%!important; } .drag-container h4 { font-size: 1rem!important; } .request-quote-btn { font-size: 10px!important; } .dropped-service-container { padding: 7px 8px!important; } .dropped-service-container .dropped-service { margin-top: unset!important; font-size: 12px!important; } .dropped-service-container .cancel-btn { width: 22px!important; height: 19px!important; font-size: 0.8rem!important; } #total-price { margin-bottom: 0rem!important; } #total-price h2 { font-size: 16px!important; } #total-price p { font-size: 9px!important; } } /* Add styles for the right section */ .drag-container { border: 2px dashed #09638f; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 63%; border-radius: 6%; width: 70%; margin-top: 16.5rem; margin-left: 130px; } .drag-container h4 { font-size: 1.5rem; text-align: center; color: #bbbbbb; margin-bottom: 20px; /* Add some space between the text and button */ font-family: var(--fonts); } .request-quote-btn { background-color: #ffc107; color: #000; border: none; padding: 10px 20px; font-size: 15px; cursor: pointer; display: inline-block; border-radius: 24px; margin-top: auto; /* This will push the button to the bottom */ cursor: not-allowed; /* Change cursor to indicate it's disabled */ opacity: 0.6; /* Reduce opacity to indicate disabled state */ transition: background-color 0.3s, opacity 0.3s; align-self: center; /* Ensure the button is centered horizontally */ } .request-quote-btn.enabled { cursor: pointer; /* Change cursor when enabled */ opacity: 1; /* Full opacity when enabled */ } .request-quote-btn.proceed { background-color: #00c0ff; color: white; transition: 0.2s linear; padding: 10px 60px 10px 60px; } .request-quote-btn.request-quote { background-color: #00c0ff; /* Original blue color for 'Request a Discounted Quote' */ color: white; transition: 0.2s linear; } .request-quote-btn.proceed:hover { background-color: #ffbc00; color: black; transition: 0.2s linear; } .request-quote-btn:hover { background-color: #ffca2c; color: black; transition: 0.2s linear; } .dropped-service { font-size: 1rem; color: #000; margin-top: 10px; font-family: var(--fonts); } .reqmodal .modal-header { border: none; justify-content: end; padding: 0rem 0rem; } .reqmodal .btn-close { border: none; background: none; padding: 0px; } .reqmodal .modal-content { border-radius: 23px; background: rgba(245, 253, 255, 0.9); box-shadow: 0px 0px 4px #bebebe, 0px 0px 12px #000; } .card-options img { max-width: 100px; /* Set maximum width for logos */ margin-right: 10px; /* Space between image and text */ } .card-options label { cursor: pointer; /* Change cursor to pointer for better UX */ } @media (max-width: 768px) { .card-options { flex-direction: column; /* Stack options on smaller screens */ align-items: center; /* Center items */ } .card-options div { margin-bottom: 20px; /* Space between stacked options */ } } .card-selection { display: flex; flex-wrap: wrap; /* Allow wrapping of items */ justify-content: space-between; /* Space out options evenly */ margin-top: 20px; /* Space above card options */ } .card-item { flex: 1 1 calc(50% - 20px); margin: 10px; cursor: pointer; border-radius: 36px; background: #e0e0e0; padding: 15px; transition: background 0.3s, color 0.3s; display: flex; justify-content: center; /* margin: auto; */ text-align: center; /* column-rule-style: outset; */ flex-direction: column; align-items: center; } .card-item img { width: 75px; height: auto; margin-top: 10px; } .card-item.selected { background: #f5fdff; /* Background color when selected */ color: black; /* Text color when selected */ box-shadow: none; /* Remove shadow when selected */ } .card-item span { flex-grow: 1; /* Take remaining space */ text-align: left; /* Align text to the left */ } .our-customize-p { font-family: var(--fonts); font-size: 26px; margin-bottom: 1.5rem; } .our-customize-p span { color: #00c0ff; font-weight: 600; } .customize-quoteee { width: 80%; display: block; margin: auto; margin-bottom: 10rem; } .customize-quoteee .faq-wrapper { width: 80%; margin-left: 50px; margin-top: 4rem; } .customize-quoteee .faq-answer { padding: 0 20px 20px; line-height: 1.5rem; font-size: 16px; } .customize-quoteee .faq-question { font-size: 16px; font-weight: 500; padding: 20px 80px 20px 20px; position: relative; display: flex; align-items: center; cursor: pointer; } .customize-quoteee .video-overlay { height: 84%; } .customize-quoteee .video-card-body { margin-top: 14rem; } #quoteModal { text-align: center; font-family: var(--fonts); margin-top: 2rem; } #quoteModal h4 { font-size: 30px; } #quoteModal #totalPrice { font-size: 30px; } #quoteModal p { font-size: 12px; } #total-price { font-family: var(--fonts)!important; font-weight: bold; } #total-price p { font-size: 12px!important; font-family: var(--fonts)!important; } #total-price h2 { font-size: 25px!important; font-family: var(--fonts)!important; } /*Quantity*/ .counterWrapper { display: flex; align-items: center; gap: 10px; /* Simple spacing without using margins */ } .quantity-controls { display: flex; align-items: center; gap: 5px; margin-right: -19px; margin-left: -8rem; } .quantity-btn { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background: none; border: none; cursor: pointer; font-size: 29px; color: #ffbc00; border-radius: 5px; } .quantity-btn:hover { color: #dba100; transition: 0.5s ease; } .quantity-input { width: 50px; height: 15px; text-align: center; /* border: none; */ outline: none; margin: 0 5px; } /* For Webkit browsers (Chrome, Safari, Edge) */ .quantity-input::-webkit-outer-spin-button, .quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* For Firefox */ .quantity-input[type="number"] { -moz-appearance: textfield; } .mixmatch { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px; width: 100%; justify-items: center; align-items: center; } .icon-container { display: flex; flex-direction: column; /* Stack the icon and text vertically */ align-items: center; /* Center the icon and text */ text-align: center; /* Center the text */ } .service-icon-blue { width: 70px; height: 70px; margin-bottom: 10px; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); border-radius: 38px; transition: box-shadow 0.25s ease, transform 0.25s ease; /* Smooth and slightly faster transition */ } .service-icon-blue:hover { box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */ transform: translateY(-4px); /* Raise the icon slightly */ } .icon-container p { font-size: 14px; /* Adjust font size as needed */ margin: 0; /* Remove default margin */ color: #333; /* Adjust text color as needed */ } .side-panel { position: fixed; right: -100%; /* Hide it off-screen initially */ top: 0; width: 50%; height: 100%; background-color: #fff; box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3); overflow-y: auto; transition: right 0.4s ease; z-index: 1000; } .side-panel .panel-content { padding: 0px; } .side-panel .close-btn { position: absolute; top: 10px; right: 20px; font-size: 24px; cursor: pointer; padding: 6px; color: #36a7d4; } .side-panel .close-btn:hover { background-color: #36a7d4; color: white; } .side-panel.loading .panel-content { opacity: 0.5; /* Dim the content area to indicate loading */ } .side-panel.open { right: 0; /* Slide in the side panel */ } .instructions-content { position: relative; background-size: cover; background-position: center; width: 100%; /* height: 103%; */ margin-top: 6rem; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; color: #000; } /* Make sure each column div stretches equally */ .left-column, .right-column { display: flex; flex-direction: column; justify-content: start; } /* Optional: Remove default margins if needed */ .mixmatch h5, .mixmatch p { margin: 0; } .right-column{ margin-top: 0.7rem; } #discountQuoteModal .form-group input, .reqmodal .form-group select,.reqmodal .form-group textarea { border: 1px solid #0581c6; padding: 20px; border-radius: 42px; } #discountQuoteModal .form-control:focus { box-shadow: 0 0 0 .2rem rgba(5, 129, 198, .25); } #discountQuoteModal h2 { margin-bottom: 1.5rem; font-size: 22px; } #discountQuoteModal button { display: block; margin: auto; background: #00c0ff; padding: 7px 40px 7px 40px; border-radius: 6px; color: white; } #discountQuoteModal .spinner { border: 2px solid #f3f3f3; /* Light grey */ border-top: 2px solid #3498db; /* Blue */ border-radius: 50%; width: 16px; height: 16px; animation: spinn 1s linear infinite; display: inline-block; vertical-align: middle; margin-left: 8px; } @keyframes spinn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #map-container { position: relative; height: 400px; width: 100%; } #fixed-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); /* Adjust the translateY value based on your marker image's height */ pointer-events: none; /* Allows map interactions through the marker */ } /* Optional: Style for the info window */ .info-window { background-color: #00802b; color: white; padding: 10px; font-size: 12px; width: 100%; line-height: 1.5em; display: inline-block; } #booking_summary h1 , #booking_summary h3 { font-size: 17px; color: #00000061; font-weight: 400; } #booking_summary #services-list{ list-style-type: none; } #booking_summary .totalpricee { font-size: 20px; text-align: center; margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; } .pricedivcustomize p { display: flex; justify-content: space-between; margin-bottom: 0.9rem; font-size: 17px; color: #00000061; font-weight: 400; } .pricedivcustomize p span { color: black; } #additionalDiscountPercentage { color: #00000061; } .proceed-pkg-btn { margin-top: 2rem!important; background: #0892ca!important; padding: 7px 50px 7px 50px!important; border-radius: 20px!important; color: white!important; } .vouchercodeptext { color: #000000de; text-align: right; width: 55%; word-wrap: break-word; font-size: 13px; } #applied-voucher-code , #applied-discount-amount , #applied-bank-code , #applied-bank-discount-amount { display: flex; justify-content: space-between; margin-top: 0.8rem; } #applied-discount-amount , #applied-bank-discount-amount { margin-top: 0.3rem!important; } #applied-bank-code { margin-top: 0rem!important; } #applied-voucher-code h3 , #applied-discount-amount h3 { font-size: 15px!important; } .summaryaddressh2 { font-size: 17px; color: #00000061; font-weight: 400; } #street_summary { margin-bottom: 1rem!important; color: #000000de; text-align: right; width: 80%; word-wrap: break-word; font-size: 13px; } #address-div { justify-content: space-between; align-items: center; } .cutomizepkgselected { font-size: 17px!important; color: #00000061!important; font-weight: 400!important; } .locate-me-button { align-items: center; background: #d9f6ff; border-radius: 16px; cursor: pointer; display: flex; height: 32px; justify-content: center; padding: 0 8px 2px; margin-top: 0.2rem; margin-left: 1rem; } .locate-me-button span { color: #00c3ff; display: block; font-size: 14px; line-height: 18px; margin-left: 2px; width: 105px; } .locate-me-button .locate-me-icon { height: 18px; padding-top: 1px; width: 18px; } .btn-div-back-next { display: flex; justify-content: space-between; } .btn-div-back-next .back-pkg-btn { margin-top: 2rem !important; background: #0892ca !important; padding: 7px 50px 7px 50px !important; border-radius: 20px !important; color: white !important; margin-right: 1rem!important; border: none!important; } #discounted-total-container { text-align: center; margin-top: 1rem; font-weight: bolder; } #discounted-total-container label { font-size: 19px; } #discounted-total { font-size: 22px; margin-top:0.5rem; } /* footer2 */ .footer-2 .cities .services a { cursor: default; } .footer-2 .footer-title { color: black; font-size: 18px; font-weight: 600!important; line-height: 24px; /* margin: .5rem 0; */ } .footer-2 .services { flex-wrap: wrap; margin: 0 -6px; padding-bottom: 1.5rem; } .footer-2 .is-flex { display: flex; } .footer-2 .services .service { background: none; border-radius: 12px; color: black; display: inline-block; font-size: 13px; font-weight: 500; line-height: 20px; margin: .5rem 6px; padding: 2px 8px; border: 1px solid #063f6a; } .footer-2 ._fs, .footer-2 ._vc { display: flex; } .footer-2 ._vc { align-items: center; } .footer-2 ._c, .footer-2 ._sb { display: flex; } .footer-2 ._sb { justify-content: space-between; } .footer-2 .cities-wrapper { display: flex; flex-wrap: wrap; margin: 0 -24px; } .footer-2 .cities-wrapper .cities { margin: 0 22px; } .footer-2 .footer-container .footer-span-text { font-size: 18px; } .phonenumbertext { display: inline-block; font-size: 1rem; font-weight: 400; letter-spacing: .1px; line-height: 1.5rem; margin-bottom: 1px; color: #00000061; } #phone-number-input { padding-left: 92px; padding-right: 38px; border-bottom: 1px solid #e0e0e0; border-radius: 0; padding-bottom: 5px; padding-top: 8px; border: none; border-radius: 4px; font-size: 1rem; font-stretch: normal; font-style: normal; font-weight: 400; letter-spacing: normal; line-height: 1.5rem; outline: 0; padding: .75rem 1rem; width: 100%; } .phone-number-div { display: flex; justify-content: center; align-items: baseline; border-bottom: 1px solid #dee2e6; } .phone-number-div .flag { border-radius: 100%; height: 29px; width: 35px; margin-top: 2px; overflow: hidden; transform: scale(.8); margin-inline-end: .25rem; } .phone-number-div .phone-number-text { line-height: 24px; } #switchVerification { font-size: 12px; } #verifyOtpBtn { background: black; width: 80%; height: 50px; border-radius: 1000px; } #email-form .input-wrapper { width: 100%; height: 38px; border-radius: 20px; padding: 5px; box-sizing: content-box; display: flex; align-items: center; background-color: whitesmoke; } #email-form .input-wrapper .icon { width: 30px; fill: rgb(0, 0, 0); margin-left: 8px; transition: all 0.3s; } #email-form .input-wrapper .input { /* max-width: 170px; */ height: 100%; border: none; outline: none; padding-left: 15px; background-color: whitesmoke; color: black; font-size: 1em; } #email-form .input-wrapper .input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px whitesmoke inset; -webkit-text-fill-color: black; } #registrationDetails .input { /* max-width: 190px; */ height: 44px; background-color: #05060f0a; border-radius: .5rem; padding: 0 1rem; border: 2px solid transparent; font-size: 1rem; transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s; } #registrationDetails .label { display: block; margin-bottom: .3rem; font-size: .9rem; font-weight: bold; color: #05060f99; transition: color .3s cubic-bezier(.25,.01,.25,1) 0s; } #registrationDetails .input:hover, #registrationDetails .input:focus, #registrationDetails .input-group:hover #registrationDetails .input { outline: none; border-color: #05060f; } #registrationDetails .input-group:hover .label, #registrationDetails .input:focus { color: #05060fc2; } #registrationDetails .input-group { display: block!important; width: 100%; margin: auto; /* margin-bottom: 20px; */ } #emailInputContainer { width: 100%!important; } #completeRegistrationBtn { background: black!important; width: 80%!important; height: 50px!important; border-radius: 100px!important; } .registration-mr-select .select { width: 100%; cursor: pointer; position: relative; transition: 300ms; color: white; overflow: hidden; } .registration-mr-select .selected { background-color: #f5f5f6; color: black; padding: 5px; margin-bottom: 3px; border-radius: 5px; position: relative; z-index: 100000; font-size: 15px; display: flex; align-items: center; justify-content: space-between; height: 42px; border-radius: 10px; padding: 0.6em; } .registration-mr-select .arrow { position: relative; right: 0px; height: 10px; transform: rotate(-90deg); width: 25px; fill: black; z-index: 100000; transition: 300ms; } .registration-mr-select .select:hover { overflow: visible; } .registration-mr-select .options { display: flex; /* Keep it as flex */ flex-direction: column; border-radius: 5px; padding: 5px; background-color: ghostwhite; position: absolute; top: 40px; /* Set position relative to select */ opacity: 0; /* Initially hidden */ visibility: hidden; /* Hide from layout */ transition: opacity 300ms, visibility 300ms; /* Transition both opacity and visibility */ z-index: 1000; /* Ensure it appears above other content */ } .registration-mr-select .select:hover > .options { opacity: 1; /* Fade in */ visibility: visible; /* Make it visible in layout */ } .registration-mr-select .select:hover > .selected .arrow { transform: rotate(0deg); } .registration-mr-select .option { border-radius: 5px; padding: 5px; transition: 300ms; background-color: #f5f5f6; width: 150px; font-size: 15px; color: black; } .registration-mr-select .option:hover { background-color: black; color: white; } .registration-mr-select .options input[type="radio"] { display: none; } .registration-mr-select .options label { display: inline-block; } .registration-mr-select .options label::before { content: attr(data-txt); } .registration-mr-select .options input[type="radio"]:checked + label { display: none; } .registration-mr-select .options input[type="radio"]#all:checked + label { display: none; } .registration-mr-select .select:has(.options input[type="radio"]#all:checked) .selected::before { content: attr(data-default); } .registration-mr-select .select:has(.options input[type="radio"]#option-1:checked) .selected::before { content: attr(data-one); } .registration-mr-select .select:has(.options input[type="radio"]#option-2:checked) .selected::before { content: attr(data-two); } .registration-mr-select .select:has(.options input[type="radio"]#option-3:checked) .selected::before { content: attr(data-three); } .registrationhomeofficecheckbox .radio-inputs { display: flex; justify-content: center; align-items: center; /* max-width: 350px; */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .registrationhomeofficecheckbox .radio-inputs > * { margin: 6px; } .registrationhomeofficecheckbox .radio-input:checked + .radio-tile { border-color: #0892ca; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); color: #0892ca; } .registrationhomeofficecheckbox .radio-input:checked + .radio-tile:before { transform: scale(1); opacity: 1; background-color: #0892ca; border-color: #0892ca; } .registrationhomeofficecheckbox .radio-input:checked + .radio-tile .radio-icon svg { fill: #0892ca; } .registrationhomeofficecheckbox .radio-input:checked + .radio-tile .radio-label { color: #0892ca; } .registrationhomeofficecheckbox .radio-input:focus + .radio-tile { border-color: #0892ca; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc; } .registrationhomeofficecheckbox .radio-input:focus + .radio-tile:before { transform: scale(1); opacity: 1; } .registrationhomeofficecheckbox .radio-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; min-height: 80px; border-radius: 0.5rem; border: 2px solid #b5bfd9; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.15s ease; cursor: pointer; position: relative; } .registrationhomeofficecheckbox .radio-tile:before { content: ""; position: absolute; display: block; width: 0.75rem; height: 0.75rem; border: 2px solid #b5bfd9; background-color: #fff; border-radius: 50%; top: 0.25rem; left: 0.25rem; opacity: 0; transform: scale(0); transition: 0.25s ease; } .registrationhomeofficecheckbox .radio-tile:hover { border-color: #0892ca; } .registrationhomeofficecheckbox .radio-tile:hover:before { transform: scale(1); opacity: 1; } .registrationhomeofficecheckbox .radio-icon svg { width: 2rem; height: 2rem; fill: #494949; } .registrationhomeofficecheckbox .radio-label { color: #707070; transition: 0.375s ease; text-align: center; font-size: 13px; } .registrationhomeofficecheckbox .radio-input { clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .locality-area { width: 100%; height: 46px; border: none; background: #f5f5f6; border-radius: 7px; padding: 10px; } .fordivcircle { display: flex; flex-wrap: wrap; justify-content: space-between; } .fordivcircleinner { flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 1.9rem); display: flex; position: relative; margin-bottom: 2rem; transition: all 0.3s ease; cursor: pointer; } .sough-after .top-service-video-div { width: 260px; height: 275px; border-radius: 6%; overflow: hidden; position: relative; display: block; margin: auto; border: none; } .sough-after .service-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; /* Initially hide the video */ transition: opacity 0.3s ease; /* Smooth transition for opacity */ } .fordivcircleinner:hover .service-video { opacity: 1; /* Show video on hover */ } .sough-after .card-content { position: absolute; top: 0; left: 23px; right: 0; bottom: 0; padding: 10px; color: white; display: flex; flex-direction: column; border-radius: 6%; transition: opacity 0.3s ease; width: 260px; height: 275px; background-color: rgba(0, 0, 0, 0.8); text-align: center; justify-content: center; align-items: center; } .fordivcircleinner:hover .card-content { opacity: 0; /* Hide text content when hovering */ } .sough-after .top-service-heading { font-size: 20px; font-weight: bold; margin-bottom: 10px; } .sough-after .top-service-paragraph { font-size: 13px; margin-bottom: 15px; opacity: 0.9; text-align: start; font-weight: 400; width: 94%; margin-top: 1.4rem; opacity: 1; } .fordivcircleinner:nth-child(2n) { top: 5.7rem; } .fordivcircleinner:nth-of-type(1) .card-content { background-color: #0290c8; } .fordivcircleinner:nth-of-type(2) .card-content { background-color: #075d8c; } .fordivcircleinner:nth-of-type(3) .card-content { background-color: #075d8c; } .fordivcircleinner:nth-of-type(4) .card-content { background-color: #0290c8; } .sough-after .top-service-heading , .sough-after .top-service-paragraph { color: white; } .pac-container { z-index: 99999 !important; /* Ensure it is above other elements */ position: relative; /* Ensure it positions correctly */ } /* Optional: Adjust the margin to prevent clipping at the bottom of the input */ .pac-item { margin-bottom: 5px; } .residential-content-video { width: 95%; margin: auto; margin-top: 2rem; border-radius: 20px; } .image-container.disabled { pointer-events: none!important; cursor: not-allowed; } #card-number-message { font-size: 12px; margin-top: 0rem; margin-bottom: 1rem; } @-webkit-keyframes preload-show-1 { from { -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-show-1 { from { -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-hide-1 { to { -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-hide-1 { to { -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-cycle-1 { 5% { -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 10%, 75% { -webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg); transform: rotateZ(60deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 80%, 100% { -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-cycle-1 { 5% { -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 10%, 75% { -webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg); transform: rotateZ(60deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 80%, 100% { -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-show-2 { from { -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-show-2 { from { -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-hide-2 { to { -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-hide-2 { to { -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-cycle-2 { 10% { -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 15%, 70% { -webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg); transform: rotateZ(120deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 75%, 100% { -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-cycle-2 { 10% { -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 15%, 70% { -webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg); transform: rotateZ(120deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 75%, 100% { -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-show-3 { from { -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-show-3 { from { -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-hide-3 { to { -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-hide-3 { to { -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-cycle-3 { 15% { -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 20%, 65% { -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg); transform: rotateZ(180deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 70%, 100% { -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-cycle-3 { 15% { -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 20%, 65% { -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg); transform: rotateZ(180deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 70%, 100% { -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-show-4 { from { -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-show-4 { from { -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-hide-4 { to { -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-hide-4 { to { -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-cycle-4 { 20% { -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 25%, 60% { -webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg); transform: rotateZ(240deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 65%, 100% { -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-cycle-4 { 20% { -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 25%, 60% { -webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg); transform: rotateZ(240deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 65%, 100% { -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-show-5 { from { -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-show-5 { from { -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-hide-5 { to { -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-hide-5 { to { -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-cycle-5 { 25% { -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 30%, 55% { -webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg); transform: rotateZ(300deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 60%, 100% { -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-cycle-5 { 25% { -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 30%, 55% { -webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg); transform: rotateZ(300deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 60%, 100% { -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-show-6 { from { -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-show-6 { from { -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-hide-6 { to { -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-hide-6 { to { -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg); transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-cycle-6 { 30% { -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 35%, 50% { -webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg); transform: rotateZ(360deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 55%, 100% { -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @keyframes preload-cycle-6 { 30% { -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } 35%, 50% { -webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg); transform: rotateZ(360deg) rotateY(0) rotateX(0deg); border-left-color: #2da1d1; } 55%, 100% { -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg); transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg); border-left-color: #2da1d1; } } @-webkit-keyframes preload-flip { 0% { -webkit-transform: rotateY(0deg) rotateZ(-60deg); transform: rotateY(0deg) rotateZ(-60deg); } 100% { -webkit-transform: rotateY(360deg) rotateZ(-60deg); transform: rotateY(360deg) rotateZ(-60deg); } } @keyframes preload-flip { 0% { -webkit-transform: rotateY(0deg) rotateZ(-60deg); transform: rotateY(0deg) rotateZ(-60deg); } 100% { -webkit-transform: rotateY(360deg) rotateZ(-60deg); transform: rotateY(360deg) rotateZ(-60deg); } } /* *=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */ /* ========= Text Load Start ========= */ /* *=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */ #page { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: rgba(0,0,0,0.8); /*background: linear-gradient(to top right, #ffffff 10%, #ffffff 65%, #ffffff 125%);*/ bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: opacity 1s; transition: opacity 1s; } #phrase_box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; height: 150px; overflow: hidden; width: 260px; } #phrases { /* -webkit-animation: slide-phrases-upward 20s; animation: slide-phrases-upward 20s; */ animation: slide-phrases-upward 30s linear infinite; } #ighex { bottom: 30px; color: white; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; left: 0; position: fixed; right: 0; } @-webkit-keyframes slide-phrases-upward { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 5% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } 10% { -webkit-transform: translateY(-100px); transform: translateY(-100px); } 15% { -webkit-transform: translateY(-150px); transform: translateY(-150px); } 20% { -webkit-transform: translateY(-200px); transform: translateY(-200px); } 25% { -webkit-transform: translateY(-250px); transform: translateY(-250px); } 30% { -webkit-transform: translateY(-300px); transform: translateY(-300px); } 35% { -webkit-transform: translateY(-350px); transform: translateY(-350px); } 40% { -webkit-transform: translateY(-400px); transform: translateY(-400px); } 45% { -webkit-transform: translateY(-450px); transform: translateY(-450px); } 50% { -webkit-transform: translateY(-500px); transform: translateY(-500px); } 55% { -webkit-transform: translateY(-550px); transform: translateY(-550px); } 60% { -webkit-transform: translateY(-600px); transform: translateY(-600px); } 65% { -webkit-transform: translateY(-650px); transform: translateY(-650px); } 70% { -webkit-transform: translateY(-700px); transform: translateY(-700px); } 75% { -webkit-transform: translateY(-750px); transform: translateY(-750px); } 80% { -webkit-transform: translateY(-800px); transform: translateY(-800px); } 85% { -webkit-transform: translateY(-850px); transform: translateY(-850px); } 90% { -webkit-transform: translateY(-900px); transform: translateY(-900px); } 95% { -webkit-transform: translateY(-950px); transform: translateY(-950px); } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); } } @keyframes slide-phrases-upward { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 5% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } 10% { -webkit-transform: translateY(-100px); transform: translateY(-100px); } 15% { -webkit-transform: translateY(-150px); transform: translateY(-150px); } 20% { -webkit-transform: translateY(-200px); transform: translateY(-200px); } 25% { -webkit-transform: translateY(-250px); transform: translateY(-250px); } 30% { -webkit-transform: translateY(-300px); transform: translateY(-300px); } 35% { -webkit-transform: translateY(-350px); transform: translateY(-350px); } 40% { -webkit-transform: translateY(-400px); transform: translateY(-400px); } 45% { -webkit-transform: translateY(-450px); transform: translateY(-450px); } 50% { -webkit-transform: translateY(-500px); transform: translateY(-500px); } 55% { -webkit-transform: translateY(-550px); transform: translateY(-550px); } 60% { -webkit-transform: translateY(-600px); transform: translateY(-600px); } 65% { -webkit-transform: translateY(-650px); transform: translateY(-650px); } 70% { -webkit-transform: translateY(-700px); transform: translateY(-700px); } 75% { -webkit-transform: translateY(-750px); transform: translateY(-750px); } 80% { -webkit-transform: translateY(-800px); transform: translateY(-800px); } 85% { -webkit-transform: translateY(-850px); transform: translateY(-850px); } 90% { -webkit-transform: translateY(-900px); transform: translateY(-900px); } 95% { -webkit-transform: translateY(-950px); transform: translateY(-950px); } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); } } #loadingCheckCircleSVG-0 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-1 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-2 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-3 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-4 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-5 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-6 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-7 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 5.5s; animation-delay: 5.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-8 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 6.5s; animation-delay: 6.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-9 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 7.5s; animation-delay: 7.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-10 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 8.5s; animation-delay: 8.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-11 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 9.5s; animation-delay: 9.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-12 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 10.5s; animation-delay: 10.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-13 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 11.5s; animation-delay: 11.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-14 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 12.5s; animation-delay: 12.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-15 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 13.5s; animation-delay: 13.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-16 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 14.5s; animation-delay: 14.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-17 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 15.5s; animation-delay: 15.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-18 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 16.5s; animation-delay: 16.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-19 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 17.5s; animation-delay: 17.5s; fill: white; opacity: 0; } #loadingCheckCircleSVG-20 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: 18.5s; animation-delay: 18.5s; fill: white; opacity: 0; } @-webkit-keyframes fill-to-white { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 1; } } @keyframes fill-to-white { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 1; } } #loadingCheckSVG-0 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } #loadingCheckSVG-1 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } #loadingCheckSVG-2 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } #loadingCheckSVG-3 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } #loadingCheckSVG-4 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } #loadingCheckSVG-5 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } #loadingCheckSVG-6 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } #loadingCheckSVG-7 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 5.5s; animation-delay: 5.5s; } #loadingCheckSVG-8 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 6.5s; animation-delay: 6.5s; } #loadingCheckSVG-9 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 7.5s; animation-delay: 7.5s; } #loadingCheckSVG-10 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 8.5s; animation-delay: 8.5s; } #loadingCheckSVG-11 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 9.5s; animation-delay: 9.5s; } #loadingCheckSVG-12 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 10.5s; animation-delay: 10.5s; } #loadingCheckSVG-13 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 11.5s; animation-delay: 11.5s; } #loadingCheckSVG-14 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 12.5s; animation-delay: 12.5s; } #loadingCheckSVG-15 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 13.5s; animation-delay: 13.5s; } #loadingCheckSVG-16 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 14.5s; animation-delay: 14.5s; } #loadingCheckSVG-17 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 15.5s; animation-delay: 15.5s; } #loadingCheckSVG-18 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 16.5s; animation-delay: 16.5s; } #loadingCheckSVG-19 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 17.5s; animation-delay: 17.5s; } #loadingCheckSVG-20 { -webkit-animation: fill-to-coral 5000ms; animation: fill-to-coral 5000ms; -webkit-animation-delay: 18.5s; animation-delay: 18.5s; } @-webkit-keyframes fill-to-coral { 0% { fill: white; } 10% { fill: #181A1C; } 100% { fill: #181A1C; } } @keyframes fill-to-coral { 0% { fill: white; } 10% { fill: #181A1C; } 100% { fill: #181A1C; } } /* *=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */ /* ========= Text Load END ========= */ /* *=*=*=*=*=*=*=*=*=*=*=*=*=*=*= */ #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000000; } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #ffffff; z-index: 10000000; } .loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .loaded #loader-wrapper { visibility: hidden; } /* Loaded */ .preloaded .preloader{ opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .preloaded #loader-wrapper { visibility: hidden; opacity: 0; -webkit-transition: all 0.3s .3s ease-out; transition: all 0.3s .3s ease-out; } #phrases text { fill: white; } .preloader { position: absolute; top: 50%; left: 50%; font-size: 10px; display: block; width: 3.75em; height: 4.25em; margin-left: -1.875em; margin-top: -2.125em; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotateY(180deg) rotateZ(-60deg); transform: rotateY(180deg) rotateZ(-60deg); z-index: 10010000; } .preloader .slice { border-top: 1.125em solid transparent; border-right: none; border-bottom: 1em solid transparent; border-left: 1.875em solid #2da1d1; position: absolute; top: 0px; left: 50%; -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; border-radius: 3px 3px 0 0; } /* border-left-color: #2da1d1;:nth-child(1) { -webkit-transform: rotateZ(60deg) rotateY(0deg) rotateX(0); transform: rotateZ(60deg) rotateY(0deg) rotateX(0); -webkit-animation: 0.15s linear 0.82s preload-hide-1 both 1; animation: 0.15s linear 0.82s preload-hide-1 both 1; } border-left-color: #2da1d1;:nth-child(2) { -webkit-transform: rotateZ(120deg) rotateY(0deg) rotateX(0); transform: rotateZ(120deg) rotateY(0deg) rotateX(0); -webkit-animation: 0.15s linear 0.74s preload-hide-2 both 1; animation: 0.15s linear 0.74s preload-hide-2 both 1; } */ .preloader .slice:nth-child(3) { -webkit-transform: rotateZ(180deg) rotateY(0deg) rotateX(0); transform: rotateZ(180deg) rotateY(0deg) rotateX(0); -webkit-animation: 0.15s linear 0.66s preload-hide-3 both 1; animation: 0.15s linear 0.66s preload-hide-3 both 1; } .preloader .slice:nth-child(4) { -webkit-transform: rotateZ(240deg) rotateY(0deg) rotateX(0); transform: rotateZ(240deg) rotateY(0deg) rotateX(0); -webkit-animation: 0.15s linear 0.58s preload-hide-4 both 1; animation: 0.15s linear 0.58s preload-hide-4 both 1; } .preloader .slice:nth-child(5) { -webkit-transform: rotateZ(300deg) rotateY(0deg) rotateX(0); transform: rotateZ(300deg) rotateY(0deg) rotateX(0); -webkit-animation: 0.15s linear 0.5s preload-hide-5 both 1; animation: 0.15s linear 0.5s preload-hide-5 both 1; } .preloader .slice:nth-child(6) { -webkit-transform: rotateZ(360deg) rotateY(0deg) rotateX(0); transform: rotateZ(360deg) rotateY(0deg) rotateX(0); -webkit-animation: 0.15s linear 0.42s preload-hide-6 both 1; animation: 0.15s linear 0.42s preload-hide-6 both 1; } .preloader.loading { -webkit-animation: 2s preload-flip steps(2) infinite both; animation: 2s preload-flip steps(2) infinite both; } .preloader.loading .slice:nth-child(1) { -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0); transform: rotateZ(60deg) rotateY(90deg) rotateX(0); -webkit-animation: 2s preload-cycle-1 linear infinite both; animation: 2s preload-cycle-1 linear infinite both; } .preloader.loading .slice:nth-child(2) { -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0); transform: rotateZ(120deg) rotateY(90deg) rotateX(0); -webkit-animation: 2s preload-cycle-2 linear infinite both; animation: 2s preload-cycle-2 linear infinite both; } .preloader.loading .slice:nth-child(3) { -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0); transform: rotateZ(180deg) rotateY(90deg) rotateX(0); -webkit-animation: 2s preload-cycle-3 linear infinite both; animation: 2s preload-cycle-3 linear infinite both; } .preloader.loading .slice:nth-child(4) { -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0); transform: rotateZ(240deg) rotateY(90deg) rotateX(0); -webkit-animation: 2s preload-cycle-4 linear infinite both; animation: 2s preload-cycle-4 linear infinite both; } .preloader.loading .slice:nth-child(5) { -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0); transform: rotateZ(300deg) rotateY(90deg) rotateX(0); -webkit-animation: 2s preload-cycle-5 linear infinite both; animation: 2s preload-cycle-5 linear infinite both; } .preloader.loading .slice:nth-child(6) { -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0); transform: rotateZ(360deg) rotateY(90deg) rotateX(0); -webkit-animation: 2s preload-cycle-6 linear infinite both; animation: 2s preload-cycle-6 linear infinite both; } .payment-option { margin-bottom: 0.5rem; } .payment-option label { margin-bottom: 0px; } #phone-number-input2:focus-visible { outline: none; } #step-text { color: #09638f; } #back-button { color: #ffbc00; font-size: 22px; margin-right: 12px; } #step-title { font-size: 13px; } .payment-img { max-width: 100%; height: auto; } .paymentsupportedresponsive { justify-content: flex-start; } .unique-content-box { position: fixed; bottom: 62.3px; border-radius: 13px 13px 16px 16px; left: 0; width: 100%; max-height: 50vh; /* Occupies up to half the viewport height */ background: rgba(255, 255, 255, 1); padding: 1rem 2.5rem; text-align: center; /* box-shadow: 0 -1px 15px rgba(0, 0, 0, 0.1); */ overflow-y: auto; /* Initially hidden below its position */ transform: translateY(100%); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; /* display: none; */ } .unique-content-box.visible { display: block; /* Make it visible in the layout */ transform: translateY(0); opacity: 1; z-index: 11111111111; transition: transform 0.5s ease, opacity 0.5s ease; } .unique-content-box h2 { margin-bottom: 1rem; font-size: 2rem; } .unique-content-box p { font-size: 1.2rem; } /* Existing navigation and other styles */ .custom-nav { position: fixed; bottom: 0; left: 0; right: 0; width: auto; display: none; flex-direction: row; justify-content: space-around; align-items: center; background: #fff; box-shadow: 0 -1px 15px rgba(0, 0, 0, 0.1); z-index: 111; padding: 1rem; border-radius: 30px 30px 0 0; text-align: center; } .custom-nav a { color: inherit; text-decoration: none; margin: 0 0.2rem; display: block; align-items: center; padding: 0.5rem; position: relative; --hover-bg: #dafdff; --hover-c: black; padding: 0.4rem; border-radius: 50%; position: relative; height: 45px; width: 45px; } .custom-nav a svg { margin-right: -2.5rem; width: 28px; height: 28px; pointer-events: none; transition: margin 0.2s ease-out; } .custom-nav a span { opacity: 0; visibility: hidden; font-size: 0.9rem; margin-left: 0.9rem; } .custom-nav a:before { position: absolute; content: ""; top: 50%; left: 0; width: 70px; height: 70px; border-radius: 50%; transform: translate(0%, -50%) scale(0); visibility: visible; opacity: 1; } .custom-nav a.active { background: var(--hover-bg); color: var(--hover-c); } .custom-nav a.active:before { background: var(--hover-c); opacity: 0; visibility: hidden; transform: translate(0%, -50%) scale(2); transition: all 0.4s ease-out; } .custom-nav a.active svg { margin-right: 0; } .custom-nav a.active span { visibility: visible; opacity: 1; transition: all 0.2s ease-out; } .mobilenavbagcount .bag-count { display: none; } .mobilenavbagcount .cart-section { padding: 0px; } .mobile-nav-open-icon .nav-link { color: black; text-decoration: none; padding: 0; font-size: 16px; font-weight: 550; font-family: var(--fonts); display: unset; } .faqs { --background-overlay: ''; background-image: url('../images/faqsbg.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; /* background-attachment: fixed; */ overflow: hidden; position: relative; height: 600px; } .background-overlay-faqs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.36; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; box-sizing: border-box; /* Ensures padding/border do not affect size */ } .faqs-p { color: white; font: var(--fonts); /* margin-top: -1rem; */ margin-left: 3rem; text-align: justify; } .faqs-p a { color: #ffbc00; } .faqs-p a:hover { color: #ffbc00; } .faqs-h1 { color: white; font: var(--fonts); margin-left: 3rem; text-align: justify; font-size: 30px; } .faqs .login-modal .input-container { margin: 0; /* margin-left: 3rem; */ } .faqs .login-modal .input-container p { color: white; margin-bottom: 5px; } .faqs #email-form .input-wrapper .input { padding-left: 6px; } .faq-send-btn { margin: auto; background-color: #016dad; height: 50px; border-radius: 50px; width: 21%; border: none; display: flex; justify-content: center; align-items: center; color: white; margin-left: 26rem; }