*/ .navbar-cont { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; /* Ensures navbar stays on top of other content */ background-color: #fff; /* Set your preferred background color */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: adds subtle shadow */ } .navbar-cont { font-family: "cabin"; background-color: #fdfdfd; color: #222; line-height: 1.6; } /* Navbar */ nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; } /* Logo */ .logo { display: flex; align-items: center; font-size: 1.8rem; font-weight: 700; color: #2c2a2a; text-decoration: none; } .logo img { height: 60px; margin-right: 40px; } /* Nav List */ nav ul { display: flex; list-style: none; gap: 1.5rem; align-items: center; margin: 0; padding: 0; } nav ul li { position: relative; } nav ul li a { display: inline-flex; align-items: left; height: 100%; /* Makes the anchor fill vertical space */ color: #3a0348; text-decoration: none; padding: 10px 15px; font-weight: 600; transition: background 0.3s, color 0.3s; font-size: 1.1rem; } nav ul li a:hover { background: linear-gradient(135deg, #f3e1f7 0%, #d9b8ec 100%); color: #000; border-radius: 7px; } /* Dropdown */ .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background-color: #3a0348; min-width: 250px; border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); z-index: 999; padding: 3px; } .dropdown-content a { color: #fff; padding: 10px 15px; display: block; font-size: 1.05rem; /* Increased from 0.95rem */ text-align: left; font-weight: 500; } .dropdown-content a:hover { background-color: #652f81; } .dropdown:hover .dropdown-content { display: block; } /* Hamburger Menu */ .menu-toggle { display: none; font-size: 28px; color: #3a0348; cursor: pointer; user-select: none; } /* Responsive Styles */ @media (max-width: 768px) { .menu-toggle { display: block; } nav ul { flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: #3a0348; display: none; z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Removed any borders that might be appearing as a border */ border: none; } nav ul.active { display: flex; } nav ul li { margin: 0; width: 100%; text-align: center; } nav ul li:last-child { border-bottom: none; } /* nav ul li a { padding: 15px; color: #fff; border-bottom: 1px solid #5a2b6f; } */ nav ul li a, .dropdown a { padding: 15px; color: #fff !important; /* Force white color for all links in mobile view */ width: 100%; display: block; text-align: center; } .dropdown-content { position: static; background-color: #4a1f5c; box-shadow: none; border-radius: 0; } .dropdown-content a { padding: 12px; color: #fff !important; /* Ensure dropdown links are visible */ border-top: 1px solid #5a2b6f; } .dropdown:hover .dropdown-content { display: none; } .dropdown.open .dropdown-content { display: block; } } /* */ /* */ .pegasos-landing-page { font-family: "cabin"; background-color: #19012b; } .hero-section { max-width: 100%; height: auto; align-items: center; justify-content: center; padding: 120px 20px 90px 20px; background-size: cover; background-position: center; margin-top: 25px; } .hero-container { color: white; text-align: center; max-width: 1200px; margin: 0 auto; } .hero-container .hero-title { font-size: 66px; font-weight: 700; padding: 30px 0 40px 0; } .hero-container .hero-description { font-size: 40px; font-weight: 500; padding: 10px 0; } .hero-image { max-width: 100%; height: auto; margin-top: 30px; } .services-section { background-color: #f7edff; text-align: center; padding: 60px 20px; } .services-section h2 { font-size: 44px; font-weight: 700; color: #4b0082; } .services-container { margin: 40px 0; display: flex; flex-wrap: wrap; justify-content: center; } .service-item { text-decoration: none; color: #4b0082; font-size: 25px; font-weight: 600; margin-bottom: 30px; } .services-section .services-container .service-item .service-icon { height: 250px; width: 250px; border-radius: 50%; border: 3px solid #eaceff; object-fit: cover; transition: transform 0.3s ease; } .service-icon:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); background-color: #f9f5ff; color: #4b0082; } .service-item:hover { transform: scale(1.1); color: #d090ff; } /* Media Queries */ @media (max-width: 1200px) { .services-section .services-container .service-item .service-icon { height: 200px; width: 200px; } } @media (max-width: 992px) { .hero-container .hero-title { font-size: 50px; } .hero-container .hero-description { font-size: 30px; } .services-section h2 { font-size: 38px; } .service-item { font-size: 22px; } .services-section .services-container .service-item .service-icon { height: 180px; width: 180px; } } @media (max-width: 768px) { .hero-section { padding: 60px 15px; } .hero-container .hero-title { font-size: 40px; padding: 20px 0 30px 0; } .hero-container .hero-description { font-size: 24px; } .services-section { padding: 40px 15px; } .services-section h2 { font-size: 32px; } .service-item { font-size: 18px; } .services-section .services-container .service-item .service-icon { height: 150px; width: 150px; } } @media (max-width: 576px) { .hero-section { padding: 40px 10px; } .hero-container .hero-title { font-size: 32px; padding: 15px 0 20px 0; } .hero-container .hero-description { font-size: 18px; } .services-section { padding: 30px 10px; } .services-section h2 { font-size: 28px; } .service-item { font-size: 16px; } .services-section .services-container .service-item .service-icon { height: 120px; width: 120px; } } .iconsimg { animation: float 8s ease-in-out infinite; transition: all 0.3s ease; margin-top: 30px; } @keyframes float { 0% { transform: translateY(0px); } 25% { transform: translateY(-2px); } 75% { transform: translateY(2px); } 100% { transform: translateY(0px); } } .iconsimg:hover { transform: scale(1.1); animation-play-state: paused; } /* --------------------company about -------- */ .Decor1{ margin: 60px 0 0 0; } .about-section{ align-items: center; padding: 5px 0 80px 0; margin-top: 50px; overflow: hidden; } .about-content h2{ color: white; font-size: 52px; font-weight: 600; padding: 10px 0; } .about-content p{ color: white; font-size: 27px; padding: 10px 0; } /* ----image----- */ .about-image-container{ align-items: center; justify-content: center; text-align: right; position: relative; padding: 50px auto; } .design-box{ border-radius: 15px; width: 350px; height: 150px; background-color: #d090ff; position: absolute; bottom: 10%; right: 12%; z-index: 0; } .Company.illustration-image { position: relative; /* Must be positioned to apply z-index */ z-index: 1; /* Put image in front */ } .icons-box-about { display: flex; /* Enable flex layout */ gap: 35px; /* Add space between icons */ } .Decor2{ position: absolute; bottom: 15%; left: 12%; } @media (max-width: 1200px) { .about-content h2 { font-size: 44px; } .about-content p { font-size: 24px; } .design-box { width: 320px; right: 18%; } .Decor2 { left: 5%; } } @media (max-width: 992px) { .about-content h2 { font-size: 40px; } .about-content p { font-size: 22px; } .design-box { width: 300px; right: 15%; bottom: -5%; } .Decor2 { left: 20%; border: 2%; } .icons-box-about { gap: 25px; } } @media (max-width: 768px) { .about-section { padding: 5px 0 60px 0; } .about-content { margin-bottom: 3rem; } .about-content h2 { font-size: 36px; } .about-content p { font-size: 18px; } .about-image-container { padding: 0 1rem; display: flex; justify-content: center; position: relative; } .design-box { height: 120px; width: 260px; right: 52%; transform: translateX(50%); bottom: -5%; } .Decor2 { left: 1%; transform: translateX(-150%); bottom: 2%; } [class="Company illustration-image"] { max-height: 350px; object-fit: contain; margin: 0 auto; display: block; } } @media (max-width: 576px) { .Decor1 { max-width: 120px; margin: 40px 0 0 0; } .about-section { margin-top: 30px; margin-bottom: 50px; } .about-content h2 { font-size: 32px; } .about-content p { font-size: 15px; padding: 0 5px; } .icons-box-about { gap: 20px; justify-content: center; } .about-image-container { margin-top: 20px; } .design-box { height: 100px; width: 220px; } .Decor2 { max-width: 90px; left: 2%; } [class="Company illustration-image"] { max-height: 300px; } } /* Fix for very small screens */ @media (max-width: 480px) { .about-content h2 { font-size: 28px; text-align: center; } .about-content p { text-align: center; } .design-box { width: 80%; height: 80px; } .about-image-container { overflow: visible; padding: 0 15px; } [class="Company illustration-image"] { width: 100%; max-height: 280px; object-position: center; } } /* ---------------animation---------------- */ .Decor1 { animation: float 6s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .Decor1, .Decor2 { transition: all 0.3s ease; } .Decor2 { animation: move-horizontal 5s ease-in-out infinite; } @keyframes move-horizontal { 0% { transform: translateX(0px); } 50% { transform: translateX(20px); } 100% { transform: translateX(0px); } } /* Optional: Add hover effects for more interactivity */ .Decor1:hover { transform: scale(1.1); animation-play-state: paused; } .Decor2:hover { transform: scale(1.1); animation-play-state: paused; } /* ---------------------who we are ------------ */ .more-action { margin-top: 60px; padding-bottom: 60px; /* Optional: use instead or together with margin-bottom above */ } .box-cont{ text-decoration: none; color: #4b0082; font-size: 35px; font-weight: 700; } .box-cont:hover{ color: #d090ff; } .whowe{ position: relative; margin-bottom: 40px; } .who-we { max-width: 100%; height: auto; display: block; margin: 0 auto; } .Decor3{ position: absolute; right: 15%; bottom: 8%; animation: move-horizontal 5s ease-in-out infinite; } .action-items-whowe { display: flex; flex-direction: column; gap: 20px; /* Adds vertical space between the boxes */ padding: 0 15px; } .action-items-whowe .box-cont { width: 100%; /* CHANGED FROM 500px TO 100% */ min-height: 120px; /* Changed from fixed height to min-height */ background-color: #f7edff; border-radius: 15px; text-align: center; font-weight: 700; display: flex; align-items: center; justify-content: center; /* Changed to space-between for better arrow positioning */ padding: 10px 70px 10px 10px; /* Added right padding for the button */ position: relative; } .btn-arrow { position: absolute; right: 0; top: 50%; transform: translate(30%, -50%); height: 65px; width: 65px; border-radius: 25px; background-color: #4b0082; box-shadow: 5px 0px 8px rgba(255, 255, 255, 0.7); border: none; color: white; font-size: 24px; font-weight: 900; cursor: pointer; transition: all 0.3s ease; overflow: visible; } .btn-arrow .arrow-btn-whowe{ height: 40px; width: 40px; transition: transform 0.3s ease; } @keyframes move-horizontal { 0% { transform: translateX(0px); } 50% { transform: translateX(20px); } 100% { transform: translateX(0px); } } .Decor3:hover { transform: scale(1.1); animation-play-state: paused; } .arrow-btn-whowe { transition: transform 0.3s ease; } .btn-arrow:hover .arrow-btn-whowe { transform: translateX(15px); /* Move arrow right */ } /* Media Queries */ @media (max-width: 991px) { .whowe { margin-bottom: 30px; /* Reduce spacing on smaller screens */ } .action-items-whowe .box-cont { padding: 15px 60px 15px 15px; font-size: 24px; min-height: 100px; } .btn-arrow { height: 55px; width: 55px; } .btn-arrow .arrow-btn-whowe { height: 30px; width: 30px; } .Decor3 { right: 2%; bottom: 2%; } } @media (max-width: 767px) { .whowe { margin-bottom: 25px; } .action-items-whowe{ align-items: center; justify-content: center; text-align: center; } .action-items-whowe .box-cont { padding: 12px 50px 12px 12px; font-size: 20px; min-height: 90px; } .btn-arrow { height: 45px; width: 45px; transform: translate(25%, -50%); } .btn-arrow .arrow-btn-whowe { height: 25px; width: 25px; } .Decor3 { right: 5%; bottom: 3%; } } @media (max-width: 480px) { .whowe { margin-bottom: 30px; } .action-items-whowe { gap: 15px; /* Reduce gap on very small screens */ } .action-items-whowe .box-cont { padding: 10px 30px 10px 30px; font-size: 22px; min-height: 70px; text-align: center; } .btn-arrow { height: 40px; width: 40px; transform: translate(20%, -50%); } .Decor3 { right: 10%; bottom: -3%; } } .contactpart{ padding-bottom: 90px; } .contactpart .contactForm{ /* border: 1px solid white; */ padding: 0px; } .img-cont .msgbubble{ /* height: 400px !important; */ width: 90%; } .cont-para{ color: white; text-align: center; align-items: center; padding: 70px 0; } .cont-para h5{ font-size: 45px; padding: 15px 0; } .cont-para p{ font-size: 27px; } .contactstuffs { overflow: hidden; position: relative; } .bubble-img { position: relative; } .msgbubble, .manbubble { max-width: 100%; height: auto; object-fit: contain; } .msgbubble { width: 80%; } .manbubble { width: 100%; position: absolute; right: 5%; bottom: 0; } /* Override for navbar logo issue (targeted specifically) */ .navbar-cont .logo, .navbar-cont .logo img { border: none !important; outline: none !important; } /* Extra small devices (phones, less than 576px) */ @media (max-width: 575.98px) { .cont-para h5{ font-size: 35px; padding: 15px 0; } .cont-para p{ font-size: 23px; padding: 0 10px; } .msgbubble { width: 60%; min-height: auto; margin-bottom: 40px; } .manbubble { width: 60%; position: absolute; right: -13%; bottom: 10px; max-height: 300px; } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) and (max-width: 767.98px) { .cont-para h5{ font-size: 35px; padding: 15px 0; } .cont-para p{ font-size: 23px; } .msgbubble { width: 85%; min-height: auto; margin-bottom: 50px; } .manbubble { width: 60%; position: absolute; right: -20%; bottom: 10%; max-height: 400px; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991.98px) { .msgbubble { width: 70%; min-height: auto; } .manbubble { width: 80%; position: absolute; right: -25%; bottom: -20px; max-height: 400px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199.98px) { .bubble-img { min-height: 350px; } .msgbubble { width: 75%; } .manbubble { width: 70%; position: absolute; right: -20%; bottom: 0px; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .bubble-img { min-height: 400px; } .msgbubble { width: 70%; } .manbubble { width: 73%; position: absolute; right: -22%; bottom: 0; } } /* ------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ .bdy{ display: flex; justify-content: center; align-items: center; margin: 50px 0px 40px 0px; } .bdy h1{ margin-bottom: 30px; font-weight: 700; color: #4b0082; font-size: 60px; } .contact-form { background: #fff; padding: 30px; border-radius: 25px; box-shadow: 2px 2px 10px rgb(183, 183, 183); width: 80%; text-align: center; } .contact-form input, textarea { width: 90%; padding: 10px; margin: 5px 0; border: 2px solid #0c0c0c; border-radius: 5px; } input::placeholder, textarea::placeholder{ font-size: 18px; } .cntsub { background-color: #4b0082; color: white; padding: 10px 70px; border: none; border-radius: 7px; cursor: pointer; font-size: 16px; } .cntsub:hover { background-color: #570455; } .phone-container{ display: flex; width: 90%; padding: 1px 10px; margin: 5px auto; border: 2px solid #0c0c0c; border-radius: 5px; } .mobile-input { border: 0 !important; outline: 0 !important; padding: 5px !important; margin-left: 9px !important; width: 100% !important; } .custom-select-wrapper{ display: flex; justify-content: center; align-items: center; position: relative; } .country-code{ appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; outline: 0; position: relative; padding: 0 19px 0 0; font-weight: bold; } .custom-select-wrapper i{ font-size: 20px; color: #4b0082; position: absolute; right: 0px; pointer-events: none; } /* Extra small devices (phones, less than 576px) */ @media (max-width: 575.98px) { .contact-form { width: 90%; /* padding: 15px; */ padding: 0; } .cntsub { padding: 10px 40px; } .bdy h1{ font-size: 40px; padding-top: 20px; } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) and (max-width: 767.98px) { .contact-form { width: 80%; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991.98px) { .contact-form { width: 90%; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199.98px) { .contact-form { width: 90%; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .contact-form { width: 80%; } } /* ------------------------------------------------------------------ */ /*