body { background-color: var(--main-color)!important; color: white; font-family: "Poppins", sans-serif; overflow-x: hidden; } /* Header */ :root { --highlight: #ff9d00; --main-color: #181818; } /* Core Header Styles */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(24, 24, 24, 0.95); /* Dark background with slight transparency */ backdrop-filter: blur(5px); /* Optional: adds blur effect to background */ padding: 15px 0; max-height: 85px; } .header-wrapper { max-width: 1550px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; } /* Logo Styles */ .site-logo { flex-shrink: 0; } .site-logo img { width: 160px; height: auto; } /* Main Navigation */ .main-navigation { display: flex; align-items: center; gap: 30px; } .nav-menu { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; } /* Navigation Links */ .nav-menu a, .nav-menu .dropbtn { color: #fff !important; text-decoration: none; transition: 0.3s color; font-size: 14px; text-transform: uppercase; } .nav-menu a:hover, .nav-menu .dropbtn:hover { color: var(--highlight) !important; text-decoration: none; } /* Dropdown Styles */ .nav-menu .dropdown { position: relative; } .nav-menu .dropbtn { background: transparent; border: none; padding: 8px 16px; cursor: pointer; display: flex; align-items: center; gap: 5px; } .nav-menu .dropbtn::after { content: ''; border: 2px solid #fff; border-left: transparent; border-top: transparent; width: 4px; height: 4px; transform: rotate(45deg); transition: transform 0.2s; margin-left: 2px; margin-bottom: 5px; } .nav-menu .dropbtn:hover::after { transform: rotate(0deg); } .nav-menu .dropdown-content { position: absolute; top: 100%; left: 0; background: #000000; min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s; } .nav-menu .dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu .dropdown-content a { display: block; padding: 12px 16px; color: #fff !important; text-decoration: none; transition: all 0.2s; } .nav-menu .dropdown-content a:hover { background: #FF7425; color: #fff !important; } /* Social Icons */ .header-social { display: flex; align-items: center; gap: 15px; } .header-social img { width: 35px; height: 35px; transition: transform 0.2s; } .header-social img:hover { transform: scale(1.1); } .divider { height: 1px; background: rgba(255,255,255,0.1); margin: 8px 16px; } /* Mobile Menu Styles */ .mobile-nav { display: none; } @media (max-width: 980px) { .main-navigation, .header-social { display: none; } .site-logo img { width: 120px; } .mobile-nav { display: block; } .mobile-nav-toggle { position: fixed; top: 0.2rem; right: 1rem; z-index: 1002; /* Increased z-index to be above menu and overlay */ background: transparent; border: none; padding: 0.5rem; cursor: pointer; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .hamburger { width: 30px; height: 20px; position: relative; } .hamburger span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; transition: 0.25s ease-in-out; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 9px; } .hamburger span:nth-child(3) { top: 18px; } .mobile-nav-menu { position: fixed; top: 0; right: 0; height: 100vh; width: 250px; background: #111111; padding: 80px 2rem 2rem; transform: translateX(100%); transition: transform 0.3s ease-out, visibility 0s linear 0.3s; z-index: 1001; /* Increased z-index to be above overlay */ overflow-y: auto; display: block; visibility: hidden; } .mobile-nav-menu[data-visible="true"] { transform: translateX(0); visibility: visible; transition: transform 0.3s ease-out; } .mobile-nav-list { list-style: none; padding: 0; margin: 0; } .mobile-nav-item { margin: 1rem 0; } .mobile-nav-item a, .mobile-dropdown-toggle { color: #fff !important; text-decoration: none; font-size: 16px; padding: 0.5rem 0; display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; } .mobile-dropdown-toggle::after { content: ''; width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform 0.3s ease; margin-left: 10px; margin-bottom: 3px; display: inline-block; } .mobile-dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); } .mobile-dropdown-menu { height: 0; opacity: 0; padding: 0 0 0 1rem; margin: 0; overflow: hidden; transition: height 0.3s ease-out, opacity 0.2s ease-out; display: block !important; /* Always keep it in DOM */ } .mobile-dropdown-menu[data-visible="true"] { height: auto; opacity: 1; margin: 0.5rem 0; } .mobile-dropdown-menu a { color: #fff !important; font-size: 14px; padding: 0.3rem 0; } .mobile-dropdown-menu a:hover { color: var(--highlight) !important; background: transparent; } .mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: 0.3s ease-in-out; z-index: 10; /* Keep overlay below menu but above other content */ } .mobile-nav-overlay.active { opacity: 1; visibility: visible; } .mobile-dropdown-toggle[aria-expanded="true"] { color: var(--highlight) !important; } .mobile-nav-item .mobile-dropdown-toggle[aria-expanded="true"] + .mobile-dropdown-menu { border-left: 2px solid var(--highlight); } .mobile-nav-item .mobile-dropdown-toggle[aria-expanded="true"]::after { border-color: var(--highlight); } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* MAIN */ :root { --main-color: #181818; --highlight: #ff9d00; } h2.title { font-size: 40px; text-transform: uppercase; font-weight: 600; color: var(--highlight); margin-bottom: 1.5rem; } h2.title i { font-size: 24px; color: var(--highlight); vertical-align: middle; margin-left: 8px; } body { background-color: var(--main-color); color: white; font-family: "Poppins", sans-serif; overflow-x: hidden; } .button { background: url(https://raw.githubusercontent.com/adavice/amg-tech-git/main/img/top1_6.png) no-repeat; border: 0; font-weight: 200; text-align: center; display: block; color: #fff; padding: 18px 0; margin-left: auto; margin-top: 30px; transition: box-shadow 0.5s; cursor: pointer; margin-left: 0; font-size: 16px; text-transform: uppercase; padding-left: 70px; font-weight: 400; } .land__overlay { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; opacity: 50%; background-size: cover; } .hero { width: 100%; height: calc(100vh - 170px); } .custom-video-container video { width: auto; height: 100%; border-radius: 20px; filter: drop-shadow(2px 4px 6px black); cursor: pointer; } .custom-play-button { color: var(--highlight); font-size: 36px; } .button { background: url(https://raw.githubusercontent.com/adavice/amg-tech-git/main/img/top1_6.png) no-repeat; border: 0; font-weight: 200; text-align: center; display: block; color: #fff; padding: 20px 0; margin-left: auto; margin-top: 30px; transition: box-shadow 0.5s; cursor: pointer; margin-left: 0; font-size: 16px; text-transform: uppercase; width: fit-content; padding-left: 70px; } /* Hero Section Styles */ .hero { width: 100%; position: relative; overflow: hidden; height: calc(100vh - 170px); } .hero h1 { color: #fff; margin: auto; max-width: 720px; text-align: left; font-size: 32px; font-family: "Poppins", sans-serif; } .hero h3 { font-size: 32px; margin: 20px 0; color: #ff7425; -webkit-background-clip: text; text-shadow: 0 9px 25px #1618175e; text-align: left; font-family: "Poppins", sans-serif; } .hero .wrapper { display: flex; height: 100%; position: relative; z-index: 10; } .hero .wrapper > div { text-align: center; margin: auto; height: fit-content; max-width: 720px; padding: 0 15px; margin-left: 0; } .hero .button { margin-top: 60px; display: flex; justify-content: space-around; } /* Content Section Styles */ .content-section { position: relative; z-index: 1; } .content-section p { color: rgba(255, 255, 255, 0.8); line-height: 1.6; font-size: 16px; margin-bottom: 2rem; } /* Custom Video Container */ .custom-video-container { position: relative; width: 450px; height: 450px; border-radius: 20px; overflow: hidden; border-radius: 50%; } .custom-video-container video { width: auto; height: 100%; border-radius: 20px; filter: drop-shadow(2px 4px 6px black); cursor: pointer; } .custom-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .custom-play-button:hover { background: rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%) scale(1.1); } .custom-video-container.playing .custom-play-button { opacity: 0; visibility: hidden; } .custom-video-container:hover .custom-play-button { opacity: 1; visibility: visible; } /* Particle Overlay */ .land__overlay { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; opacity: 50%; background-size: cover; } /* Animation Classes */ .animate-block { opacity: 1; /* Change from 0 to 1 */ transform: translateX(0); transition: all 1s ease; } .animate-block[data-animation="left"] { transform: translateX(-100px); } .animate-block[data-animation="right"] { transform: translateX(100px); } .animate-block.animated { opacity: 1; transform: translateX(0); } /* Optional: Add these classes for GSAP animations */ .gsap-reveal { visibility: hidden; } /* Responsive Styles */ @media (max-width: 980px) { .hero h1 { font-size: 28px; } .hero h3 { font-size: 24px; } .custom-video-container { width: 300px; height: 300px; } .custom-play-button { width: 60px; height: 60px; } .hero.main_page { height: fit-content; } .hero.main_page .wrapper { flex-direction: column; gap: 30px; } .hero.main_page .wrapper .container { justify-content: center; } } /* FOOTER */ :root { --darker: #202025; } footer { background-image: linear-gradient(to right, #111111, #111111); color: #fff; height: fit-content; padding: 30px 20px; position: relative; opacity: 0.99; font-family: Poppins, Arial, sans-serif; } .leftblock { position: relative; left: 0; } .leftblock p { font-size: 14px; } .leftblock-social { display: flex; gap: 20px; margin-top: 20px; } .leftblock-social img { width: 35px; } .rightblock { font-size: 16px; display: flex; text-align: left; right: 0; font-weight: 600; flex-direction: column; align-items: flex-start; gap: 5px; } .rightblock a { color: #fff; transition: color 0.3s; text-decoration: none; margin-left: 0px; display: inline-block; font-size: 14px; font-weight: 200; } .rightblock a:hover { color: var(--highlight) !important; } footer .wrapper { position: relative; padding: 0; display: flex; justify-content: space-between; min-width: 980px; max-width: 1366px; margin-right: auto; margin-left: auto; padding: 0 20px; } footer .social { display: flex; justify-content: flex-end; gap: 20px; } footer .logo1 { width: 250px !important; padding-bottom: 20px; } .social .button { background: url("https://raw.githubusercontent.com/adavice/amg-tech-git/main/img/top1_6.png") no-repeat; border: 0; font-weight: 200; text-align: center; display: block; color: #fff; padding: 20px 0; margin-left: auto; transition: box-shadow 0.5s; cursor: pointer; font-size: 16px; text-transform: uppercase; width: 270px; } @media all and (max-width: 980px) { footer .wrapper { flex-direction: column; gap: 30px; padding: 50px; min-width: unset; } footer .logo1 { width: 120px !important; } footer .rightblock > a { margin-right: 0px; display: block; font-size: 14px; } .social .button { margin-left: auto; margin-right: auto; } }