@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap'); html { scroll-behavior: smooth; /* Adjust '100px' to match the height of your navbar */ scroll-padding-top: 100px; } section[id], div[id] { scroll-margin-top: 100px; } /* Hide the Google Branding */ .goog-logo-link { display:none !important; } .goog-te-gadget { color: transparent !important; } /* 1. Hide the Google Translate Top Frame permanently */ .goog-te-banner-frame.skiptranslate, .goog-te-banner-frame, .goog-te-banner { display: none !important; } .cardSwiper .swiper-pagination-bullet { width: 20px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.8); transition: all 0.3s ease; } .cardSwiper .swiper-pagination-bullet-active { width: 30px; background: oklch(88.142% 0.17878 97.289) !important; } /* Adding a subtle text-shadow to make it "pop" off the glass background */ .logo-glass-text { text-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); backdrop-filter: blur(4px); /* Optional: if you want the text itself to have a blur effect around it */ } /* Makes the service box feel like it's deepening on hover */ .group:hover .bg-gray-50\/50 { background-color: rgba(255, 255, 255, 1); box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); } /* Adds a staggered entrance for icons if you want to be extra fancy */ .group:hover .fa-solid { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Custom font-weight for that "Apple" look */ .font-black { font-family: 'Inter', sans-serif; } .result-item { transition: all 0.3s ease; } .result-item:hover { background: rgba(6, 5, 0, 0.8); /* Yellow-400 with 80% opacity */ padding-left: 2rem; } .glass-input::placeholder { color: rgba(255, 255, 255, 0.6); } #google_translate_element { position: absolute; top: -9999px; /* Move it far off screen */ left: -9999px; opacity: 0; pointer-events: none; } /* Styling the dropdown options */ select option { background: #ffffff; color: #334155; /* Slate 700 */ padding: 10px; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* Optional: Make the button text pop more */ .font-black { letter-spacing: -0.02em; } /* Remove default arrow in IE/Edge */ select::-ms-expand { display: none; } /* This targets the tag when Google adds the 'translated' class */ .translated-ltr, .translated-rtl { margin-top: 0 !important; } /* This targets the actual bar container */ .skiptranslate { display: none !important; } /* This removes the "Original Text" popup bubble */ #goog-gt-tt { display: none !important; visibility: hidden !important; } /* 2. Remove the 'Original Text' tooltip on hover */ #goog-gt-tt, .goog-te-balloon-frame { display: none !important; visibility: hidden !important; } /* 3. Stop the body from shifting down */ body { top: 0px !important; } /* 4. Hide the 'Powered by Google' text inside the widget */ .goog-logo-link { display: none !important; } .goog-te-gadget { color: transparent !important; } /* 1. Hero Setup */ .hero-gradient { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)); background-size: cover; background-position: center; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .apple-glass.shadow-2xl { animation: floating 4s ease-in-out infinite; } /* 2. Apple Glass Container */ .apple-glass { background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05)); backdrop-filter: blur(25px) saturate(200%); -webkit-backdrop-filter: blur(25px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.25); } /* 3. Refined Glass Inputs */ .glass-input { background: rgba(255, 255, 255, 0.08) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer; } /* Hover effect that keeps the glass look */ .glass-input:hover { background: rgba(255, 255, 255, 0.18) !important; transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3) !important; } /* Ensure the native dropdown arrow is white or hidden */ .glass-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 1.2rem; padding-right: 3rem !important; } .glass-input option { background: #121212; /* Deep black for the dropdown list */ color: white; padding: 10px; } /* 4. Smooth Card Hover */ .card-hover { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card-hover:hover { transform: translateY(-10px) scale(1.03); /* Adds a 3% zoom */ box-shadow: 0 30px 60px rgba(0,0,0,0.15); /* Deeper shadow for height */ } .card-hover:hover .card-image { transform: scale(1.1); } .card-hover:hover { transform: translateY(-12px) scale(1.02); border: 1px solid rgba(255, 255, 255, 0.6); /* Brighter border */ backdrop-filter: blur(30px) saturate(250%); /* More intense glass */ } .card-hover:hover i { transform: scale(1.2); transition: transform 0.3s ease; } /* The image will zoom without growing the card */ /* 1. Set the default state of the image */ .cardSwiper .swiper-slide img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* 2. Zoom the image when the parent card is hovered */ /* Assuming your main card container has the class 'card-hover' */ .card-hover:hover .cardSwiper .swiper-slide img { transform: scale(1.15); } /* Add a pseudo-element overlay on hover */ .cardSwiper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); opacity: 0; transition: opacity 0.4s ease; z-index: 10; pointer-events: none; } .card-hover:hover .cardSwiper::after { opacity: 1; } .cardSwiper .swiper-slide img { backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; will-change: transform; } .cardSwiper .swiper-slide { width: 100% !important; display: flex; justify-content: center; align-items: center; } .cardSwiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }