@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Abel:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Anton:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Archivo+Black:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Arial:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Arial+Black:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Arial+Narrow:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Arial+Rounded+MT+Bold:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Asap:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amaranth:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Audiowide:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Averia+Sans+Libre:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baskerville:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Belleza:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=BioRhyme:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bodoni+MT:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bookman:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bree+Serif:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Brush+Script+MT:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bungee:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bungee+Inline:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cabin:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Calisto+MT:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cambria:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Candara:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Century+Gothic:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Changa:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Comic+Sans+MS:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Concert+One:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Consolas:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Copperplate:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Corbel:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Courier:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Courier+New:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Engravers+MT:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Ebrima:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Expletus+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Futura:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Franklin+Gothic+Medium:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fjalla+One:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Galada:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Geneva:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Georgia:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Gruppo:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Garamond:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Helvetica:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Impact:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Kelly+Slab:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Krub:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Leelawadee+UI:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lucida+Console:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lucida+Sans+Unicode:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Monda:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Maitree:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Monaco:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nobile:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Optima:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=PT+Mono:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Pacifico:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Palatino:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Palatino+Linotype:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poiret+One:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Quantico:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Righteous:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rockwell:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Ropa+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Signika:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+Print:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+Script:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Shrikhand:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+Print:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+Script:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Signika:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+Print:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Segoe+Script:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Times+New+Roman:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Trebuchet+MS:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Tw+Cen+MT:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Varela:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Varela+Round:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Verdana:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Viga:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Vivaldi:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Webdings:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Yeseva+One:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Yu+Gothic:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Yeseva+One:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Yu+Gothic:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Zeyada:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Zilla+Slab+Highlight:wght@300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; border: none; outline: none; scroll-behavior: smooth; } :root { --bg-color: #ffffff; --second-bg-color: #ffffff; --text-color: #000000; --main-color: rgb(22, 21, 21); } *::selection { background: var(--main-color); color: var(--bg-color); } html { font-size: 62.5%; overflow-x: hidden; } body { background: var(--bg-color); color: var(--text-color); } section { min-height: 100vh; padding: 10rem 3% 2rem; } .header { position: fixed; top: 0; left: 0; width: 100%; max-height: 98px; padding-top: 2rem; padding-bottom: 2rem; padding-left: 3%; padding-right: 8%; background: rgb(255, 255, 255); display: flex; justify-content: space-between; align-items: center; z-index: 100; border-bottom: .1rem solid rgba(0, 0, 0, .2); } .header.sticky { border-bottom: .1rem solid rgba(0, 0, 0, .2); } .logo { font-size: 2.7rem; color: rgb(219, 0, 0); font-weight: bolder; } .navbar{ border-radius: 10px; padding: 10px; padding-right: 40px; } .navbar a { text-align: center; /* Center the text inside the links */ display: inline-block; /* Ensure the text inside the links is centered */ font-size: 16px; padding: 10px; /* Optional: add some padding around the links */ text-decoration: none; /* Remove the underline from links */ color: white; /* Set the text color */ background: #48d183; border-radius: 25px; } .navbar a:hover, .navbar a.active { color: var(--main-color); } #menu-icon { font-size: 4rem; color: rgb(19, 18, 18); display: none; } .home { display: flex; justify-content: center; background-size: cover; align-items: center; } .home-img img { width: 36vw; border-radius: 30px; margin-left: 30px; margin-right: 0px; animation: floatImage 4s ease-in-out infinite; } @keyframes floatImage { 0% { transform: translateY(0); } 50% { transform: translateY(-2.4rem); } 100% { transform: translateY(0); } } .home-content h3 { font-size: 3.2rem; font-weight: 700; } .about-content h5 { font-size: 2.2rem; font-weight: 200; } .home-content h5 { font-size: 2.2rem; font-weight: 200; } .home-content h3:nth-of-type(2) { margin-bottom: 2rem; } span { color: var(--main-color); } .home-content h1 { font-size: 5.6rem; font-weight: 700; line-height: 1.3; } .home-content p { font-size: 1.6rem; } .social-media a { display: inline-flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; background: transparent; border: .2rem solid var(--main-color); border-radius: 50%; font-size: 2rem; color: var(--main-color); margin: 3rem 1.5rem 3rem 0; transition: .5s ease; } .social-media a:hover { background: var(--main-color); color: var(--second-bg-color); box-shadow: 0 0 1rem var(--main-color); } .btn { display: inline-block; padding: 1rem 2.8rem; background: var(--main-color); border-radius: 4rem; box-shadow: 0 0 1rem var(--main-color); font-size: 1.6rem; color: var(--second-bg-color); letter-spacing: .1rem; font-weight: 600; transition: .5s ease; } .btn:hover { transform: scale(1.05); box-shadow: none; } .about { display: flex; justify-content: center; align-items: center; gap: 2rem; } .about-img img { width: 35vw; } .heading { text-align: center; font-size: 4.5rem; } .about-content h2 { text-align: left; line-height: 1.2; } .about-content h3 { font-size: 2.6rem; } .about-content p { font-size: 1.6rem; margin: 2rem 0 3rem; } .services { min-height: auto; padding-bottom: 10rem; } .services h2 { margin-bottom: 5rem; } .services-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2rem; } .services-container .services-box { flex: 1 1 30rem; background: var(--second-bg-color); padding: 3rem 2rem 4rem; border-radius: 2rem; text-align: center; border: .2rem solid var(--bg-color); transition: .5s ease; } .services-container .services-box:hover { border-color: var(--main-color); transform: scale(1.02); } .services-box i { font-size: 7rem; color: var(--main-color); } .services-box h3 { font-size: 2.6rem; } .services-box p { font-size: 1.6rem; margin: 1rem 0 3rem; } .portfolio { background: var(--second-bg-color); min-height: auto; padding-bottom: 10rem; } .portfolio h2 { margin-bottom: 4rem; } .portfolio-container { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 2.5rem; } .portfolio-container .portfolio-box { position: relative; border-radius: 2rem; box-shadow: 0 0 1rem var(--bg-color); overflow: hidden; display: flex; } .portfolio-box img { width: 100%; transition: .5s ease; } .portfolio-box:hover img { transform: scale(1.1); } .portfolio-box .portfolio-layer { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, .1), var(--main-color)); display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 0 4rem; transform: translateY(100%); transition: .5s ease; } .portfolio-box:hover .portfolio-layer { transform: translateY(0); } .portfolio-layer h4 { font-size: 3rem; } .portfolio-layer p { font-size: 1.6rem; margin: .3rem 0 1rem; } .portfolio-layer a { display: inline-flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; background: var(--text-color); border-radius: 50%; } .portfolio-layer a i { font-size: 2rem; color: var(--second-bg-color); } .contact { min-height: auto; padding-bottom: 7rem; } .contact h2 { margin-bottom: 3rem; } .contact form { max-width: 70rem; margin: 1rem auto; text-align: center; margin-bottom: 3rem; } .contact form .input-box { display: flex; justify-content: space-between; flex-wrap: wrap; } .contact form .input-box input, .contact form textarea { width: 100%; padding: 1.5rem; font-size: 1.6rem; color: var(--text-color); background: var(--second-bg-color); border-radius: .8rem; margin: .7rem 0; } .contact form .input-box input { width: 49%; } .contact form textarea { resize: none; } .contact form .btn { margin-top: 2rem; cursor: pointer; } /* BREAKPOINTS */ @media (max-width: 1200px) { html { font-size: 55%; } } @media (max-width: 991px) { .header { padding: 2rem 3%; } section { padding: 10rem 3% 2rem; } } @media (max-width: 879px) { .portfolio-container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .home-img img { margin-left: 0px; } #menu-icon { display: block; } .navbar { position: absolute; top: 100%; left: 0; width: 100%; padding: 1rem 3%; background: var(--bg-color); border-top: .1rem solid rgba(0, 0, 0, .2); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); display: none; } .navbar.active { display: block; } .navbar a { display: block; font-size: 2rem; margin: 3rem 0; } .home { flex-direction: column; } .home-content h3 { font-size: 2.6rem; } .home-content h1 { font-size: 5rem; } .home-img img { width: 70vw; margin-top: 4rem; } .about { flex-direction: column-reverse; } .about img { width: 70vw; margin-top: 4rem; } } @media (max-width: 580px) { .portfolio-container { grid-template-columns: 1fr; } } @media (max-width: 450px) { html { font-size: 50%; } .contact form .input-box input { width: 100%; } } @media (max-width: 365px) { .home-img img, .about-img img { width: 90vw; } } @media (max-width: 1200px) { html { font-size: 55%; } } @media (max-width: 991px) { .header { padding: 2rem 3%; } section { padding: 10rem 3% 2rem; } } @media (max-width: 879px) { .portfolio-container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { #menu-icon { display: block; } .navbar { position: absolute; top: 100%; left: 0; width: 100%; padding: 1rem 3%; background: var(--bg-color); border-top: .1rem solid rgba(0, 0, 0, .2); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); display: none; } .navbar.active { display: block; } .navbar a { display: block; font-size: 2rem; margin: 3rem 0; } .home { flex-direction: column; } .home-content h3 { font-size: 2.6rem; } .home-content h1 { font-size: 4.5rem; } .home-img img { width: 70vw; margin-top: 4rem; } .about { flex-direction: column-reverse; } .about img { width: 70vw; margin-top: 4rem; } } @media (max-width: 580px) { .portfolio-container { grid-template-columns: 1fr; } } @media (max-width: 450px) { html { font-size: 50%; } .contact form .input-box input { width: 100%; } } @media (max-width: 365px) { .home-img img, .about-img img { width: 90vw; } } /* Vista 1 productos */ /* Vista 1 productos */ #productos-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 10fr)); font-weight: 500; font-size: 16px; max-width: 100%; color: #2e2c36; line-height: 1.63; gap: 10px; /* Reduzco el espacio entre productos a 5px */ } .producto-container { display: flex; transition: all 0.3s ease; border-radius: 10px; background-color: white; padding: 10px; width: 100%; max-height: fit-content; overflow: hidden; border-bottom: 1px solid #e0e3e7; margin-bottom: 10px; justify-content: space-between; } /* Restablece el número de columnas en función del tamaño de la pantalla para otros tamaños */ @media screen and (max-width: 768px) { #productos-container { grid-template-columns: repeat(auto-fit, minmax(250px, 10fr)); } } .producto-container:hover { transform: scale(1.02); } .productos-vertical { display: flex; flex-direction: column; /* Elementos apilados verticalmente */ align-items: flex-start; padding: 5px; } .descripcion { font-size: 14px; line-height: 1.71; margin-top: 5px; display: -webkit-box; color: #6a696e; font-weight: 100; -webkit-line-clamp: 2; /* Limita a 2 líneas */ -webkit-box-orient: vertical; overflow: hidden; max-width: 220px; /* Anchura máxima para limitar el número de caracteres */ text-overflow: ellipsis; } .descripcionagotado { font-size: 14px; line-height: 1.71; margin-top: 5px; display: -webkit-box; color: #6a696e; font-weight: 100; -webkit-line-clamp: 1; /* Limita a 2 líneas */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .agotado { font-size: 14px; line-height: 1.71; margin-top: 5px; display: -webkit-box; font-weight: 800; color: #ff0303; -webkit-line-clamp: 2; /* Limita a 2 líneas */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .precio { font-size: 15.5px; font-weight: bolder; color: rgb(22, 21, 21); margin-top: 2px; } /* Agrega los estilos para el porcentaje de descuento */ .porcentaje-descuento { color: rgb(0, 122, 255); font-weight: bold; font-size: 14px; margin-left: 5px; border-left: 1px solid #ddd; padding-left: 5px; } .precio-descuento { font-size: 14px; color: #999; /* Gris para el precio normal */ margin-left: 5px; text-decoration: line-through; /* Línea en el precio normal */ } /* Estilos para el precio normal */ .precio-normal { color: black; font-weight: bolder; font-size: 15.5px; } .producto-text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 1.71; margin-top: 5px; font-weight: 700; color: #000000; } .producto-img { width: 90px; height: 90px; border-radius: 20px; object-fit: cover; margin-top: 10px; margin-left: 5px; /* Agrega un espacio a la izquierda para centrar */ margin-right: 5px; /* Agrega un espacio a la derecha para centrar */ flex-shrink: 0; /* Evita que la imagen se reduzca para ajustarse al contenedor */ } /* Vista 2 productos */ /* Vista 2 productos */ #productos-container2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 10fr)); font-weight: 500; font-size: 16px; max-width: 100%; color: #2e2c36; line-height: 1.63; gap: 10px; /* Reduzco el espacio entre productos a 5px */ } .producto-container2 { display: flex; flex-direction: column; /* Cambio la dirección de los elementos a columna */ transition: all 0.3s ease; border-radius: 20px; background-color: white; width: 330px; max-height: fit-content; overflow: hidden; margin-left: auto; /* Centra horizontalmente */ margin-right: auto; border-bottom: 1px solid #e0e3e7; margin-bottom: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Ajusta los valores según sea necesario */ } .producto-container2:hover { transform: scale(1.02); } .productos-vertical2 { display: flex; flex-direction: column; /* Elementos apilados verticalmente */ align-items: flex-start; padding: 5px; max-width: 300px; display: block; /* Evita que el margen lateral adicional afecte */ } .descripcion2 { font-size: 14px; line-height: 1.71; margin-top: 5px; display: -webkit-box; color: #6a696e; font-weight: 100; -webkit-line-clamp: 2; /* Limita a 2 líneas */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .descripcionagotado2 { font-size: 14px; line-height: 1.71; margin-top: 5px; color: #6a696e; -webkit-line-clamp: 1; /* Limita a 2 líneas */ -webkit-box-orient: vertical; font-weight: 100; overflow: hidden; text-overflow: ellipsis; } .agotado2 { font-size: 14px; line-height: 1.71; margin-top: 5px; font-weight: 800; -webkit-line-clamp: 2; /* Limita a 2 líneas */ -webkit-box-orient: vertical; color: #ff0303; overflow: hidden; text-align: center; text-overflow: ellipsis; } .precio2 { font-size: 15.5px; font-weight: bolder; color: rgb(22, 21, 21); margin-top: 2px; } /* Agrega los estilos para el porcentaje de descuento */ .porcentaje-descuento2 { color: rgb(0, 122, 255); font-weight: bold; font-size: 14px; margin-left: 5px; border-left: 1px solid #ddd; padding-left: 5px; } .precio-descuento2 { font-size: 14px; color: #999; /* Gris para el precio normal */ margin-left: 5px; text-decoration: line-through; /* Línea en el precio normal */ } /* Estilos para el precio normal */ .precio-normal2 { color: black; font-weight: bolder; font-size: 15.5px; } .producto-img2 { width: 330px; height: 250px; object-fit: cover; flex-shrink: 0; /* Evita que la imagen se reduzca para ajustarse al contenedor */ } .producto-img2:hover { transform: scale(1.01); } .producto-text2 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 1.71; margin-top: 5px; font-weight: 700; color: #000000; } @media screen and (max-width: 768px) { .producto-img2 { max-width: 180px; height: 160px; } .productos-vertical2 { max-width: 180px; } .producto-container2 { margin-left: auto; /* Centra horizontalmente */ margin-right: auto; max-width: 180px; } #productos-container2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 10fr)); } } /* Agrega tus estilos CSS existentes aquí */ /* Vista 3 productos */ /* Vista 3 productos */ #productos-container3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 10fr)); font-weight: 500; font-size: 16px; max-width: 100%; color: #2e2c36; line-height: 1.63; gap: 5px; /* Reduzco el espacio entre productos a 5px */ } .producto-container3 { display: flex; flex-direction: column; /* Cambio la dirección de los elementos a columna */ transition: all 0.3s ease; border-radius: 20px; background-color: white; width: 180px; max-height: fit-content; overflow: hidden; margin-left: auto; /* Centra horizontalmente */ margin-right: auto; border-bottom: 1px solid #e0e3e7; margin-bottom: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Ajusta los valores según sea necesario */ } .producto-container3:hover { transform: scale(1.02); } .productos-vertical3 { display: flex; flex-direction: column; /* Elementos apilados verticalmente */ align-items: flex-start; padding: 5px; max-width: 300px; display: block; /* Evita que el margen lateral adicional afecte */ } .descripcion3 { font-size: 14px; line-height: 1.71; margin-top: 5px; display: -webkit-box; color: #6a696e; font-weight: 100; -webkit-line-clamp: 2; /* Limita a 2 líneas */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .descripcionagotado3 { font-size: 14px; line-height: 1.71; margin-top: 5px; color: #6a696e; -webkit-line-clamp: 1; /* Limita a 2 líneas */ -webkit-box-orient: vertical; font-weight: 100; overflow: hidden; text-overflow: ellipsis; } .producto-text3 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 1.71; margin-top: 5px; font-weight: 700; color: #000000; } .agotado3 { font-size: 14px; line-height: 1.71; margin-top: 5px; font-weight: 800; -webkit-line-clamp: 2; /* Limita a 2 líneas */ -webkit-box-orient: vertical; color: #ff0303; text-align: center; overflow: hidden; text-overflow: ellipsis; } .precio3 { font-size: 15.5px; font-weight: bolder; color: rgb(22, 21, 21); margin-top: 2px; } /* Agrega los estilos para el porcentaje de descuento */ .porcentaje-descuento3 { color: rgb(0, 122, 255); font-weight: bold; font-size: 14px; margin-left: 5px; border-left: 1px solid #ddd; padding-left: 5px; } .precio-descuento3 { color: black; font-weight: bolder; font-size: 15.5px; } /* Estilos para el precio normal */ .precio-normal3 { font-size: 14px; color: #999; /* Gris para el precio normal */ margin-left: 5px; text-decoration: line-through; /* Línea en el precio normal */ } .producto-img3 { width: 180px; height: 180px; object-fit: cover; margin-bottom: 10px; /* Agrega un espacio abajo para centrar */ flex-shrink: 0; /* Evita que la imagen se reduzca para ajustarse al contenedor */ } .producto-img3:hover { transform: scale(1.01); } @media screen and (max-width: 768px) { .producto-img3 { max-width: 160px; height: 160px; } .productos-vertical3 { max-width: 160px; } .producto-container3 { margin-left: auto; /* Centra horizontalmente */ margin-right: auto; max-width: 160px; } #productos-container3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 10fr)); } .navbar{ border-radius: 0px; padding: 10px; } } /* estilo 4 */ /* estilo 4*/ #productos-container4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 10fr)); font-weight: 500; font-size: 16px; max-width: 100%; color: #2e2c36; line-height: 1.63; gap: 5px; /* Reduzco el espacio entre productos a 5px */ } .producto-container4 { display: flex; flex-direction: column; transition: all 0.3s ease; border-radius: 20px; width: 180px; max-height: fit-content; overflow: hidden; margin-left: auto; background-color: rgb(255, 255, 255); margin-right: auto; justify-content: space-between; box-shadow: 0px 0px 10px rgba(16, 16, 16, 0.2); margin-bottom: 10px; } .producto-container5 { display: flex; flex-direction: column; transition: all 0.3s ease; width: 180px; max-height: fit-content; overflow: hidden; margin-left: auto; background-color: rgb(255, 255, 255); margin-right: auto; margin-bottom: 10px; justify-content: space-between; } .producto-img5 { width: 180px; height: 180px; object-fit: cover; margin-bottom: 4px; /* Agrega un espacio abajo para centrar */ flex-shrink: 0; /* Evita que la imagen se reduzca para ajustarse al contenedor */ } .producto-img5:hover { transform: scale(1.01); } .producto-container5:hover { transform: scale(1.02); } .producto-container4 h3 { margin-top: 0; /* Asegura que el título toque el borde superior */ } .producto-container4 p { margin-bottom: 0; /* Asegura que el precio toque el borde inferior */ } .producto-container4:hover { transform: scale(1.02); } .productos-vertical4 { display: flex; flex-direction: column; /* Elementos apilados verticalmente */ align-items: flex-start; background-color: white; max-width: 300px; display: block; /* Evita que el margen lateral adicional afecte */ } .descripcion4 { font-size: 14px; line-height: 1.71; margin-top: 5px; display: -webkit-box; color: #6a696e; font-weight: 100; -webkit-line-clamp: 2; /* Limita a 2 líneas */ -webkit-box-orient: vertical; overflow: hidden; padding-left: 5px; text-overflow: ellipsis; } .descripcionagotado4 { font-size: 14px; line-height: 1.71; margin-top: 5px; color: #6a696e; -webkit-line-clamp: 1; /* Limita a 2 líneas */ -webkit-box-orient: vertical; font-weight: 100; overflow: hidden; text-overflow: ellipsis; } .producto-text4 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 1.71; padding-left: 5px; font-weight: 700; color: #000000; } .agotado4 { font-size: 14px; line-height: 1.71; margin-top: 5px; font-weight: 800; -webkit-line-clamp: 1; /* Limita a 2 líneas */ -webkit-box-orient: vertical; color: #ff0303; overflow: hidden; text-align: center; text-overflow: ellipsis; } .precio4 { font-size: 15px; font-weight: bolder; color: rgb(255, 255, 255); margin-top: 2px; padding: 3px; width: 100%; padding-left: 12px; } /* Agrega los estilos para el porcentaje de descuento */ .porcentaje-descuento4 { color: rgb(0, 122, 255); font-size: 14px; margin-left: 3px; } .precio-descuento4 { color: rgb(255, 255, 255); font-weight: bolder; margin-left: 5px; font-size: 15px; } /* Estilos para el precio normal */ .precio-container4 { padding: 3px; padding-left: 12px; width: 100%; } .precio-normal4 { font-size: 13px; color: #222020; /* Gris para el precio normal */ text-decoration: line-through; /* Línea en el precio normal */ width: 100%; } .producto-img4 { width: 180px; height: 180px; object-fit: cover; flex-shrink: 0; /* Evita que la imagen se reduzca para ajustarse al contenedor */ } .producto-img4:hover { transform: scale(1.01); } .producto-container6 { display: flex; flex-direction: column; transition: all 0.3s ease; width: 300px; max-height: fit-content; overflow: hidden; margin-left: auto; background-color: rgb(255, 255, 255); margin-right: auto; margin-bottom: 10px; justify-content: space-between; } .producto-img6 { width: 300px; height: 180px; object-fit: cover; margin-bottom: 4px; /* Agrega un espacio abajo para centrar */ flex-shrink: 0; /* Evita que la imagen se reduzca para ajustarse al contenedor */ } #productos-container6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 10fr)); font-weight: 500; font-size: 16px; max-width: 100%; color: #2e2c36; line-height: 1.63; gap: 6px; /* Reduzco el espacio entre productos a 5px */ } .producto-img6:hover { transform: scale(1.01); } .producto-container6:hover { transform: scale(1.02); } .producto-container7 { display: flex; flex-direction: column; transition: all 0.3s ease; width: 300px; max-height: fit-content; overflow: hidden; border-radius: 20px; margin-left: auto; background-color: rgb(255, 255, 255); margin-right: auto; margin-bottom: 10px; justify-content: space-between; } .producto-img7 { width: 300px; height: 180px; object-fit: cover; margin-bottom: 4px; /* Agrega un espacio abajo para centrar */ flex-shrink: 0; /* Evita que la imagen se reduzca para ajustarse al contenedor */ } #productos-container7 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 10fr)); font-weight: 500; font-size: 16px; max-width: 100%; color: #2e2c36; line-height: 1.63; gap: 6px; /* Reduzco el espacio entre productos a 5px */ } .producto-img7:hover { transform: scale(1.01); } .producto-container7:hover { transform: scale(1.02); } .producto-container8 { display: flex; flex-direction: column; transition: all 0.3s ease; width: 300px; max-height: fit-content; overflow: hidden; border-radius: 5px; margin-left: auto; background-color: rgb(255, 255, 255); margin-right: auto; margin-bottom: 10px; justify-content: space-between; } .producto-img8 { width: 300px; height: 370px; object-fit: cover; margin-bottom: 4px; /* Agrega un espacio abajo para centrar */ flex-shrink: 0; /* Evita que la imagen se reduzca para ajustarse al contenedor */ } #productos-container8 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 10fr)); font-weight: 500; font-size: 16px; max-width: 100%; color: #2e2c36; line-height: 1.63; gap: 6px; /* Reduzco el espacio entre productos a 5px */ } .producto-img8:hover { transform: scale(1.01); } .producto-container8:hover { transform: scale(1.02); } @media screen and (max-width: 768px) { .producto-img4 { max-width: 160px; height: 160px; } .producto-container4 { margin-left: auto; /* Centra horizontalmente */ margin-right: auto; max-width: 160px; } #productos-container4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 10fr)); } .producto-container6 { max-width: 180px; } .producto-img6 { max-width: 180px; height: 150px; } #productos-container6 { grid-template-columns: repeat(auto-fit, minmax(180px, 10fr)); } .producto-container7 { max-width: 180px; } .producto-img7 { max-width: 180px; height: 150px; } #productos-container7 { grid-template-columns: repeat(auto-fit, minmax(180px, 10fr)); } .producto-container8 { max-width: 180px; } .producto-img8 { max-width: 180px; height: 150px; } #productos-container8 { grid-template-columns: repeat(auto-fit, minmax(180px, 10fr)); } } #search-container { display: flex; justify-content: center; margin-bottom: 14px; } #search-input { width: 98%; /* Ajusta el ancho del input según tus preferencias */ padding: 10px; border: none; border: 1px solid rgb(29, 137, 204); border-radius: 10px; background-color: #fff; font-weight: 600; font-size: 18px; color: rgb(23, 22, 22); transition: all 0.3s ease; } #search-input::placeholder { width: 300px; } #search-input:focus { outline: none; transform: scale(1.01); } @media screen and (max-width: 768px) { #search-input { margin-left: 20px; margin-right: 20px; width: 100%; } } #header-container { background-size: cover; position: relative; height: 350px; border-radius: 20px; margin: 20px; background-size: cover; background-position: center; position: relative; border-bottom: 1px solid #ccc; overflow: hidden; } #header-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } @media screen and (max-width: 768px) { #header-container { height: 220px; /* Ajusta la altura en dispositivos móviles */ } } #logo-container { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -70%); text-align: center; } #logo-image { width: 140px; /* Ajusta el ancho del logo según tus preferencias */ height: 140px; /* Ajusta la altura del logo según tus preferencias */ border: 5px solid red; /* Ajusta el ancho y color del borde del logo */ margin-top: 10px; border-radius: 50%; object-fit: cover; } #business-name { margin-top: 10px; /* Ajusta el margen superior del nombre del negocio */ font-size: 24px; /* Ajusta el tamaño de fuente del nombre del negocio */ color: white; font-weight: bolder; } #business-description { color: white; font-weight: 300; margin-top: 10px; /* Ajusta el margen superior de la descripción del negocio */ font-size: 18px; /* Ajusta el tamaño de fuente de la descripción del negocio */ } @media screen and (max-width: 768px) { .logo { font-size: 2.0rem; } #logo-container { position: absolute; top: 62%; left: 50%; transform: translate(-50%, -70%); text-align: center; } #logo-image { margin-top: 10px; width: 80px; /* Ajusta el ancho del logo en dispositivos móviles */ height: 80px; /* Ajusta la altura del logo en dispositivos móviles */ } #business-name { margin-top: 10px; /* Ajusta el margen superior del nombre del negocio */ font-size: 20px; /* Ajusta el tamaño de fuente del nombre del negocio */ color: white; font-weight: bolder; } #business-description { color: white; font-weight: 200; font-size: 15px; /* Ajusta el tamaño de fuente de la descripción del negocio */ } } /*Tipos de productos*/ .tipo-producto-buttons-container { display: flex; justify-content: flex-start; align-items: center; margin-top: 10px; margin-left: 20px; margin-right: 20px; background-color: transparent; overflow-x: auto; } .tipo-producto-buttons-containerActive { display: flex; justify-content: flex-start; align-items: center; overflow-x: auto; position: sticky; background-color: transparent; width: 93%; height: 70px; top: 0; z-index: 1000; } .tipo-producto-button { display: flex; justify-content: center; align-items: center; padding: 10px 15px; margin-bottom: 15px; margin-top: 10px; margin-left: 6px; margin-right: 5px; background-color: #e53935; color: #fff; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .tipo-producto-button:hover { transform: scale(1.03); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9); } .tipo-producto-button:focus { outline: none; } .floating-box { position: fixed; bottom: 25px; right: 25px; width: auto; height: auto; background-color: white; display: flex; padding: 0px; border-radius: 20px; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); animation: float 3s infinite; z-index: 9999; } .floating-box a { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; transition: transform 0.3s, box-shadow 0.3s; } .floating-box a:hover { transform: scale(1.2); border-radius: 30px; box-shadow: 0 4px 8px rgba(18, 18, 18, 0.8); } .floating-box img { width: 50px; height: 50px; } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /* Estilo para dispositivos móviles */ @media screen and (max-width: 768px) { .tipo-producto-buttons-containerActive { display: flex; justify-content: flex-start; align-items: center; overflow-x: auto; position: sticky; top: 0; width: 90%; height: 70px; z-index: 1000; } .floating-box { position: fixed; bottom: 15px; right: 25px; /* Cambia "right" a "left" para ubicarlos en la parte izquierda */ width: 50px; height: auto; background-color: white; display: flex; padding: 0px; border-radius: 20px; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); animation: float 3s infinite; z-index: 9999; } .floating-box a { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; transition: transform 0.3s, box-shadow 0.3s; } .floating-box a:hover { transform: scale(1.2); border-radius: 30px; box-shadow: 0 4px 8px rgba(18, 18, 18, 0.8); } .floating-box img { width: 40px; /* Ajusta el tamaño de las imágenes a 40px */ height: 40px; /* Ajusta el tamaño de las imágenes a 40px */ } } /* Estilos para el icono del carrito */ #carrito-icon { position: fixed; top: 20px; right: 20px; font-size: 24px; /* Tamaño del icono */ background-color: #007bff; /* Color de fondo del icono */ color: #fff; /* Color del icono */ border-radius: 50%; /* Hace que el fondo sea un círculo */ width: 40px; /* Ancho del fondo del icono */ height: 40px; /* Altura del fondo del icono */ display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: background-color 0.3s; } #carrito-icon a { text-decoration: none; color: inherit; } /* Estilos al pasar el cursor sobre el icono del carrito */ #carrito-icon:hover { background-color: #0056b3; /* Cambia el color de fondo al pasar el cursor */ } .carrito-icon-container { position: relative; display: inline-block; margin-right: 20px; padding: 5px; font-size: 20px; } .carrito-counter { position: absolute; top: -10px; right: -10px; background-color: red; color: white; border-radius: 50%; width: 25px; height: 25px; text-align: center; line-height: 25px; font-size: 14px; } /* Definir la animación */ @keyframes carrito-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-20px); } } .tituloproductosclass{ text-align: center; font-size: 32px; color: rgb(255, 255, 255); } .textoproductosclass{ text-align: center; font-size: 18px; margin-bottom: 20px; margin-top: 8px; } /* Estilo para dispositivos móviles */ @media screen and (max-width: 768px) { #carrito-icon { position: fixed; bottom: 200px; right: 10px; top: auto; /* Asegura que 'top' sea 'auto' */ left: auto; /* Asegura que 'left' sea 'auto' */ } #carrito-icon .carrito-counter { font-size: 12px; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background-color: red; color: white; text-align: center; position: absolute; bottom: -10px; right: -10px; } .tituloproductosclass{ font-size: 22px; } .textoproductosclass{ font-size: 14px; } } #youtube-container { max-width: 800px; margin: 50px auto; text-align: center; padding: 20px; background-color: white; border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #video-title { font-size: 24px; margin-bottom: 10px; } #video-desc { font-size: 18px; margin-bottom: 10px; } #youtube-player { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ } iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #subscribe-button { margin-top: 20px; padding: 10px 20px; font-size: 18px; cursor: pointer; background-color: #3498db; color: #fff; border: none; border-radius: 5px; outline: none; transition: background-color 0.3s; } #subscribe-button:hover { background-color: #2980b9; } @media screen and (max-width: 768px) { #youtube-container { margin-right: 10px; margin-left: 10px; margin-bottom: 0px; } } .ocultar { display: none; } .mostrar { display: block; } #vermas { display: block; margin: 0 auto; /* Centra horizontalmente */ text-align: center; /* Alinea el texto al centro */ padding: 10px 20px; width: 30%; margin-bottom: 20px; margin-top: 10px; font-weight: bold; font-size: 20px; background-color: #111211; /* Color de fondo */ color: white; /* Color del texto */ text-decoration: none; /* Quita el subrayado del enlace */ border-radius: 10px; /* Bordes redondeados */ } #vermas:hover { transform: scale(1.03); box-shadow: #000000; } #vermas.ocultar { display: none; } .plan-container { display: flex; flex-wrap: wrap; justify-content: space-between; } .plan { width: calc(33.33% - 20px); margin-bottom: 20px; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 8px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6); } .plan:hover{ transform: scale(1.01); } .plan2 { width: calc(33.33% - 20px); margin-bottom: 20px; border: 1px solid #dddddd; border-radius: 8px; transform: scale(1.06); box-shadow: 0px 0px 15px rgba(194, 25, 9, 0.6); } .plan2:hover{ transform: scale(1.05); } .price{ color: rgb(12, 11, 12); padding: 10px; font-size: 18px; font-weight: bolder; } .price-no{ color: rgb(18, 17, 17); padding: 10px; font-weight: bolder; font-size: 18px; } .plan-header { padding: 15px; text-align: center; font-size: 20px; font-weight: bolder; color: #ffffff; border-top-left-radius: 8px; border-top-right-radius: 8px; } .plan-footer { text-align: center; padding: 20px; } .plan-content p{ font-size: 16px; margin-top: 10px; margin-left: 20px; color: white; margin-right: 20px; } .btn { width: 100%; display: inline-block; background-color: #ffffff; color: #111010; padding: 10px 20px; border-radius: 5px; font-weight: bold; text-decoration: none; transition: background-color 0.3s; } .btn:hover { background-color: #0c0c0d; color: #ffffff; } @media (max-width: 768px) { .plan-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } .plan { width: 100%; margin-bottom: 20px; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .plan2 { width: 100%; transform: scale(1.02); } } #map-container { width: 100%; margin-left: 20px; height: 500px; /* Altura deseada para el mapa */ margin-top: 20px; background-color: #f0f0f0; /* Color de fondo para el contenedor del mapa */ overflow: hidden; /* Para que el borde redondeado se aplique correctamente */ } @media (max-width: 768px) { #map-container { margin-left: 0px; } .plan-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } .plan { width: 100%; margin-bottom: 20px; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .plan2 { width: 100%; transform: scale(1.02); } } /* Estilos para las preguntas frecuentes */ /* Estilos para las preguntas frecuentes */ /* Estilos para las preguntas frecuentes */ /* Estilos para las preguntas frecuentes */ .faq-section { padding: 20px; display: flex; justify-content: center; /* Centrar horizontalmente */ align-items: center; /* Centrar verticalmente */ height: auto; /* Altura del viewport */ } .faq-container { max-width: 700px; margin: 0 auto; /* Centrar el contenedor */ text-align: center; /* Centrar el contenido dentro del contenedor */ } .faq-title { font-size: 34px; /* Tamaño más grande para el título */ } .faq-description { font-size: 18px; /* Tamaño de fuente para la descripción */ margin-bottom: 40px; /* Espacio inferior */ } .faq-item { margin-bottom: 10px; } .question { position: relative; /* Posición relativa para alinear la flecha */ font-weight: bold; cursor: pointer; padding: 10px; padding-right: 60px; border-bottom: 1px solid rgb(197, 194, 194); font-size: 20px; } .arrow { position: absolute; /* Posición absoluta para la flecha */ top: 50%; /* Alinear verticalmente al centro */ right: 10px; /* Alinear a la derecha */ transform: translateY(-50%); /* Ajustar verticalmente */ transition: transform 0.3s ease; /* Animación de transición */ } .question.closed .arrow { transform: translateY(-50%) rotate(-90deg); /* Rotar la flecha hacia arriba */ } .answer { display: none; margin-top: 10px; font-size: 18px; } /* Opiniones */ .opinion-grid img { width: 220px; height: 210px; object-fit: cover; object-position: center; border-radius: 10%; overflow: hidden; border: 4px solid #fff; /* Puedes cambiar el color del borde según tus preferencias */ } .opinion-grid h3 { font-size: 1.6em; margin-left: 5px; margin-right: 5px; margin-bottom: 8px; text-align: left; } .opinion-grid h4 { font-size: 0.9em; color: #888; /* Puedes cambiar el color del subtitulo según tus preferencias */ margin-bottom: 8px; margin-left: 5px; margin-right: 5px; text-align: left; } .opinion-grid p { margin-left: 5px; margin-right: 5px; text-align: left; font-size: 13px; /* Ajusta el tamaño de fuente según tus preferencias */ } .hidden{ display: none; } .opiniones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Distribuir en columnas con un ancho mínimo de 300px */ gap: 15px; /* Espacio entre las opiniones */ justify-items: center; /* Centrar horizontalmente */ } .opinion-grid { width: 220px; /* Ancho máximo de cada opinión */ text-align: center; border-radius: 10px; background-color: #f2f2f2; } .opinion-grid:hover { transform: scale(1.02); } @media screen and (max-width: 768px) { .opiniones-grid { grid-template-columns: repeat(2, 1fr); /* Cambiar a 2 columnas en pantallas más pequeñas */ } } /* Footer styles */ .footer { background-color: #111; color: #fff; padding: 50px 0; } .footer-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%; padding: 50px; margin: 0 auto; } .footer-info, .footer-links, .footer-social { flex: 1 1 300px; margin-bottom: 30px; padding-right: 50px; } .footer-heading { font-size: 18px; margin-bottom: 20px; margin-top: 20px; color: rgb(198, 7, 198); text-align: start; } .footer-text { font-size: 14px; line-height: 1.6; } .footer-list { list-style: none; padding: 0; } .footer-link { color: #fff; text-decoration: none; transition: color 0.3s ease; } .footer-link:hover { color: #e50c6e; } .footer-social-list { list-style: none; padding: 0; display: flex; } .footer-social-link { color: #fff; text-decoration: none; font-size: 24px; margin-right: 20px; transition: color 0.3s ease; } .footer-social-link:hover { color: #e50c6e; } .footer-bottom { margin-top: 50px; text-align: center; } @media screen and (max-width: 768px) { .footer-container { flex-direction: column; align-items: center; } .footer-info, .footer-links, .footer-social { width: 100%; margin-bottom: 0px; flex: 1 1 100px; } .footer-social { text-align: center; } } .carousel-inner { display: flex; transition: transform 0.5s ease-in-out; } .carousel-item { min-width: 100%; box-sizing: border-box; } .carousel-item img { width: 100%; display: block; } .carousel { position: relative; max-width: 100%; overflow: hidden; } .carousel-inner { display: flex; transition: transform 0.5s ease-in-out; } .carousel-item { min-width: 100%; cursor: pointer; box-sizing: border-box; } .carousel-item img { width: 100%; /* Change width to auto */ height: 100vh; /* Adjust height as needed */ display: block; margin: 0 auto; /* Center the image horizontally */ object-fit: cover; /* Maintain aspect ratio and cover the element */ } .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: white; border: none; padding: 10px; cursor: pointer; z-index: 1; } .prev { left: 10px; } .next { right: 10px; } .containerLY { display: flex; justify-content: space-around; align-items: center; margin-top: 30px; margin-bottom: 35px; margin-left: 25px; margin-right: 25px; overflow-x: auto; } .card { display: flex; align-items: center; margin: 10px; flex-shrink: 0; } .card img { width: 84px; height: 84px; margin-right: 10px; } .card p { margin: 0; font-size: 17px; margin-left: 10px; } @media (max-width: 768px) { .container { justify-content: flex-start; } .card { min-width: 200px; } .carousel-item img { width: 100%; /* Change width to auto */ height: 250px; /* Adjust height as needed */ } } .services { display: flex; justify-content: center; gap: 120px; flex-wrap: wrap; } /* Estilo general para el contenedor de los servicios */ .services2 { display: flex; justify-content: center; gap: 50px; height: auto; padding: 12px; flex-wrap: wrap; } /* Estilo para los elementos de servicio */ .service-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; max-width: 300px; text-align: center; position: relative; /* Necesario para la animación */ overflow: hidden; /* Evita que el contenido salga del contenedor */ } /* Estilo para la imagen del carro */ .service-item img { max-width: 380px; height: 150px; object-fit: cover; margin-bottom: 15px; transition: transform 0.5s ease-out; /* Transición suave */ position: relative; animation: moveIn 2s ease-out forwards; /* Añade la animación */ } /* Efecto de animación para la imagen */ @keyframes moveIn { from { transform: translateX(100%) scaleX(1); /* Inicia fuera de la pantalla desde la izquierda */ } to { } } /* Efecto al pasar el ratón sobre la imagen */ .service-item img:hover { transform: scale(1.05); /* Agranda la imagen al pasar el ratón */ } /* Estilo para el texto del servicio */ .service-item p { background-color: rgb(53, 123, 193); text-align: center; border-radius: 20px; padding: 3px; width: 100%; font-size: 21px; font-weight: bold; margin-bottom: 0; color: #ffffff; } #auto1 { margin-left: 85px; margin-right: 85px; border-radius: 15px; } #auto2 { margin-top: -25px; margin-left: 65px; margin-right: 65px; border-radius: 15px; } @media (max-width: 768px) { #auto1 { margin-left: 15px; margin-right: 15px; border-radius: 15px; } #auto2 { margin-top: -10px; margin-left: 5px; margin-right: 5px; border-radius: 15px; } } .whatsapp-container { position: fixed; bottom: 20px; right: 20px; display: flex; align-items: center; cursor: pointer; z-index: 1000; } .whatsapp-button { display: flex; align-items: center; background-color: #f3f3f3; border-radius: 10px; /* Redondeado suave */ padding: 10px 20px; /* Espacio alrededor del texto e ícono */ } .whatsapp-button img { width: 50px; /* Tamaño del ícono */ height: 50px; } .whatsapp-text { color: rgb(2, 47, 124); /* Texto en blanco para contraste */ font-size: 13px; /* Tamaño de la letra */ font-weight: bold; width: 200px; } @media (max-width: 768px) { .whatsapp-container { bottom: 10px; right: 10px; } .whatsapp-button { padding: 8px 16px; } .whatsapp-button img { width: 40px; height: 40px; } .whatsapp-text { font-size: 14px; } } .whatsapp-menu { display: none; position: fixed; bottom: 95px; right: 20px; background-color: #1e201e; border: 1px solid #ddd; border-radius: 8px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; } .menu-item { display: block; padding: 10px; text-align: left; cursor: pointer; color: rgb(68, 83, 245); border-bottom: 1px solid #ddd; background-color: #eaeaea; border-bottom: 2px solid #eafff2; width: 287px; font-weight: bold; } .menu-item:hover { background-color: #dadada; } .container { text-align: center; padding: 50px; } p.subtitle { color: #7e7d7d; font-size: 1.2em; margin-bottom: 40px; } .steps { display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 1200px; } /* Código para vista de escritorio */ .step { background-color: white; border-radius: 10px; width: 300px; height: 350px; padding: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); position: relative; text-align: center; } .step img { width: 80px; margin-top: 50px; margin-bottom: 10px; } .step h2 { color: #38387c; font-size: 2.2em; margin-bottom: 10px; } .step p { color: #7e7d7d; font-size: 1.5em; margin: 0; } .step:before { content: attr(data-step); background-color: #00c087; color: white; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 1.5em; position: absolute; font-weight: bolder; top: -20px; left: calc(50% - 20px); } .connector { width: 100px; height: 2px; background-color: #d3d3d3; position: absolute; top: 50%; left: calc(100% + 10px); z-index: -1; } .step:last-child .connector { display: none; } /* Estilo para vista móvil */ @media (max-width: 768px) { .steps { flex-direction: column; align-items: center; } .step { width: 90%; margin-bottom: 30px; } .connector { display: none; } .step:before { top: -10px; left: 10px; } } .destinations-section { text-align: center; padding: 50px; background-color: white; } .destinations-section h2 { color: #00c087; font-size: 3em; margin-bottom: 10px; } .destinations-section .subtitle { color: #666666; font-size: 2.1em; margin-bottom: 40px; } .carouselbi-container { display: flex; justify-content: center; align-items: center; padding: 20px; background-color: white; } .carouselbi-track { display: flex; gap: 20px; justify-content: center; align-items: center; } .carouselbi-item { border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 20px; transition: transform 0.3s; text-align: center; } .carouselbi-item img { width: 200px; } .carouselbi-item p { font-size: 1.2em; padding: 10px 0; margin: 0; } .carouselbi-item:hover { transform: scale(1.05); } .view-all-button { background-color: rgb(72, 71, 71); color: #ffffff; font-size: 1em; padding: 10px 20px; border: 2px solid #e3e3e3; border-radius: 5px; cursor: pointer; font-size: 20px; transition: background-color 0.3s; } .view-all-button:hover { background-color: #00c087; color: white; } .container2 { display: flex; flex-direction: column; gap: 15px; background-color: #257ad4; padding: 20px; margin-top: 120px; align-items: center; } .input-group2 { position: relative; width: 100%; } .input-element2 { width: 100%; padding: 15px; border-radius: 10px; border: 1px solid #ddd; font-size: 16px; padding-right: 40px; box-sizing: border-box; } .input-icon2 { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #0b11bc; } .label2 { margin-bottom: 5px; font-size: 14px; color: #fff; } .search-button2 { background-color: #1a1b1a; color: #fff; padding: 15px; width: 100%; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; width: 100%; } .search-button2:disabled { background-color: #ccc; } .logo2 { color: #1e1f1d; font-size: 14px; display: flex; align-items: center; gap: 5px; text-decoration: none; margin-top: 20px; text-align: center; justify-content: center; width: 100%; } .error-message2 { color: #ff0000; font-size: 12px; margin-top: 5px; } .search-button2:hover { transform: scale(1.05); } /* Estilos Responsivos para escritorio */ @media (min-width: 768px) { .container2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background-color: #1b64c9; padding: 20px; margin-top: 120px; } .input-group2 { width: auto; } .input-element2 { width: 100%; padding: 10px; font-size: 14px; } .search-button2 { grid-column: 2 / 3; align-self: end; justify-self: end; width: auto; width: 100%; padding: 10px 20px; } .logo2 { grid-column: 1 / 3; justify-self: center; margin-top: 10px; } } /* Contenedor de la sección FAQ */ .faq-section { max-width: 1200px; /* Ampliar el ancho máximo para más espacio en pantallas grandes */ margin: 0 auto; padding: 20px; box-sizing: border-box; /* Asegura que el padding se incluya en el ancho total */ display: grid; grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)); /* Ajusta el tamaño de las columnas */ gap: 10px; /* Espacio entre las preguntas */ } /* Elemento FAQ */ .faq-item { background-color: #eceef3; /* Color de fondo para cada pregunta */ border-radius: 8px; margin-bottom: 10px; padding: 15px; transition: background-color 0.3s ease; } /* Efecto hover */ .faq-item:hover { background-color: #dcdddf; /* Color al pasar el ratón por encima */ } /* Título de la pregunta */ .faq-item h3 { font-size: 18px; margin: 0; cursor: pointer; } /* Respuesta de la FAQ */ .faq-item .faq-answer { display: none; padding-top: 10px; font-size: 14px; color: #222324; /* Color del texto de la respuesta */ } /* Mostrar la respuesta cuando el elemento está activo */ .faq-item.active .faq-answer { display: block; } /* Enlaces dentro de la respuesta */ .faq-item .faq-answer a { color: #60a5fa; /* Color del enlace */ text-decoration: none; } /* Efecto hover en el enlace */ .faq-item .faq-answer a:hover { text-decoration: underline; } /* Márgenes para los párrafos dentro de la respuesta */ .faq-item .faq-answer p { margin: 0; } /* Estilos para pantallas pequeñas */ @media (max-width: 768px) { .faq-item h3 { font-size: 16px; } .faq-item { padding: 10px; } .faq-section { padding: 10px; } } .faq-header { text-align: center; margin-bottom: 20px; } .faq-header h2 { font-size: 34px; margin: 0; color: rgb(53, 123, 193); /* Ajusta el color del texto según el diseño */ } .faq-header h3 { font-size: 34px; margin: 0; color: rgb(53, 123, 193); /* Ajusta el color del texto según el diseño */ } .faq-header p { font-size: 16px; color: #464647; /* Color del texto de la descripción */ margin-top: 5px; } /* Estilos para pantallas pequeñas */ @media (max-width: 768px) { .faq-item h3 { font-size: 16px; } .faq-item p { font-size: 12px; } } .contact-form-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 100%; width: 100%; } .contact-form-container h2 { margin-bottom: 20px; color: #333; text-align: center; } .contact-form-container label { display: block; margin-bottom: 5px; color: #333; } .contact-form-container input[type="text"], .contact-form-container input[type="email"], .contact-form-container input[type="tel"], .contact-form-container textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px; } .contact-form-container button { width: 100%; padding: 10px; background-color: #4686ca; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .contact-form-container button:hover { background-color: #2715ce; } .checkbox-container { display: flex; align-items: center; margin-bottom: 15px; } .checkbox-container input[type="checkbox"] { margin-right: 10px; } @media (max-width: 768px) { .contact-form-container { padding: 15px; } } .location-section { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 100%; width: 100%; margin: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .location-section h2 { text-align: center; color: #333; margin-bottom: 20px; } .location-content { display: flex; flex-wrap: wrap; gap: 20px; } .map-container { flex: 1; min-width: 300px; } .contact-info { flex: 1; min-width: 300px; } .contact-info h3 { color: #333; margin-bottom: 15px; } .contact-info p { margin: 10px 0; color: #555; line-height: 1.6; font-size: 20px; } @media (max-width: 768px) { .location-content { flex-direction: column; align-items: center; } } @media (max-width: 480px) { .location-section { padding: 15px; } .location-section h2 { font-size: 18px; } .contact-info p { font-size: 14px; } } .section { display: flex; align-items: center; justify-content: space-between; padding: 40px 20px; background-color: #fff; max-width: 1200px; border-radius: 10px; margin: 40px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .image-container { flex: 1; text-align: center; } .image-container img { max-width: 100%; height: auto; } .text-container { flex: 2; padding: 0 20px; } .text-container h2 { font-size: 25px; color: #333; } .text-container p { font-size: 16px; color: #666; margin-top: 10px; line-height: 1.6; } .cta-button { background-color: #007aff;; color: #fff; border: none; padding: 10px 20px; font-size: 16px; font-weight: bolder; border-radius: 5px; width: 100%; cursor: pointer; margin-top: 20px; } .cta-button:hover { background-color: white; color: #007aff;; border: #007aff solid 2px; } @media (max-width: 768px) { .section { flex-direction: column; text-align: center; } .text-container { padding: 20px 0; } } .main-container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } .location-section, .contact-form-container { flex: 1 1 50%; /* Asegura que cada sección tome la mitad del ancho en escritorio */ margin: 10px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } @media (max-width: 768px) { .location-section, .contact-form-container { flex: 1 1 100%; /* Cada sección toma el 100% del ancho en dispositivos móviles */ } } .preguntaspading{ padding-bottom: 5%; } @media (max-width: 768px) { .preguntaspading{ padding-bottom: 480px; } } .main-container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } .location-section, .contact-form-container { flex: 1 1 45%; /* Ocupa el 45% del espacio disponible */ margin: 10px; box-sizing: border-box; } .contact-info p { margin: 10px 0; } @media (max-width: 768px) { .main-container { flex-direction: column; } .location-section, .contact-form-container { flex: 1 1 100%; /* Cada sección ocupa el 100% del ancho en dispositivos móviles */ } } /* Estilos adicionales para mejorar la legibilidad y la interfaz */ h2 { color: #333; } input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 10px; margin: 5px 0; box-sizing: border-box; } .checkbox-container { margin: 10px 0; display: flex; align-items: center; } .checkbox-container label { margin-left: 5px; } .contact-info p { display: flex; align-items: center; /* Alinea los íconos con el texto */ margin: 10px 0; } .contact-info img.icon { margin-right: 10px; /* Espacio entre el ícono y el texto */ width: 24px; /* Tamaño estándar para los íconos */ height: 24px; } .hoverimage { border-radius: 50%; } .hoverimage:hover { transform: scale(1.05); } .containermi { display: flex; flex-wrap: wrap; gap: 10px; background-color: #4686ca; margin-left: 0px; margin-right: 0px; padding:20px; padding-top: 20px; margin-top: 90px; align-items: center; } /* Responsive Design */ @media (max-width: 768px) { .location-content { grid-template-columns: 1fr; /* Una columna en móviles */ } .containermi { padding: 10px; } } .input-group { display: flex; flex-direction: column; flex: 1; } .labelly { font-size: 14px; color: #ffffff; font-weight: bold; } .input-element { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="date"], input[type="time"] { margin-bottom: 0px; } .search-button { flex: 1; padding: 10px; background-color: #16d77d; color: white; border: none; border-radius: 4px; font-weight: bolder; margin-top: 20px; cursor: pointer; } .search-button:hover { background-color: #262927; } .clickable-image-container { height: auto; /* 80% de la altura de la ventana */ display: flex; justify-content: center; margin-left: 20px; margin-right: 20px; align-items: center; } .clickable-image-container img { max-width: 600px; /* Limitar el ancho de la imagen */ transition: transform 0.3s ease; text-align: center; border-radius: 10px; border: 2px #0056b3 solid; justify-content: center; } .clickable-image-container a { display: inline-block; } .clickable-image-container img:hover { cursor: pointer; transform: scale(1.05); /* Efecto de hover (ampliación) */ } .center-container { display: flex; justify-content: center; /* Centra horizontalmente */ align-items: center; /* Centra verticalmente si es necesario */ /* Ocupa el 100% de la altura de la pantalla */ } .center-container p { margin: 0 auto; /* Asegura que el

esté centrado dentro de su contenedor */ } .center-container p:hover { transform: scale(1.05); /* Asegura que el

esté centrado dentro de su contenedor */ } .image-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px; } .image-grid a { display: block; } .image-grid img { width: 100%; height: auto; border-radius: 8px; transition: transform 0.3s ease; } .image-grid img:hover { transform: scale(1.05); } /* Responsive for mobile devices */ @media (max-width: 768px) { .image-grid { grid-template-columns: repeat(2, 1fr); } } .location-section { background-color: #ffffff; /* Fondo blanco para la sección */ border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 30px 20px; max-width: 800px; margin: 40px auto; } .section-title { font-size: 28px; font-weight: bold; color: #333; text-align: center; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; } /* Contenedor de ubicaciones */ .location-content { display: grid; grid-template-columns: 1fr 1fr; /* Dos columnas */ gap: 20px; /* Espacio entre columnas */ } .location-item { background-color: #f7f7f7; padding: 20px; border-radius: 8px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .location-item:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } /* Encabezados de ubicación */ .location-header { font-size: 18px; font-weight: bold; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; color: #007BFF; /* Azul elegante */ } .icon { width: 24px; height: 24px; margin-right: 10px; } .location-detail, .phone-detail, .email-detail { font-size: 16px; color: #555; margin: 5px 0; } /* Encabezados secundarios */ .phone-header, .email-header { font-size: 16px; font-weight: bold; margin-top: 15px; color: #333; } /* Responsive Design */ @media (max-width: 768px) { .location-content { grid-template-columns: 1fr; /* Una columna en móviles */ } }